ZURB Foundation

In the past week, I explored Foundation, the “most advanced responsive front-end framework in the world” – a bold statement.

Foundation 6

Foundation 6

What is a responsive front-end framework?

A responsive website displays its content on any device size in a meaningful way. Imagine a horizontal navigation menu, which is perfect on a large screen. That same menu would look totally crammed on a mobile phone screen. Therefore the site switches to a compact version of the same menu, e.g. with a button that extends. The same principle goes for textual content, which can be multi-column on large screens and single-column on small screens.

In the end, front-end frameworks provide a number of building blocks that define the look and feel of a website. There is a big number of such frameworks, Bootstrap is surely the most popular one, but there are various top-x lists (e.g. Top 10 Front-end Development Frameworks). The choice of a framework is therefore not an easy one.

I focussed on Foundation, with a short look on Bootstrap on the last day. Both frameworks are sophisticated frameworks with a large community behind. They offer responsive grid classes.

Grid system

One of the most common tasks is to define the responsive behaviour by means of grid columns. A grid row contains 12 columns, each grid element can spread over a number of those 12 columns. And with adding prefixes for small, medium or large screens, the responsive behaviour is already defined.

Foundation

<div class="row">
  <div class="small-2 large-4 columns"><!-- ... --></div>
  <div class="small-4 large-4 columns"><!-- ... --></div>
  <div class="small-6 large-4 columns"><!-- ... --></div>
</div>
<div class="row">
  <div class="large-3 columns"><!-- ... --></div>
  <div class="large-6 columns"><!-- ... --></div>
  <div class="large-3 columns"><!-- ... --></div>
</div>

Bootstrap

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Although the functionality is very much the same, the Foundation syntax is easier to read and understand than the Bootstrap syntax.

The Foundation grid also offers more features, namely the block grid. Imagine you need five evenly-spaced columns. That is impossible to achieve with the standard 12-column grid. But using the block grid, this task is quite easy to achieve. In the new version 6, Foundation has introduced the flex grid, using flexbox capabilities, which make some alignment scenarios much easier to achieve. Just consider the nightmare of vertical alignment of horizontally aligned items.

Foundation offers quite some menu versions. The responsive navigation pattern is the most advanced one, but I found it a little difficult to adapt to the needs of the prototype. Just take a look at the markup.

<ul class="vertical menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
  <li class="has-submenu">
    <a href="#">Item 1</a>
    <ul class="vertical submenu menu" data-submenu id="m2">
      <li class="has-submenu">
        <a href="#">Item 1A</a>
        <ul class="vertical submenu menu" data-submenu id="m3">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a></li>
          <li><a href="#">Item 1D</a></li>
          <li><a href="#">Item 1E</a></li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 2</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
  <li class="has-submenu">
    <a href="#">Item 3</a>
    <ul class="vertical submenu menu" data-submenu>
      <li><a href="#">Item 3A</a></li>
      <li><a href="#">Item 3B</a></li>
    </ul>
  </li>
</ul>

So I used just basic visibility classes to quickly solve the challenge of the prototype.

Forms

The form implementation went quite smoothly, as Foundation provides minimal styling for the normal Conclusion

I enjoyed working with Foundation a lot. It seems to be a well-elaborated, feature-rich and customizable framework. It is surely a matter of personal taste, but I liked it more than Bootstrap.