Using Free Text

A modular text mixin allows you to use an arbitrary size for typographical elements.

This mixin allows you to declare modular font sizes on text elements very easily. All you do is declare which size you want. For example:

@include type-free(16px);

This yields font-sizes in rem units with a px fallback at 16px, complete with margins and line-heights calculated based on other settings in the _config-typography.scss file. These can however be over ridden on demand. The following is a complete example:

@include type-free(16px, 0px, 24px, 1.25, false);

The aboce settings will use the 16px font size converted to rem units with a px fall back, set the top margin of the element to 0px, the bottom margin to 24px, overrides the $global-linehight to a value of 1.25.

Finally, it sets wether or not to use a unit-less line-height. If you just want to use a step and change the default margins, declaring this is enough:

@include type-free(16px, 0px, 24px);

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.