There are a lot of them these days, but as with a lot of things, they didn’t cut it for me. They’re either too complicated or too limited, or too difficult to get your head around.
It’s more a library. You build the grid yourself using SASS-mixins. This way you’re free to choose the kind of media queries or number of breakpoints and sizes. And in the process you get to know your grid system as it grows with you.
We’ve got a couple of principles that should be made clear:
Put content in columns
Put columns in a row
Columns are flexible
Gutters are fixed
The padding of two columns make a gutter
The padding of a column and a row make a gutter
With great power comes great responsibility. Only include what you need!
Note: Below are some examples of how to use the grid. It's how I like to do it. If you wanna get fancy and use em-based media queries or get old-school and call the layouts “mobile” and “desktop”, knock yourself out; it's your grid. Let the content do the talking and include what's needed for that. Check the styles of this page for a real-life example.
Let's start with a grid of 12 columns. And while we're at it, let's split them into a couple of layouts:
This will generate classes with appropriate widths and paddings:
So if you have some elements that you'd like to lay out, you can do things like this:
This way the elements will be at full width for s, equally divided for l layout and something special for m. But c'mon, 12 columns and such a large gutter for small screens? That's insane. Let's clean that up and give large screens a bit more breathing room as well:
You can also enable prefixes and suffixes to leave extra room before or after columns:
Columns are not the only flexible pieces of the puzzle of RWD. Often you find yourself setting properties (like margins, paddings, etc) that need different sizes for different layouts. You can do this with specific CSS, but how about this:
This will generate classes with appropriate margins:
When you use these classes instead of specific CSS you'll notice that things get more consistent, especially in combination with the grid. But of course these classes aren't enough for all cases. That's why we've got some extra ones, which are still relative with the overall sizing of things:
triple and half are also available. In my experience, if you find yourself needing any more or less than this, there's probably something wrong with the design. If you experience a desperate need for more, file a bug and let me know.
When you're in a situation where you only want some margin in a specific layout, use properties-for-layout:
You can use double / triple / half here as well, like this:
There are situations when you don't want certain properties to be set, for instance by one of the above mixins. For these cases, you can do this:
Or when you want properties to reset for certain layouts only, you can do this: