Foundation is great. I love it, I use it whenever I am building anything big. My favorite feature and the one key thing that has kept me as a fan for so long has been it's grid. I feel like it's the best grid we have available so far.

My favorite thing about that grid you ask? Apart from just being plainly awesome? Well, it's the semantic option. I know you probably haven't put much thought into it but, don't you feel like grid classes tend to clutter the html? I do, and I hate it. Enter the mixins!

The Mixins

To alleviate this issue, Foundation gives us a set of really handy mixins which allow you to build a really semantic grid. It's as flexible as it can be and just as easy to use (I'd argue that if you're familiar with sass, it's just plainly easier and requires less typing).

To demonstrate, I'll be showing you how to build this:

As you can see, it's a very simple layout. It'd be really easy to build it using the grid classes, it's even easier to build it using the mixins. Here's my markup:

<article>
  <header>
    <h1>Hello World</h1>
  </header>

  <div>
      <img src="http://lorempixel.com/300/400/">
  </div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, voluptatibus, deserunt, facilis iusto sapiente impedit praesentium laudantium minus voluptas numquam incidunt corrupti sequi laboriosam magnam officia perspiciatis quas quam quaerat!
  </p>
</article>

As you can see it's pretty standard except the elements lack classes and such. Much prettier than usual in my opinion.

Here's my CSS:

@import "foundation/components/global";
@import "foundation/components/grid";

$total-columns: 5;
article {
  @include grid-row;

  header {
    @include grid-row;

    h1 {
      @include grid-column(5);
    }
  }

  div {
    @include grid-column(2);
  }

  p {
    @include grid-column(3);
  }
}

Awesome, right? Here I am the grid-column and grid-row mixins to create the grid directly in my CSS. All you have to do is import the mixins. There are also many options to customize the grid, in this case I changed the number of columns from the default 12, to 5. I am also nesting rows, all from the CSS, leaving the HTML to describe it's thing.

Side note:

I hadn't notice that in this case you're putting a row directly inside another row, this isn't ideal as it can cause alignment issues. Ideally you'd have the header inside full width column to prevent this. I don't think it matters in this example but in anything more complex it might be a pain to debug.

Thanks to @smiley for the heads up!

Conclusion

I feel like this technique is a great way to simplify the HTML and further decouple it from it's CSS. They've been several similar things before such as the Semantic Grid which experimented with this idea. Foundation has a much more powerful grid so, it being able to work this way as well makes me really happy.

Have a comment? Feel free to email me.
Did you enjoy this post? Buy me a coffee ☕️.