CSS frameworks are great for setting up responsive grids, but often require extra markup, usually in the form of presentational class, that makes source code hard to decipher. Using nothing but div elements make code more confusing — which </div> belongs to an open <div>? And isn't "product-list" easier to figure out than "large-block-grid-3" ?

Semantic HTML uses markup to describe content, making information cleaner and HTML more meaningful. Elements like <article> and <aside> indicate to browsers, screen readers and search engines what content about. Here's how to create your own semantic grid based on Foundation.

From classitis to clarity

Classitis and its cousin, divitis, are swear words we use to curse bloated code. In the early days, we used tables for layout. Each table had at least three levels: <table>, <tr> and <td>. The promise of <div> and a little CSS was a liberation from excessive tags. But as layouts became more sophisticated, we found ourselves using <div> elements almost as often as the tables they replaced.

Not that each <div> didn't serve a purpose. They were necessary to establish complex layouts. A typical Foundation markup is chock full of information that describes its grid:

<div class="row" id="header">
 <div class="small-12 columns">
   …
 </div>
</div>
<div class="row" id="nav">
 <div class="small-12 columns">
   …
 </div>
</div>
<div class="row" id="content">
 <div class="small-6 medium-4 columns">
   <h1>…</h1>
   <p>…</p>
   <p>…</p>
   <p>…</p>
 </div>
 <div class="small-6 medium-8 columns">
   …
 </div>
</div>
<div class="row" id="footer">
 <div class="small-12 columns">
   …
 </div>
</div>

Functional? Yes. Meaningful? Not really. Except for a few ID attributes, every section here is generic, and attributes make the code hard to read. Divs are generic containers used to organize other elements. When we say generic, we mean meaningless. Bland. Flavorless.

Now let's make this semantic

Here's the same HTML with semantic markup, including the new HTML5 elements:

<header>
  <div role="banner">…</div>
  <nav>…</nav>
…</header>
…<main>
  <article>
    <h1>…</h1>
    <p>…</p>
    <p>…</p>
    <p>…</p>
  </article>
  <aside>…</aside>
…</main>
…<footer>…</footer>…

It's easier to read for humans and browsers alike. Sometimes there isn't an appropriate HTML element for the type of information we want — in this case, a logo. But whenever possible we use elements that describe their unique contents:

• Header: A group of introductory or navigational aids.
• Nav: A collection of links.
• Main: The primary content on a page.
• Article: A self-contained composition in a document, app, or site and that is intended to be independently distributable or reusable, e.g. in syndication.
• Aside: Information related to other information on the page, but is not required and can stand on its own.
• Footer: A conclusion to the element that contains it.

Notice that we haven't completely eliminated classes.

Making it work in Sass

The Sass code to turn a Foundation grid into semantic markup is based on two functions:

• grid-row() — gives an element the properties of a Foundation row.
• grid-column() — adds column information, like everything in "small-12 columns".

1. We start by importing the _settings file and Foundation itself.

@import "settings";

@import "foundation";

2. Next we define a selector — say, <header>.

header { }

3. Adding "grid-row" to this selector gives it all the properties of a Foundation row.

header { @include grid-row; }

4. Finally we give selectors within header the properties of a column.

header {
  @include grid-row;
  .logo {
    @include grid-column($columns:12, $center:true);
  }
}

The entire semantic example would be coded like:

header {
  @include grid-row;
  .logo {
    @include grid-column($columns:12, $center:true);
  }
}

main {
  @include grid-row;
  aside {
    @include grid-column(6);
  }
  article {
    @include grid-column(6);
  }
}

Semantic code makes your HTML leaner and more meaningful. Sass is a great tool to make that happen, and Foundation's Sass mixins help you integrate a grid with minimal fuss. The result is code that's easier to read and debug, which more accurately describes what you're trying to communicate.

---