The ultimate guide to getting started with Foundation

Foundation is one of the two big-name HTML/CSS/JS frameworks for front-end developers. That didn’t happen by accident. Today, we’re here to tell you all about why you should be using it.

Now first, for those who maybe write their own HTML, but have never worked with a framework before, here’s an explanation:

Frameworks are basically big bunches of pre-written code to help you get started on your projects faster. In the case of front-end code like HTML and CSS, this means you’ll find stuff like layout grids, basic button styles, and commonly used interface elements. Larger frameworks may also include jQuery plugins.

They are not intended to be used like complete website templates or themes, but as a set of building blocks. You take what you need, modify it to suit the project, and generally get on with your work (and your life, presumably). They are meant to be customized, and tinkered with.

This can initially be a daunting task, as frameworks like Foundation and its main rival, Bootstrap, have gotten huge. They each contain thousands of lines of CSS. Before you make a commitment to use any framework for any project, you need to evaluate its potential benefits against the time cost.

That said, once you get used to a framework, it can reduce the time you spend writing markup and CSS considerably.

Some history

Foundation began its life as nothing more than a general style guide and some common code. The guys at ZURB decided to speed up their prototyping process by taking some HTML and styles that they tended to re-use, and make a framework out of it. That’s it. That’s really how most good things get made. Someone needed it, so they made it.

Over time, they decided that what they had made was too good to keep to themselves, so they released version 2.0.0 to the world. They made everything responsive, polished it up, and open sourced it for us all. Now designers and developers the world over are using ZURB’s code to make their products faster and, perhaps, dare I say it, better.

Since its release on October 18th, 2011, the MIT-licensed framework has become one of the “big two”, and seen use on thousands of websites.

Its popularity speaks to its utility and versatility alike. If you decide that Foundation is right for you, it won’t let you down.

Features

Foundation has been under active development for nearly three years now. It is no surprise, then, that the feature list is extensive.

