Using the Foundation framework

A couple of weeks ago the famous Foundation framework released its fourth version. If you have never heard of Foundation we’re going to guide you through using this responsive framework.

Since version 3 of Foundation was built from the ground up using SASS — a CSS pre-processor that helps in the writing of more efficient CSS — this new version is also mobile-friendly and provides a lot of features in its grid that you don’t get from other frameworks.

Let’s dive into Foundation and see why it’s so popular…

The grid

Foundation uses a 12 column nestable grid that will adapt to any size screen, if you have already used grids this should all be very familiar to you. All the divs in Foundation use box-sizing: border-box so that the borders and padding do not affect the element’s width and height, making the math a little bit easier for us. But the amazing thing about the Foundation grid is that you actually get 2 grids, a big grid for when the screen is bigger than 768px in width and a smaller grid that you can control just as simply. To that end Foundation uses the small-# and large-# classes, like so:

<div class="row">
 <div class="small-3 large-4 columns">Lorem Ipsum</div>
 <div class="small-3 large-4 columns">Lorem Ipsum</div>
 <div class="small-6 large-4 columns">Lorem Ipsum</div>
</div>

In this code we created a row in which there are 3 divs that are the exact same width when the browser is wider than 768px but when it’s smaller, as you can see by that small class in the divs, the last one will occupy half the screen while the other two will occupy 25% each, this gives you immense control of how our website will look on all screens.

Foundation also allows you to offset a column, by which I mean that you can have a row with 2 columns that are only 3 columns wide but you can offset the second one that it floats to the right and to do that we use the large-offset class or the small-offset class:

<div class="row">
 <div class="large-3 columns"></div>
 <div class="large-3 large-offset-6 columns">3, offset 6</div>
</div>

Block grid

The block grid is just a nice little extra, it is a way for you to split the content of a list within the grid, it’s useful for when you wish this particular part of your website to stay evenly spaced no matter what the size of the browser. This type of grid uses the small-block-grid and the large-block-grid classes, if you only set the first one the grid will keep the desired spacing no matter what the viewport is but if you only use the large-block-grid class when the viewport reaches the breakpoint of 768px the grid items will stack on top of each other, you can always take more control by using both of these classes, like so:

<ul class="small-block-grid-2 large-block-grid-4">
 <li><img src="image1.png"></li>
 <li><img src="image2.png"></li>
 <li><img src="image3.png"></li>
 <li><img src="image4.png"></li>
</ul>

Using this, the images will be evenly spaced no matter the size. When the viewport is bigger than 768px they will only occupy one row, and when it’s smaller than that they will occupy two rows with 2 images each.

The main navigation

Now that we’ve covered the grid in Foundation and how it gives you plenty of control in all environments, we will talk about something we’ll nearly always use on our sites: a top navigation bar. And of course this navigation can also be flexible with little to no work using this framework. To create a simple responsive navigation using Foundation you use:

<nav class="top-bar">
 <ul class="title-area">
 <li class="name">
 <h1><a href="/">Website Title</a></h1>
 </li>
 <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
 </ul>
 <ul class="right">
	 <li><a href="#">Item 1</a></li>
	 <li><a href="#">Item 2</a></li>
	 <li><a href="#">Item 3</a></li>
	 <li><a href="#">Item 4</a></li>
	</ul>
</nav>

This bit of HTML creates a simple navigation bar that has the title of the website on the left and then on the right it has four menu items. Also note that when the viewport is smaller than 768px this menu will be replaced by a list icon making this menu responsive. If you want this grid to have its position fixed as you scroll down the page you just need to wrap it in a div with a class of fixed. To add dropdowns to your navigation you just need to add something like this to the place where you want your dropdown:

<li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
	<ul class="dropdown">
		<li><label>Dropdown Menu</label></li>
		<li><a href="#">Sub menu Item 1</a></li>
		<li><a href="#">Sub menu Item 1</a></li>
		<li><a href="#">Sub menu Item 3</a></li>
	</ul>
</li>

There is also the ability to add a divider to your list item adding a little grey vertical line, to do that you just need to place a list item with the class of divider between the two list items you wish to divide.

Buttons

No framework would be complete without some predefined buttons and Foundation actually has more than one style of button predefined, it has the default one that uses a blue color and then it adds the success, alert and secondary styles. By adding the class of radius you give this button a little bit of border-radius and by giving it the class of round you make the button almost entirely round. You can also add the class disabled to the button and there are 4 size classes to make the button as big as you need it.

<!-- Size Classes -->
<a href="#" class="button">Default Button</a>
<a href="#" class="tiny button">Tiny Button</a>
<a href="#" class="small button">Small Button</a>
<a href="#" class="large button">Large Button</a>

<!-- Color Classes -->
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button success">Success Button</a>
<a href="#" class="button alert">Alert Button</a>

<!-- Radius Classes -->
<a href="#" class="button radius">Radius Button</a>
<a href="#" class="button round">Round Button</a>

<!-- Disabled Class -->
<a href="#" class="button disabled">Disabled Button</a>

To create a simple dropdown button you only need to add the dropdown class after the last class, like so:

<a href="#" class="button dropdown">Dropdown Button</a>

Typography

The typography in Foundation uses Helvetica Neue and it also uses em’s instead of pixels to make it easier to adapt your type across all platforms and breakpoints. Using the headers is pretty self explanatory; you just need an h1 and the text you wish inside it, but there are also some other classes that can come in handy when dealing with typography in Foundation.

<!-- subheader -->
<h1 class="subheader">h1.subheader</h1>
<!-- Segment header, the text inside the small tag will act like a sub header -->
<h1>h1. <small>Smaller</small></h1>
<!-- Use .circle or .square to change the style of the bullets in unordered lists -->
<ul class="disc">
 <li>List item</li>
</uL>
<ul class="square">
 <li>List item</li>
</uL>
<!-- create an inline list-->
<ul class="inline-list">
 <li><a href="#">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
</ul>

As you can see, when it comes to typography, Foundation provides us with some basic help and then some additional classes to meet all our needs.

Other components

If this demonstration of the Foundation framework has whet your appetite to learn more and start building with Foundation you should really take a look at the documentation because Foundation also offers additional CSS components such as:

• Alert Boxes
• Panels
• Pricing Tables
• Progress Bars
• Tables
• Thumbnails
• Flex Video

And also some helper JavaScript such as:

• Clearing
• Dropdown
• Joyride
• Magellan
• Orbit
• Reveal
• Section
• Tooltips

As you can see, there’s a lot of Foundation to explore and I strongly advise you to look at all of its CSS and JavaScript properties.

Conclusion

We covered just enough in this article to see how Foundation can help building faster and more responsive websites, using its grid you get a lot more control over the structure of your website than when using a normal flexible grid and Foundation also gives you plenty of helpers to create your website. I hope this article has given you the push to learn and use Foundation for your next project.

Have you used Foundation for a project? What features did you find the most useful? Let us know in the comments.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.