Lately Semantic UI has been the buzz around HN and the like and there is good reason.

The UI elements look fantastic and they provide a new style “semantic” markup that make things like 3 column grids more readable in HTML. I am a big fan of more readable code, so lets take a look at how to accomplish the same thing using Zurb Foundation 4 Sass Mixins.

First lets take a look at the example for Semantic UI:

<div class="ui three column grid">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
</div>

What I think is really great about this syntax is it is very readable. It is very clear that what I have is a 3 column layout and that each column of content is clearly delineated. It is very easy to recreate this functionality with Sass in F4.

$medium-up: "only screen and (max-width:"#{$small-screen}")";
@media #{$small} { 
  .three-column-grid { @include grid-row(); }
  .three-column-grid .column { @include grid-column(4); }
}
@media #{$medium-up} {
  .three-column-grid { @include grid-row(); }
  .three-column-grid .column { @include grid-column(12); }
}

Working with Media Queries in Foundation can be confusing at times. What I do is just remember it is the opposite of what I think. In this case I created a new Sass variable named $medium-up to match the visibility presentational classes in Foundation. Then, the first media query, named $small is the Large or Desktop Grid. This is similar to classes such as .large-4 .columns which is what we are emulating. Likewise the $medium-up is for the small or mobile grid.

<div class="three-column-grid">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
</div>

Here you can see how close we are getting to the original concept. Where Semantic UI is a framework and uses multiple classes to accomplish the same thing, we are using just one. This will keep us from polluting our CSS class names and avoid any potential overlap with Foundation. Foundation uses the .columns class so it is safe to use .column, although you might want to change it to prevent confusion in the future.

@media only screen and (min-width: 768px) {
  .three-column-grid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 62.5em;
    *zoom: 1;
  }
  .three-column-grid:before, .three-column-grid:after {
    content: &quot; &quot;;
    display: table;
  }
  .three-column-grid:after {
    clear: both;
  }
  .three-column-grid .column {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    width: 33.33333%;
    float: left;
  }
}
@media only screen and (max-width: 768px) {
  .three-column-grid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 62.5em;
    *zoom: 1;
  }
  .three-column-grid:before, .three-column-grid:after {
    content: &quot; &quot;;
    display: table;
  }
  .three-column-grid:after {
    clear: both;
  }
  .three-column-grid .column {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    width: 100%;
    float: left;
  }
} 

If we take a look at our generated CSS you will see this is where Foundation really shines. We can override the generation of presentational classes at this point on line 88 of our _settings.scss file, by changing it to $include-html-classes: false; Of course you should only do this if you are not using any other presentational classes in other parts of your page, but the advantage should be clear. Our generated CSS file is dramatically smaller and we have removed a lot of the bloat. You can also selectively remove parts of the generated presentational classes with the settings that follow line 88.

In our example below, with nested panels to show the functionality, you can see we get a nice 3 column layout with stacking on mobile, much like the default behavior of Foundation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, doloribus, rem, error in tempore quaerat quia explicabo aspernatur hic eligendi est ipsum quo nemo nulla!

Dolorem, perspiciatis minima necessitatibus illo tempora ea dolor debitis ab vitae nihil consequatur nulla sunt error non quibusdam architecto laboriosam aspernatur modi ex libero earum.

Vitae, reiciendis, tempora voluptates accusamus numquam eum dolorem minima recusandae ratione suscipit. Porro, laboriosam, enim adipisci soluta repellat alias ab consequuntur corporis repudiandae magnam. Pariatur!

Lets take this one step further and create a four column layout, another common design pattern in web design. Lets make one change however, we will make it so it displays 2-up on mobile. This is really easy to implement in Sass.

 $medium-up: "only screen and (max-width:"#{$small-screen}")";
@media #{$small} { 
  .three-column-grid { @include grid-row(); }
  .three-column-grid .column { @include grid-column(4); }
  .four-column-grid { @include grid-row(); }
  .four-column-grid .column { @include grid-column(3); }
}
@media #{$medium-up} {
  .three-column-grid { @include grid-row(); }
  .three-column-grid .column { @include grid-column(12); }
  .four-column-grid { @include grid-row(); }
  .four-column-grid .column { @include grid-column(6); }
} 

The only difference here is that we changed our @include grid-column() to 3 from 4 for our Desktop/Large Grid and to 6 from 12 for our Mobile/Small Grid. This is pretty simple math. Just take your total columns 12 and divide by the number of desired columns. 12 / 3 = 4 so 4 columns wide for three columns and 12 / 4 = 3 which leaves 3 columns wide for the four column layout. Pretty smart that Zurb gave us a 12 columns wide grid by default.

<div class="three-column-grid">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
</div>
<div class="four-column-grid">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

With our layouts complete we can now use these anywhere on our site or app and get a nice readable CSS class name such as three-column-grid or four-column-grid. Semantic UI is super cool and definitely worth a look at but you don’t have to envy its semantic grid classes. Just roll your own with Zurb Foundation 4 and Sass.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam, magnam, illo rem quam totam sequi pariatur illum numquam ipsa sit cupiditate consectetur omnis explicabo.

Ratione, excepturi, tenetur, vitae porro mollitia rerum sunt reprehenderit non quam veniam laborum molestiae sint nam aut optio quasi saepe ad minima exercitationem ducimus quibusdam.

At, nostrum, velit, exercitationem voluptates omnis dolor illum totam praesentium corrupti culpa sequi suscipit neque nihil id nesciunt doloribus eveniet tenetur quia est debitis rerum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, nam, omnis, ipsa impedit quod aliquam perspiciatis ea vel ad aut minima saepe eaque porro esse.

Accusantium, cum, culpa, sed sequi obcaecati mollitia velit ex possimus magni quam fuga amet laudantium quos delectus aliquid dolorem aperiam assumenda asperiores autem reprehenderit temporibus.

Aspernatur, magni, excepturi, id, aliquam suscipit quibusdam a ad adipisci nobis perferendis aperiam consequatur cumque. Consequuntur sit itaque quaerat eum ducimus amet magni sequi expedita.

Recusandae, voluptatibus, ipsa nemo esse facilis veritatis hic aperiam culpa incidunt nisi quas nobis sit corporis quos enim id in delectus sequi doloremque dolorum eum.

If you have any questions about this post or have ideas for future Foundation Quicktips, let me know in the comments. Don’t be afraid to reach out. I try and respond to every comment individually.