At its core, the framework is comprised of CSS files (generated from SASS files, also available for download), and several jQuery plugins. There is no HTML included in the main download (except a very basic demo page, you get to write that all by yourself.

That said, there is detailed documentation about each and every component. Each section of the documentation comes with example HTML for you to use and customize as needed. If you want to dive right in, check out the documentation.

If you want to customize the framework from the ground up, there are two things you can do:

Option 1

You can choose to download only the components that you want right on the main download page. If all you want is the grid, the navigation CSS, and a jQuery plugin or two, that’s easy enough. Just un-check all the things you don’t want to include, and go!

This “framework generator” also includes options for customizing the grid, your main colors, and a few other options. This is the option I’d choose for, say, prototyping or developing an internal company application. The default presentational styles are mostly good enough for these things, so why go and change them when you don’t have to?

Option 2

Now this is for the people who’ll use the framework for public projects. You won’t want to use the default presentational styles, as, in all likelihood, they won’t match your branding. For in-depth customization, you have to go to the source.

And by the source, I mean the Sass files. With those, you can go in and customize every variable to your liking, making the framework truly yours.

(A note on Sass files: Again, for those who may not be familiar with the term, Sass is a CSS preprocessor, that introduces things like variables, mixins, and other programming features to regular CSS.

Do a Google search for something like “Sass compiler for [your operating system here]”, and you’ll find what you need. Personally, I cannot recommend the cross-platform Koala App enough.)

Once your Sass files are compiled into one regular CSS file, just link to it in your section like you would any other CSS file. The Koala app, for instance, will compile the Sass files automatically every time you save them, so your browser will always see the latest changes.

Structure

The grid

I can’t say for certain that all HTML frameworks come with a grid system for layout, but most do. Foundation’s grid, without any customization, is a classic twelve-column, nestable, and responsive.

The markup and classes are simple, including classes for customizing the layout by screen-size. If you’ve worked with grid systems before, like the 960 Grid System, you won’t find Foundation’s grid difficult to master.

Note: It’s coded for a mobile-first approach, so you’ll want to keep that in mind as you layout your site.

The block grid

Think of this as a “mini grid”. It’s designed to keep a set number of items evenly-sized and spaced no matter the screen size.

Example: You have three identically-sized elements that you want to keep side-by-side across every device. To do that, you’d use this block grid example that I shamelessly stole right from the documentation:

Note that if you want, you can specify a different number of columns for different screen sizes. The elements will retain their equal sizing. This component is perfect for things like photo galleries.

Responsive stuff

The media queries are kept simple, but are designed to accommodate a number of screen sizes, ranging from smart-phones to ridiculously huge iMac screens.

Being designed from the ground up to be mobile-first is a great start. Foundation goes a step further by including specific components to help you further refine the responsive parts of your sites.

First, there are the usual classes to hide or show different elements at different viewport sizes. Then, you get slightly more advanced things, like Interchange.

Interchange is a JS library that will dynamically load different content depending on media queries. You can use this library to decide whether to load, for example, a .JPG image of a map, or a Google Maps embed. Or a regular image instead of a retina-screen-sized image.

Using this library, you can save your users some data and some RAM. Just be sure to implement a fall-back for those users with JavaScript disabled.

Navigation

Navigation options are plentiful in foundation, ranging from the all-purpose navigation bar (complete with drop-down menus), to icon bars, breadcrumb navigation, pagination, sidebars, and more.

There are two navigation components, though, that make Foundation stand out from other frameworks.

Magellan

The first is the Magellan Sticky Nav. Put this nav-bar anywhere you like on the page, and once you scroll past its starting location, it’ll follow you down. If you’re using it to link to section within the current page, it can highlight each one (in the bar itself) as you scroll down.

Offcanvas

The second is Offcanvas, which is a vertical navigation bar that is hidden by default. Hit the menu button, and the menu slides onto the page for your browsing pleasure.

Keep in mind that, like all Foundation components, these can be implemented with a minimum amount of markup. The guys at ZURB have put a lot of work into making these fairly advanced user interface elements easy to implement, and it shows.

Media

The media-related components of any framework are often where framework-makers tend to show off a little, and Foundation is no exception.

For example, included by default is the Clearing Lightbox. It’s a dead-simple lightbox image gallery, really. Just throw in some thumbnails, include the relevant classes, and you have a touch-capable image gallery that handles images of variable height with no issues whatsoever.

Another is Flex Video, which can, in theory, be used for just about any embeddable object. Just wrap a div with the flex-video class around your Youtube video, iframe, embed, or object element, and you’re good to go. Those objects will not automatically scale with the size of the browser.

Lastly, there are styles included for image thumbnails. Nothing fancy or special to see here… they’re just nice to have.

But what about Orbit?

People who have used Foundation prior to version 5 might be wondering about ZURB’s Orbit plugin. It’s a carousel, also sometimes called a slideshow, component that is responsive, feature-loaded, and it works pretty well.

However, while it’s still in the framework, it is no longer supported by ZURB, nor is it under active development.

The creators of Foundation themselves recommend looking for alternatives, such as Owl Carousel, or Slick.

Forms

Of course, basic styles for forms have not been forgotten. In fact, they’ve been refined over the years into works of supremely understated beauty. You might think I’m exaggerating, but I don’t think I am. Years of experience have been turned into basic form styles that I believe could be applied to nearly any project, with a minimum of tweaks.

It takes skill to make something as boring as forms look both generic and pretty at once. It’s no wonder that many of the frameworks I’ve tried have imitated Foundation’s style.

That said, it’s not all boring text fields and radio buttons. You know they had to make some stuff of their own.

Take the slider component, for example: You can implement range sliders with HTML5, but they’re boring, and use the default appearance of whatever OS you’re using. Foundation, on the other hand, includes sliders that can be styled with CSS for your customization pleasure.

Also included is a form validation library (more JavaScript here…) which allows you to make sure that your users are inputting the right data. When they input something wrong, for example, an invalid e-mail address, a notification will show up and tell them so.

Buttons

Can’t have a framework without some default button styles. I mean you can, but it just wouldn’t be right, somehow. The default Foundation buttons do not differ too much from any other framework. That is to say, they are implemented with minimal markup, and they have various size and color-specific classes.

You can, however, group them into button groups to sort of throw related actions together. These button groups (the horizontal ones, anyway) are designed to work perfectly with the grid. They’ve also got extra classes for size, color, and rounded corners… all the usual stuff.

Change the markup a little more, and Foundation can also give you dropdown buttons, and those split buttons. You know, mostly button, part dropdown menu?

Those last two components make use of Foundation’s built-in dropdown plugin. This means, among other things, that they are JavaScript dependent. Even so, they are simple to implement. It’s all about the classes.

Typography

Foundation uses a very plain, sans-serif typographical setup to get you started. It’s simple, easy to customize with some basic Sass variables, and it’s all relatively sized. That’s right, Foundation uses rem.

Since Foundation’s creators believe in usability, everything’s big enough to be easily read on small screens. Reading at a moderate distance on regular laptop/desktop screens doesn’t give me any trouble either.

Extra typographical features include:

Inline lists

Want a horizontal text-based list? You know, the kind you might put in a website footer? You’re covered. According to the creators, you should:

Use it when you want more control than spaces between links.

They’re right.   sucks for spatial control.

Labels

These are essentially tiny bits of text with colored backgrounds. What might you use them for? Tags and other meta data, or as their name implies, you might use them to label things, ie. form fields.

Included are regular labels, alert labels, warning labels. It’s just another one of those tiny, useful things that I love about Foundation.

See also: Keystrokes

Callouts & Prompts

Sometimes on a website, and far more often in an application, you need ways to catch a user’s attention. You do this either to present them with necessary information, draw their eyes to an incomplete form field or action, or to teach them how to use an application.

If you’re evil, you might do it to play ads… with sound.

You could do it with a modal window. Foundation has great modal windows with extensive behavioral options, sizing options, event bindings… even an option for removing the background.

Then, there are the alerts. These large, colorful alert boxes are statically positioned, and stretch to the width of their container. You could always make them a fixed position for site-wide alerts, though. Have I mentioned the color, rounded corners, and other presentational classes yet? I’m going to stop, because they do that for a lot of things.

Then we have tooltips. These can be applied to just about any element, and set to only show on large screens, or all screens. (On mobile devices, you’d have to tap the element in question to see the tooltip.) They can also be positioned on any side of the element.

Joyride takes tooltips to the next level. It’s a plugin that leverages tooltips (and other things) to give users a tour of your website or application. Great for first-time users, if the interface is necessarily complex.

Content

The basic HTML/CSS frameworks will give you a way to organize your content on a page, and give it a bit of styling. This is one of the big frameworks, though, which means extra components, even for the content.

First up, we have pricing tables: the ZURB guys know their audience pretty well. A lot of people want easy ways to display pricing information for their various products and services. Foundation gives it to them in a fairly standard format.

Next, the progress bars. I’m not going to elaborate on these. They are exactly what you’d expect.

Foundation also includes the basic accordion plugin, and the expected tabbed content plugin. I think it interesting to note that you can put tabbed content inside an accordion section.

Lastly, this is something I have seen in few other frameworks, and I find it incredibly interesting: an equal-column-height component. They call it the Equalizer, a name only half as badass as its function. It requires JavaScript, of course, but it’s a very simple way of making all of the columns in a given section retain equal height in a responsive fashion.

Just add in a couple of data attributes, and you’re good to go. Here’s what is looks like when combined with the pricing table component:

How to get started

So now you’ve gone through the extensive feature list, and you want them features! Right? Well, if I am indeed correct, then here’s how you get started.

We’re going to create a nice, simple, basic template in Foundation for practice. You can follow along in your own text editor, copy and paste the code, or just download the template I’ve made available because you’re a cheater.

After this section, I’ll be listing a number of other great tutorials and training resources to help on your journey to becoming a Foundation master.

Go download the default package on the download page, and let’s get started.

Include the base files in your project

Now, when you download the package, the file structure inside it will look something like this:

project-folder
 index.html (Demo file.)
 humans.txt (Like a readme file.)
 robots.txt (Just leave this alone.)
 /css
 foundation.css
 foundation.min.css *
 normalize.css *
 /img (Note: Empty)
 /js
 foundation.min.js *
 /foundation
 foundation.abide.js
 foundation.accordion.js
 foundation.alert.js
 (Etc. Huge list here.
 You can keep these files to see/play
 with the source, but you don't actually
 need them to use the framework.)
 /vendor
 fastclick.js
 jquery.cookie.js
 jquery.js *
 modernizr.js
 placeholder.js

You’ll notice that I’ve placed an asterisk after some of these files. These are the only files you actually need to make the framework do its thing. The rest are source files, or nice extra utilities. Those utilities can certainly help you do awesome things, but aren’t strictly necessary.

For example, placeholder.js implements the placeholder attribute of HTML5 forms for browsers that don’t support it.

The files I marked are the only ones that you absolutely need to link to in the section of your web page/application. For the purposes of this tutorial, I’m going to delete most of these files, and keep only those that are essential. I’ll also be starting from scratch with a blank index.html.

To start with, our “home page” will look something like this:

 Foundation Tutorial Demo

You may have noticed an extra CSS file in there. We’ll need that for custom styles.

Create a simple layout

So, since this is a home page, let’s take the concept further. We’ll make it an exceptionally generic landing page for some business or other. No two-column layout for this tutorial! Those are so out of fashion.

Note that I’m skipping including anything like a navigation bar or a call to action in this example. These are totally things that you should do in real projects.

The header

According to the current laws of design trends, we must make a huge header with our company name, a slogan, and a massive background image (not included in this tutorial).

The HTML for this is simple enough:

The row class not only defines the outer limits of our grid, but centers it for us. The header element is there both for semantic reasons and to provide a placer to add a background image later.

We want our header grid column to stretch to one-hundred percent no matter the screen size, so we need only use the small-12 class. Medium and Large sized screens will inherit these styles unless others are specified.

We have our header, and our centered text. This, however doesn’t give us the tall-ish header that we want. For this, we’ll need some custom styles:

/* HEADER STYLES */

header#page-header {
 height: 500px;
 background: #cecece;
}

 header#page-header > div.row {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
 }

