CSS: Out with the Old, in with the Grid


Frontend developers have witnessed such a monumental shift in the past few years. A year ago, I would have designed using a grid framework^1 built with floats. One for each width, another set of classes to define margins before and another set still to define margins after. If you wanted a different grid at a different breakpoint, then you would repeat the process.

^1: Anyone, remember 960.gs(https://960.gs)? Good times.

Using a preprocessor, like SASS(http://sass-lang.com), made this process less of a problem by being able to programatically churn out these repetitive classes using basic logic. Preprocessors, however, couldn’t fix the ultimate problem of needing to define those classes in the first place. Creating a grid system in code for a simple site nearly guaranteed that you will have a giant pile of unused classes that you would force your users to bear, OR you would use a build chain tool to remove, OR you would prune by hand.^2

^2: I can think of a litany of other possibilities but I think I've made my point clear enough.

Thankfully, including prebuilt frameworks or building your own from scratch can be considered an anti-pattern.

From the expert herself, Rachel Andrew(https://rachelandrew.co.uk):

You don’t need a tool that helps you make it look like you have a grid, you actually have a grid!

Embrace the future. Break those once trusty habits and use the Grid standard first, then hack backwards where necessary.

I have so much to unlearn 😬


Nope. Don't worry about leaving them here, instead hit me up @TRST_Blog and share your thoughts.