Baseline first.
Set text on the web to a baseline grid with Sass & rems
A starting point
Sassline aims to spread better typography across the web. It can be used for prototyping, blogs or full website builds. It has recommended base typography styles and Sass mixins to work proportionally from the baseline grid using rems.
Meticulous vertical rhythm
Due to the way CSS handles text setting a baseline grid on the web is tricky. Sassline does all the heavy lifting and gives you near print level typographic control. Easily align text across columns and use a precise vertical rhythm based on the baseline grid.
Responsive modular-scale
Sassline lets you set a modular-scale for each of your breakpoints and easily work from these values to size your type. This combined with the baseline grid allows you to have harmonious proportions across all aspects of your website.
Getting started
Sassline uses some pretty complex mixins so I recommend taking a look at the readme and read this blog post to find out how they work and how to use them. Version 2.1 includes some layouts to work from but you can use any other grid system if you prefer.
Setting the baseline
Sassline is based on a method used for setting text to a baseline when designing for print. By setting the root font-size as half the line-height of the paragraph text, the height of the baseline grid is set at 2rem. This allows us to easily use proportions of the baseline for margins and padding. The typographic styling included sets all text elements in the scope of the .typeset class to the baseline.