As you can see, I’ve given our header a background color in lieu of an actual image, and vertically centered our header content. Pretty neat, huh? Here’s how our page looks so far:

The introduction & services

So you’ve boldly announced yourself with your header. It’s time to tell your user who you are and what you do. A little description about each service or product… that’s how we do it in this modern age.

Let’s get started.

Alright, as you can see, all I’ve done is add some more rows and columns with content. I’ve applied the appropriate classes for making the columns scale to the device they’re being viewed on.

In the #introduction section, I did not just make the central column full-width. Instead, to make sure the introduction paragraph was readable, I made it smaller and gave it the appropriate offset classes for each screen size.

Vertical spacing of content sections is something you have to do for yourself in every framework, so again, I needed some custom CSS:

section#page-content, section#page-content > #services {
 padding-top: 3em;
}

 section#page-content {
 padding-bottom: 3em;
 }

Nothing special there. Since just about everything, including the grid, is spaced with ems, I used them for the padding to keep things visually consistent. Think of em-based element spacing as a built-in baseline grid that you can easily take advantage of.

Here’s how the whole thing looks now:

The footer

Let’s give ourselves a dead-simple footer, with a couple of navigation links, and a copyright notice, because why not?

Here, I’ve included an Inline List (see above) for those footer links, and two columns that go vertical at phone-size. Here’s the CSS I used:

