Getting Started with Foundation 5 by ZURB

Often, when you talk about front-end frameworks, Bootstrap, Foundation by ZURB, and uikit are usually the ones that are brought up.

A lot of people gravitate towards Bootstrap because of its ease of use, simple docs, great features, adoption in the industry, extensibility… I guess this list could go on and on. I’ve always seen Foundation as an alternative but never looked into what features they offered and if they could be a viable alternative to Bootstrap to be honest. There wasn’t really a need to since Bootstrap did

most of the things I needed from it. Recently, however, ZURB has been talking about Foundation for Apps. The way they are looking at modern applications really makes sense and fills a growing need that modern websites need to feel more interactive like their mobile counterparts. Foundation for Apps consists of three main parts:

As an example, ZURB is talking about Motion UI in the following gif. Websites that feel more interactive and friendly will be coming soon from them.

main-image-blog

Also, their new grid definitely feels more like how I build Angular applications nowadays. Panels, sections, and columns galore.

horizontal-vertical-scroll

These articles caught my attention because I like that ZURB is trying to innovate or at least move forward front-end frameworks (I also like their stylings a bit better than Bootstrap 3’s). So now here we are, I’ve taken a good look at what Foundation has to offer and have come away pleased and wondering why I haven’t looked before. There is a ton to the Foundation website, and it can be a little overwhelming at first.

Navigating the Site

zurb-homepage

There are a lot of links in the header of the site and you can easily get lost in all of them (there’s a lot of great info there). To keep this simple, there are only three sections that are needed if you just want to get your feet wet and start developing with Foundation:

The main sections we’ll be looking at are

Develop -> Add-ons and Docs.

Installation

Looking through their docs, there are three different packages we can go into:

CSS, SASS, and Building an App. For more advanced uses, Foundation comes with a CLI that you can download and install so that you get Foundation commands from the command line. We won’t be messing with that stuff today, just the CSS. Downloading the Foundation CSS is all we have to do. We’ll get a sample site in index.html where we can test out CSS and JS features.

zurb-foundation-5-preview

CSS Setup

To start up a Foundation site, we’ll need two CSS files:

normalize.css and foundation.css. Those will be enough to get the classes we need and then we can add our own stylings in a custom stylesheet that we’ll call app.css:

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">    <!-- your custom styles -->

Now we have access to the classes that are necessary to build out all parts of Foundation. Let’s say we needed buttons. The syntax isn’t too far off of the Bootstrap way. You have

.button, .tiny, .small, .large, .radius, .round, .success, and .alert. We could create buttons by writing:

<a href="#" class="button tiny primary">Tiny Primary</a>  
<a href="#" class="button large success radius">Radius Success</a>
<a href="#" class="button large alert round">Rounded Alert</a>

See the Pen Foundation 5 Button Showcase by Chris Sevilleja (@sevilayha) on CodePen.

JS Setup

To get the JavaScript going, we’ll need three things:

jquery.js, foundation.min.js, and we’ll need to initialize Foundation like so:

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

By adding that

$(document).foundation(); line, we’ll be able to define our JavaScript elements just by using HTML5 data-attributes. Here’s an example of the dropdown split button and the tabs:

See the Pen Foundation 5 JavaScript Demo by Chris Sevilleja (@sevilayha) on CodePen.

Features

Take a look at ALL the features in one place. ZURB made the

Kitchen Sink to show off all of Foundation 5’s goodness. We won’t dive too far into many of these just yet. The CSS is easy enough (just copy and paste the classes), and we’ll be going more in depth into the grid, JavaScript components, and other fun features in separate articles.

CSS Features

The thing that is great about Foundation is that it strives to be fully responsive. In this spirit, pretty much everything is

defined using ems or rems. Even the media queries and widths of the grid system use ems. This is a great practice since it ensures you are starting your sites with a responsive… umm foundation. The CSS classes that come with Foundation are easy enough to learn and understand. Just read through the docs and ZURB’s great examples to see how to create buttons and whatnot. Here’s a quick list of some CSS features.

Here’s a little showcase of some unique features:

Icon Bar

See the Pen Foundation 5 Icon Bar Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Switches

See the Pen Foundation 5 Switches Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Pricing Tables

I wish the syntax for this was a bit more semantic, but it’s still cool nonetheless.

See the Pen Foundation 5 Pricing Table Showcase by Chris Sevilleja (@sevilayha) on CodePen.

That’s a giant list. The docs can definitely show all that off best, so head on over and check out the great CSS features. Foundation is very polished in all of its CSS elements and I like the additions of pricing table, icon bar, switches, and some useful visibility and utility classes that could be used often.

JS Features

The JavaScript features that come with Foundation are great as well. One of the big JS features is the built in off-canvas menus. We’ve detailed how to

create off-canvas menus but it’s good to have a solution built into the framework that you’re using.

Off Canvas Menus

See the Pen Foundation 5 Off-Canvas Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Here’s a quick list of the other JS features:

Range Sliders

See the Pen Foundation 5 Range Sliders Showcase by Chris Sevilleja (@sevilayha) on CodePen.

Should You Use Foundation 5?

Foundation is a solid framework that has been tested, has solid backing in ZURB, and continues to innovate (can’t stress how much I like their Motion UI and new grid stuff). The syntax is easy to learn and get started with. There’s no reason not to give it a try. Just spin up a

CodePen and play around with the features. The addition of visibility classes and the work they’ve done with accessiblity are great additions as well. Take a look through their docs and see what you find. I think you walk away impressed. There’s just so many features and components with ideas that make sense (Interchange is a big one).

Want More Foundation?

Here are some more articles to get you going with Foundation:

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.