Writing CSS for web page layouts is hard.

Writing your layout in Sass with Zen Grids is easy.

With the verboseness of properties and values like margin, padding, floats, and clears, CSS actually gets in the way of figuring out how to layout our content.

That’s why our community created grid systems in the first place. Place a class into our HTML that matches a certain naming convention and the element gets laid out in our grid. Instead of dealing with a plethora of CSS properties, we dealt with class names. Simplification, FTW.

But with Responsive Web Design, an HTML element may be positioned in 4 or 5 different ways depending on the media query. Do we splatter 4 or 5 different class names into each element in our markup?

<div class="grid_2 mq1_grid_6 mq2_grid_8 mq2_push_3 mq3_grid_7 mq3_pull_4">

Alternatively, do we add IDs to each element and then use JavaScript to dynamically change the grid class names depending on the viewport size?

Let’s face it. Both of those solutions suck.

Fortunately, CSS preprocessors like Sass provide a solution. We can remove the class clutter from our markup, while simultaneously removing the CSS clutter from our stylesheets. In our markup, we replace the multiple classes with a single identifier for each element. And in our Sass stylesheets, we simply use a single line of Sass to layout each element in a media query. (Sass uses the same syntax as CSS, so it’s super easy to learn.)

Then we just let Sass be Sass; let it figure out all the complicated math and CSS properties. CSS preprocessors automatically transform our simplified stylesheets into the verbose, raw CSS needed by all browsers.

But simplification of our stylesheets does much more than just make our files look cleaner. By removing the clutter of complicated CSS from our minds, we lower our “cognitive load”, freeing our minds to try out amazing layouts. That is the best reason to use Sass for responsive layouts. And why you should try Zen Grids.

Be playful! Be awesome! Use a CSS preprocessor. Try Sass and Zen Grids.

Using Zen Grids is easy!

Let’s try a simple example. We’ll create a complete layout in less than 10 lines of code. In this minimal design, the first row is a content column with a sidebar on each side. And the second row is 2 footer columns. All aligned to a 7 column grid.

First, here’s the example HTML. Zen Grids doesn’t require any special classes or markup. We could have used any markup we wanted.

<div class="container">
  <article class="content">
    Tha main content. We like semantic HTML ordering.
  </article>
  <aside class="aside1">
    An aside.
  </aside>
  <aside class="aside2">
    Another aside.
  </aside>
  <footer class="footer1">
    A footer.
  </footer>
  <footer class="footer2">
    Another footer.
  </footer>
</div>

And here’s the complete Sass code:



@import "zen-grids";// Import Zen Grids with this statement.


$zen-columns: 7; // Set the number of columns in the grid.
$zen-gutters: 10px; // Set the gutter size. A half-gutter is used on each side of each column.



.container {
 @include zen-grid-container(); // Apply this mixin to the container.
}

.aside1 {
 @include zen-grid-item(2, 1); // Apply this mixin for each grid item in the container.
}





.content {
 @include zen-grid-item(4, 3); // Make this grid item span 4 columns… // …and position it in the 3rd column.
}

.aside2 {
 @include zen-grid-item(1, 7);
}

.footer1 {
 @include zen-new-row(); // Apply this mixin to start a new row.
 @include zen-grid-item(3, 5);
}
.footer2 {
 @include zen-grid-item(4, 1);
}

That’s it! 1 import statement, 2 variables, and 3 mixins. You’re done. And, here’s the results:

.content Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor…
.footer1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor…
.footer2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor…

Congratulations, you’ve just learned all the basics of Zen Grids!