footer#page-footer {
 padding-top: 3em;
 padding-bottom: 3em;
 border-top: 1px solid #cecece;
}

And voilà! A bare-bones landing page for you to customize to your heart’s content. Here’s what the whole thing looks like:

Grab the zip file if you like, and play with the code that’s already there. Start from scratch, and take a look at the source. Or, you could just take a look below at the training materials that others have made…

Tutorials & Training

Training materials by ZURB

As you might expect, the guys at ZURB have gone beyond documentation by providing us with some training materials of their own. These take the form of the Foundation Course, and the Advanced Foundation Course. These training materials are meant to be downloaded and viewed locally.

ZURB also offers paid training classes which can be taken online. You can find more information about this on their website.

Screencasts by Webdesigner Depot

That’s right! We’ve made some training videos of our own, with a special focus on Foundation 5. Check them out on Youtube: Foundation 5 Introduction, and Using Foundation’s Advanced Features

Getting started with the ZURB Foundation 5 Grid

This set of screencasts by James Stone covers all the basics. Topics include: Setting up the Project, Starting with the Desktop Grid, Nested Desktop Grids, Adding Placeholder Images, Creating the Mobile Experience, and Refining the Tablet Experience.

ZURB Foundation 5 framework tutorials

The guys at ieatcss.com went and wrote a whole e-book all about Foundation 5. You can find their beginner tutorials here. If you want something more advanced, you can download their ebook for 29 USD.

Why would you pay that? Because instead of just telling you how to use the framework, they explain how everything works. And I do mean everything, including the JavaScript plugins.

Mastering Foundation Zurb. tutorials from A to Z

This is another set of tutorials, followed by an optional ebook. These are provided by MonsterPost, the TemplateMonster blog.

Foundation’s sassy styles explained

If you’ve been craving a slightly more advanced, in-depth tutorial, here you are! In this post, our friends at Tuts+ describe, in great detail, how to customize FOundation from the Sass files up.

If you’ve never worked with Sass files before, start here.

How to create responsive tables in Foundation

Lastly, the brilliant guys at Sitepoint show us how to create responsive tables. Mind you, this is a solution that Foundation implements by default. In this tutorial, you can learn how to take one specific component of Foundation, and integrate it into another project.

