One of the most common requests we get is how to get started with Foundation. We mean, actually start writing code. Where do you begin? The short answer is "with a sketch," but for some, delving into code itself can be daunting.

This lesson will teach you to create a blog post template with built-in includes and a dash of custom Sass. Here's what we'll build:

If you're unfamiliar with the Foundation grid, or want a quick review with a few official ZURB tips, check out this lesson.

With all that in mind, let's build our blog post layout.

1. Create the content.

We've provided a sample download of semantic markup for the post, but suffice to say you'll need an article and information for a sidebar.

Why semantic? Because we want our blog post to be portable. If the HTML changes, we want to change the CSS as little as possible.

2. Create the layout.

Once you have the sample post assembled, it's time to give it some shape. That means rows. Three of them, in fact: A header, a content area and a footer, in that order.

<div>
  <div class="small-12 columns">…</div>
</div>
<div>
  <div class="small-12 columns">…</div>
</div>
<div>
  <div class="small-12 columns">…</div>
</div>

We use small-12 because, without extra instructions, that will extend full-width on small, medium and large screens. The result:

Handy tip: Rows have a fixed width you can make fluid in most browsers with .row { max-width:100%; }.

But fixed or fluid, next we divide the center part into article and sidebar sections:

<div>
  <div class="small-12 columns">…</div>
</div>
<div>
  <div class="small-12 columns">
    <div>
      <div class="medium-6 large-9 columns">…</div>
      <div class="medium-6 large-3 columns">…</div>
    </div>
  </div>
</div>
<div>
  <div class="small-12 columns">…</div>
</div>

The result on large screens:

By specifying large-3 and large-9, we guarantee that the content columns will stretch across the screen on small screens. Medium-sized screens, however, will get divided into halves: medium-6 and medium-6.

Finally, we divide the article area into a main section and a sidebar:

 

<div>
  <div class="small-12 columns">…</div>
</div>
<div>
  <div class="small-12 columns">
    <div>
      <div class="medium-6 large-9 columns">
        <div>
          <div class="medium-7 columns">…</div>
          <div class="medium-4 columns">…</div>
        </div>
      </div>
      <div class="medium-6 large-3 columns">…</div>
    </div>
  </div>
</div>
<div>
  <div class="small-12 columns">…</div>
</div>

Sharp-eyed readers will notice a math problem. 7 + 4 is not 12. That's fine because Foundation will push the last column to the far right. We take advantage of that to give the blocks a little breathing room.

Together, this gives us the layout. But what a mess. Next we'll turn clutter into coherent code with a little Sass.

Going semantic

Sass lets us imbue any element with row and columns — that is, anything can become part of the grid without all those class="small-# medium-# large-#" attributes. For example:

HTML

<header>…</header>
<div>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <aside> … </aside>
</div>
<footer>…</footer>

Better. Much better. We can tell what everything is at a glance, and without a bunch of attributes the code is simpler overall. Here's how the outer layout works:

app.scss

.container,
body > header,
body > footer,
main {
  @include grid-row();
}
main > article {
  @include grid-column(7);
}
main > aside {
  @include grid-column(4);
}

In English:

"Turn the 'container,' the body's header and footer, and 'main' into rows. Make one 'article' and one 'secondary' (aside) box into columns. But don't make me have to say they're columns, rows and such in HTML."

That's what @include statements do. They imbue elements of your choice with the superpowers of rows and columns, among others. @Include is a radioactive spider to Peter Parker. Good thing he didn't @include a radioactive snail or something. I doubt Slug-Man would have sold as well.

Using @include grid-column() in Sass is pretty handy. It's so handy that Foundation has more than 40 things you can include. Get a list of Foundation 5's mixins or check out the docs for details.

4. Make it mobile-friendly.

You can use media queries — built into Foundation's _settings.scss file — to control when these includes take effect.

main {
@media #{$medium-up}{
  @include grid-column(9);
}
@include grid-column(12);
}

In English:

"For medium-sized screens and larger, make the 'main' element nine columns wide. Otherwise, which means mobile browsers, make it 12."

You can do the same for large screens: @media #{$large-up}{ … } and so on. Look at line 151 – 183 in _settings.scss for a complete list of what media queries you can create with only a few lines of Sass.

---