At the Forge

I was recently speaking with a new client about a consulting project, and we were discussing the technologies we were going to use. I said, “So, I assume that we'll be using Twitter Bootstrap as a CSS framework, right?” Bootstrap, of course, is the open-source CSS framework written in the LESS language that recently released its third version, which has become wildly popular among Web developers. I've used Bootstrap on a number of projects in the past few years, and I've been pleasantly surprised to discover just how easily I could implement layouts, menus and sidebars, as well as produce nice-looking tables and buttons.

I was surprised when the client said, “No, we're actually using Zurb Foundation.” Now, I had heard of Foundation before. Zurb is a Web design company based in California, whose Foundation framework preceded and inspired Bootstrap in many ways. But it really hadn't registered much on my radar, and I hadn't paid much attention to it. It turns out that I should have been paying attention. Zurb is a worthy competitor to Bootstrap, and it has some advantages that make it more appropriate in some cases.

So in this article, I take a look at Zurb Foundation, considering it both as a standalone CSS framework and as something you can use from within an application framework, such as Ruby on Rails. Zurb recently released version 4 of the Foundation framework, and although it is not as popular as Bootstrap, the people who are using it seem to be quite passionate about its advantages.

If you aren't yet familiar with CSS frameworks, the idea is pretty straightforward. When you want to lay out a Web application, you likely will want some headlines, some text, some sidebars, a menu and all sorts of other design elements. You could design the entirety of the layout, classes and CSS from scratch each time. Or, you could use predefined styles, designed to work with all sites, with a great deal of flexibility.

Each modern CSS framework functions in this same way. You put text into divs and give each div a class indicating how many columns across it should be, up to the maximum number of columns defined by the framework. Foundation offers 12 columns, meaning that you can lay out your design in one very wide column, two equally sized columns (6+6) or even something wilder, such as 3+4+5.

Foundation, like other modern frameworks, goes way beyond just providing you with a nice grid. It also gives you control over navigation elements and forms, and even gives you some JavaScript-based elements for displaying images and dialog boxes.

The bulk of Foundation is implemented using SCSS, a modern implementation of SASS. SCSS is a superset of CSS that can be compiled (using an open-source tool) into regular CSS files. However, you don't need to know SCSS in order to use Foundation.

How can you use Zurb Foundation? Download the package. You have several options, but the easiest one is to use the precompiled CSS files. Go to the Zurb Foundation download site at foundation.zurb.com/download.php, and from there, click on the button for “download Foundation CSS”.

If you want to change the defaults, you could download the SCSS version and do it that way. Alternatively, the good people at Zurb have provided a Web-based selection system, such that you can indicate what parts of Foundation you want, as well as which colors and styles. The CSS that you download then will be precompiled, customized according to your needs.

If you download the simple CSS version and open the resulting zipfile, a sample HTML page (index.html) will be at the top level of the folders. There also will be several subfolders, whose names are fairly self-explanatory: js (JavaScript), css (stylesheets) and img (images).

Looking at the HTML page, you can see that Foundation is loaded in five steps:

1) First, you load the core Foundation CSS file:

<link rel="stylesheet" href="css/foundation.css">

Now, this is definitely a long and complex CSS file. However, remember that this defines all of the styles, for all of the aspects of Foundation. Moreover, this is the result of translating the SCSS source into CSS; expressed as SCSS, the file is much shorter and easier to understand.

2) After loading the Foundation CSS file, you then load Modernizr. I've covered Modernizr in this column before; it allows you to test for certain HTML5 features and use alternatives if the feature doesn't exist. You can use Modernizr in your application if you wish, but it's loaded here so that Foundation can handle different browser versions.

3) Next, you load the JavaScript for Foundation. But here, things get a bit more interesting. Rather than a <script> tag that loads a JavaScript library, Foundation allows you to use either jQuery or Zepto, a lightweight library that copies many of jQuery's most popular features. Foundation tests, at runtime, whether the __proto__ property is defined on an empty object ({}). If so, it loads Zepto. If not, it loads jQuery. This is where copying the code that comes with Foundation is probably the best choice; just make sure that when you deploy your application, you have both Zepto and jQuery available.

4) Load the Foundation JavaScript file itself, which gives you the capabilities you wanted.