(If you’re new to web design, you may have heard something about tables being “evil”. Well, if you use them for layout out your website, that’s absolutely true. However, sometimes data is best represented in a tabular format, so it’s good to learn how to make tables readable on mobile devices.)

Forks

Gumby – a Foundation fork

One beautiful thing about open source frameworks like Foundation is that their licenses allow people to take them, change them, and even call them their own. The designers and developers at Digital Surgeons did just that.

They kept the structural parts of Foundation, and then included some interesting new user interface components and jQuery plugins of their own. The result was named Gumby, and it’s a fantastic framework in its own right.

Where Foundation is designed to be flexible, and suit both content-driven websites and web applications, Gumby is more specialized. It’s focused on one thing: content-driven websites, and the easy creation thereof.

Almost flat UI

The changes to Foundation in this fork are so subtle that I’m not sure whether to call it a fork or a theme. It is, in essence, Foundation 5.2.2 with just a few, small aesthetic changes.

What makes it interesting to me is that these changes buck the “flat design” trend in very small ways. The reasoning behind it seems to be that certain user interface elements, like buttons, should retain a subtle reference to the third dimension.

It’s slightly skeuomorphic design, and I think it could actually improves usability. Well, for some users, anyway.

Miscellaneous resources & tools

Here are some interesting Foundation related tools and things that didn’t quite fit in any other category:

Building Blocks by ZURB

The Building Blocks are snippets of code built with and/or for Foundation. These include new UI components, reusable content layouts, and more.

Sublime Text snippets

Sublime Text is a fantastic text editor used by programmers world-wide. These snippets (chunks of code meant for easy insertion into any file) are basically meant to make building layouts with Foundation go that much faster. They’re compatible with both Sublime Text 2 & 3.

Experimental grid generator

Is the default twelve-column grid not to your liking, or not right for your project? Then make a new one! Just head over to this grid generator, input your values, and grab your CSS.

Mind you, the CSS seems to be based on an older version of Foundation, so you may need to adapt it to the newer class names and responsive classes. Still, it does all the hard calculations for you.

Bookmarklets

Bookmarklets are little tools, usually built with JavaScript, that can be placed in your bookmarks bar. Once you trigger them, they can share the current page, display useful information in an overlay, and many other useful little things.

The Grid Displayer Bookmarklet by Antoine Lefeuvre can be used to overlay a visual grid on top of whatever page you’re working on at the moment. The grid is customizable, but you can set it to the Foundation defaults easily.

The Vertical Rhythm Grid Bookmarklet by Kevin Altman does much the same thing as the Grid Displayer. The difference is that instead of vertical lines, you get a bunch of horizontal lines to help you manage the vertical space between elements.

The [Responsive Design Bookmarklet] by Victor Coulon will reload the current page you’re on inside a tool that allows you to quickly preview your designs at different resolutions.

A look at what’s coming

You’d better believe that ZURB isn’t sitting still. Along with all of the other stuff they do, they’re hard at work. They’ve got some cool stuff coming, like:

Foundation for Apps

ZURB is creating a brand new version of Foundation which will not replace Foundation 5, but work along-side it. It will include features specifically for designing, prototyping, and building web applications.

Features will include a new grid, integration with Angular.js, new features designed specifically for prototyping and more. To read more about what they’re doing, see what they have to say for yourself: The Next Foundation.

Motion UI

Technically, Motion UI will be a part of this new, app-centric version of Foundation, but I imagine it will be available as a separate component for use anywhere. (That’s an educated guess, nothing more…) What is it? It’s an animation library.

Modern apps make heavy use of animation, not just to impress the users, but to improve usability. Motion UI is designed to make that easier for those of us building complex interfaces.

According to the ZURB guys themselves:

ZURB has loved flat for 16 years. We’ve flattened everything from Foundation, to our apps to our stomachs (we wish — we were working on it). But the flattening of the web has had its drawbacks. Minimizing most gradients, shadows and skeuomorphic elements has left a void in the design world for content differentiation. Motion helps us bring that back.

And while I think that the deliberate, complete elimination of skeuomorphism may have been a slight over-reaction in the first place (see what I said earlier about “Almost Flat UI”), I’m glad that we’re coming up with alternatives. We need new ways to tell our users how to get the most out of our products, and animation is a great way to manage that.

Conclusion

Foundation is just what its name implies. It’s a starting point, and it’s a great one at that. It’s not the only great framework out there, but it’s a solid choice for anyone who wants to build beautiful products faster.

Is it right for you and your projects? Take a look inside and find out.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.