Create Baseline Grids on the Web Using Sassline

A major part of online content is text-based, but people wont be interested in reading the text on your site unless the typography is well designed.

You might work with custom frameworks but those can feel restrictive. Instead try Sassline, a free Sass-based library for creating perfect gridlines on the web.

This free tool works on Sass so you’ll need to know your way around that preprocessing language first. If you’re still new to web development then it’s a good idea to practice your CSS and Sass before picking up Sassline.

But once you learn it you’ll never design layouts the same way again.

It uses rem units to create custom baselines that fit your text across the board. This includes all your headers, paragraphs, blockquotes, everything.

And Sassline comes with responsive breakpoints so you can automatically adjust your text size (and line height) based on the Sassline grid. This relies on Sass mixins which require Sass experience if you wanna work with them.

That’s why I specifically recommend this tool for experienced web developers looking to improve their workflow.

The demo page offers a pretty clear example of how this baseline grid works including list items, pull quotes, and various header sizes.

Plus you can add this into frontend frameworks like Bootstrap if you’re willing to make some minor adjustments to your code. The entire Sassline library is super versatile and it should be a staple for Sass lovers everywhere.

To get started visit the main GitHub repo and download a copy of the source files.

You’ll also find setup instructions and a link to this awesome blog post guiding you through the Sassline library feature by feature.