5) Activate Foundation, using the formula by invoking the “foundation” function on the document object. This syntax works with both jQuery and Zepto:

$(document).foundation();

Note that although steps 1 and 2 take place in the <head> section of the HTML file, the remaining steps (which involve JavaScript) are placed at the bottom of the page, just before the closing </body> tag. This is a common technique for speeding up JavaScript execution, and it ensures that the browser parses and displays the page before loading and executing external JavaScript files.

A minimal file that uses Zurb Foundation (with a “Hello world” headline and paragraph in the body) is shown in Listing 1.

If you look at the file in Listing 1 in your browser, you might well be disappointed by how it looks. The text is too close to the edge of the page, and it doesn't have any of the pizazz that you would have expected from a framework. Well, there's a simple reason for this. It hasn't used any of the styles that Foundation provides.

So, let's begin by putting the text inside a <div> with a class of “row”. That shouldn't come as a surprise to anyone who has used Bootstrap or other CSS frameworks; they often work this way, and also use a “row” class to indicate that you're now enclosing one horizontal band of text. The <body> (without the Foundation-specific JavaScript), thus, will look like this:

<div class="row">
    <h1>Hello, world headline</h1>
    <p>Hello, world paragraph</p>
</div>

If you reload your browser, you'll see that the text has moved closer to the center of the page. That's because using the “row” class has defined margins, as well as allowed your content to be more centered and more responsive. While you're at it, make your window smaller. At a certain point, the text will make itself smaller, changing (on my computer, at least) from 2.75em to 2.15em. The idea, of course, is that people with smaller browser windows still should be able to see as much text as possible, and that the text should adjust itself proportionally.

Of course, your sites generally will include more text than just “Hello, world.” I'll add some dummy text inside the paragraph, so that it takes up a few lines. But this time, I don't want the text to extend all the way to the right side. Rather, I want it to take up only half the screen.

