Twelve columns. Six columns. Nine columns. As many columns as you want, in as many combinations as you want.
$col-groups: (12, 6, 9);
No fluid gutter width bullcrap. This is the real deal. What you set is what you get.
$gutter-width: 20px;
It takes just a few lines of code to start using Toast. And it’ll work all the way down to IE8.
<div class="grid"> <div class="grid__col grid__col--3-of-5 grid__col--centered"> <p>Centered columns? No problem.</p> </div> <div class="grid__col grid__col--3-of-5 grid__col--push-1-of-5"> <p>Push and pull columns in plain English.</p> </div> </div>
Nested grids, custom namespaces, simple switches for features like pulls and pushes, responsive layouts, and more. Start using Toast today.