Foundation makes that easy to do. Create a new <div> tag, and give it two classes. First, give it one that represents the number of columns (out of 12) that you want your text to use. So to extend all the way across, you would say large-12. To extend halfway across, you would say large-6, and to extend one quarter of the way across, you would use large-3. (If columns within a row don't add up to 12, you can get some funny-looking results.) Second, you add the “columns” class, allowing Foundation to display your site using appropriate columns. Given these, the text looks like this:

<div class="row">
  <div class="large-6 columns">
    <h1>Hello, world headline</h1>
    <p>Hello, world paragraph. And even more hello, world. And
    even even more more hello, world. And so on, and so forth. 
    And again. And even more hello, world. And even even more
    hello, world. And so on, and so forth.</p>
  </div>
</div>

If you want two side-by-side columns, you easily can do that:

<div class="row">
  <div class="large-6 columns">
    <h1>Hello, world headline</h1>
    <p>Hello, world paragraph. And even more hello, world. 
    And even even more more hello, world. And so on, and 
    so forth. And again. And even more hello, world. And 
    even even more more hello, world. And so on, 
    and so forth.</p>
  </div>
  <div class="large-6 columns">
    <h1>Hello, world headline</h1>
    <p>Hello, world paragraph. And even more hello, world.  
    And even even more more hello, world. And so on, and 
    so forth. And again. And even more hello, world. And 
    even even more more hello, world. And so on, 
    and so forth.</p>
  </div>
</div>

And, if you want both paragraphs of text under the same headline, you can do that as well:

<div class="row">
  <h1>Hello, world from a long headline</h1>
  <div class="large-6 columns">
    <p>Hello, world paragraph. And even more hello, world.  
    And even even more more hello, world. And so on, and 
    so forth. And again. And even more hello, world. And 
    even even more more hello, world. And so on, and 
    so forth.</p>
  </div>
  <div class="large-6 columns">
    <p>Hello, world paragraph. And even more hello, world.  
    And even even more more hello, world. And so on, and 
    so forth. And again. And even more hello, world. And 
    even even more more hello, world. And so on, and 
    so forth.</p>
  </div>
</div>

Now, could you have accomplished this on your own? Of course. But everyone who ever has worked with CSS knows it can be difficult to get this right. Moreover, what happens when someone wants to browse this site with a smartphone or a small browser window? Zurb Foundation is responsive, meaning that it adjusts automatically. This means that although you might have defined your paragraphs to be side by side, Foundation is smart enough to stack them vertically if the browser window is too narrow. You can see this for yourself by changing the width of your browser window with this page.

It gets even better. Perhaps you want narrow browser windows, such as those used on cell phones, to continue displaying the columns side by side. This is where Foundation's “dual grid” layout system shines. Just as you can use large-* classes for large browser windows, you can use small-* classes for small windows. Foundation automatically will apply the appropriate class, making it responsive in multiple ways. This means that each div will look like this:

<div class="large-6 small-3 columns">

Foundation also provides a number of button styles. You can use these in forms or by themselves for actions that you'll then hook up with JavaScript callbacks. A simple button can be given the “button” class:

<input class="button" value="Press me" />

You can use classes to change the button's size (tiny, small, medium or large), color (secondary, alert or success) or even rounded corners (with a “round” class). The documentation indicated that “radius” should work as well as round, but it didn't operate correctly within my Chrome browser window. You can combine these classes, such as in:

<input class="button success large round" value="Press me" />

Buttons in Foundation handle hovering nicely as well, such that moving the mouse cursor over a button dims it, and clicking on it also gives visual feedback. Again, these are things you could do on your own, but why bother, when Foundation already has defined it?

Most sites on which I work need to have a top navigation bar. Foundation handles this easily as well. For example, let's say you want to have a title on the top navigation bar, and then links to pages 2, 3 and 4 of your site.

Doing this is a bit trickier than what you've seen so far, in that it requires some additional elements. Because I'm using HTML5 for this example, let's take advantage of two special elements defined there, <nav> and <section>, which Foundation expects.

The top-level navigation bar is defined in a <nav> element with a class of “nav-bar”. Within that, you start a <ul> element, normally used for bulleted lists, with a class of “title-area”. Now the magic begins. If you create an <li> element with classes of “name” and “active”, the navbar now will have a title. It's typical to put that name in an h1 tag, and then to put the enclosed text inside a link, so that people can navigate to your organization's home page:

<nav class="top-bar">
  <ul class="title-area">
    <li class="name active"><h1><a href="#">Test site</a></h1></li>
  </ul>
</nav>

You then can have one or more menu items, with the items flush left (with the title) or right (with the right side of the browser). Here, I've chosen to align it to the right. My menu items all go within a <section> tag, with the class of “top-bar-section”, and then an inner <ul>, with a class of “right” (indicating the alignment I want) and containing the menu items on the right side. The result looks like this:

<nav class="top-bar">
  <ul class="title-area">
    <li class="name"><h1><a href="#">Test site</a></h1></li>
    <section class="top-bar-section">
      <ul class="right">
        <li class="active"><a href="2.html">Page2</a></li>
        <li class="active"><a href="3.html">Page3</a></li>
        <li class="active"><a href="4.html">Page4</a></li>
      </ul>
    </section>
  </ul>
</nav>

You can get even fancier if you want. Put the entire <nav> element inside a <div> whose class is “fixed”, and the navigation bar will stay at the top of the screen.

Finally, your navigation bar may include drop-down menus. If, for example, you want the “page4” link to be a menu, add the “has-dropdown” class to the <li> tag. Then, within the <li>, add a new <ul> with a class of “dropdown”. The inner <li> elements then will be treated as menu items. For example:

<li class="has-dropdown"><a href="4.html">Page4</a>
  <ul class="dropdown">
    <li><a href="4.html">Page4a</a></li>
    <li><a href="4.html">Page4b</a></li>
    <li><a href="4.html">Page4c</a></li>
  </ul>
</li>

Not only will the above function as a nice top-level menu, but the Foundation CSS definitions also will place a down-arrow hint next to the “Page4” label, showing the user that this is a menu, rather than an individual menu option.

It's easy to see why Zurb Foundation has become popular. It offers many of the positional and navigational advantages of other CSS frameworks, allows easy customization with SCSS (although I didn't demonstrate that in this column), and perhaps best of all, it allows you to design your site simultaneously for large and small screens. If you're designing an application that needs to work on mobile devices, I definitely would consider Zurb Foundation.