Tutorial on Foundation 5 by Zurb — Building a static website

Foundation 5 by Zurb is a CSS framework that lets you develop websites quickly and effectively. It is a responsive framework for designing websites that look great and fit properly in every kind of device. So let’s proceed to understand what this framework has to offer and how it is different from its competitors.

If you want to know about some other alternatives to Foundation framework, check out the article Best Web Designing Frameworks for 2014 – Revisited

Why use Foundation 5?

Using Foundation 5 you can develop websites in minutes. You don’t have to write code for many commonly used elements like navigation bar, headers, buttons, image slideshows etc. Foundation 5 also lets you create mobile first websites on the fly. When I say mobile first, I refer to those websites that look great in various screen sizes ranging from the tiniest device to the largest ones.

Foundation 5 comes with many useful and powerful features out of the box. It lets you create complex website designs without compromising the code semantics. Probably this is the main reason why many businesses like National Geographic, Mozilla, Washington Post and others have used Foundation 5 to structure their projects.

Some of the best features of Foundation 5 include optimised images, faster clicks on mobile devices, responsive off canvas navigation bar, powerful semantic grid system, responsive videos, one step initialisation of all Javascript plugins through foundation() method, better accessibility controls, easy to use command line tool, responsive images slideshow plugins, cleaner forms and many more.

Getting started with Foundation 5

To start using Foundation 5, you need to download the zip file from its official download page. Once you are on this page, you can see four different download options : Complete, Essential, Custom and Sass option. The “Complete” option lets you download everything that Foundation 5 has to offer. The “Essential” option will give you only important features like typography, the grid, buttons, Reveal and Interchange. The “Custom” option will take you to a customisation form where you can change the default settings before downloading the framework. Finally, there is a “Sass” option for developers familiar with Sass CSS Preprocessor.

I am going with the “Complete” option for this tutorial and have downloaded version v5.4.7.

Next, you need to unzip the downloaded file in your system. The extracted folder will contain some sub directories which are found in every static websites. Below is the list of files and directories present in this Framework:

• index.html — The main file of the website
• robots.txt — File for bots
• humans.txt — Readable file for human beings
• /css — Folder containing all the necessary Foundation CSS files
• /img — Folder for keeping images
• /js — Folder containing all the necessary Foundation JavaScript files

Before working on these files, let’s open the default index.html file in the browser. You should see a page like this:

 

The /css folder contains 3 different CSS files: foundation.css, foundation.min.css and normalize.css. The first 2 files two different versions of the same CSS file. foundation.css is a documented and non-minified version where as foundation.min.css is a compressed and minified CSS file. normalize.css is a popular CSS file to clear browser default styles on various HTML elements. You can read more about this file here.

The /js folder on the other hand contains many files and directories. The subfolder /js/foundation contains individual JavaScript files of all the Foundation 5 JavaScript components. The advantages of having different files is that you can choose which component to include. Another subfolder /js/vendor contains all the 3rd party JavaScript libraries like jQuery, Fastclick.js and others. Foundation 5 also provides a minified JavaScript file foundation.min.js which includes all Foundation 5 JavaScript components. So, let’s proceed and build something using Foundation 5.

Creating Simple Website using Foundation 5

In this section, we will create a simple landing page using Foundation 5 framework. We will also understand some important components as we proceed.

Here is the link to the live demo of the static website we are going to build.

This is a simple landing page for my Book “Jump Start Bootstrap” created using Foundation 5 framework. It has a simple responsive navigation bar, a big page header with book image and title, a 3-columns layout below describing the book details and finally a footer section.

 

Open the downloaded Foundation 5 Framework directory. Edit index.html file using a text editor. Insert the following standard HTML markup recommended by Foundation framework.

 

You can see that this looks like a standard HTML5 markup used in every web project. But there are few additional markups that need attention.

Why a commented HTML tag?

The first thing you will notice is the following line.

 

This is a conditional tag detected by browsers older than Internet Explorer 10. This tag contains a class .lt-ie10 that can be used to write additional CSS and JavaScript code for such browsers.

Why .no-js class?

This class is used by the modernizer.js script that is included in the end of file. It replaces .no-js with .js class for JavaScript enabled browsers. You can then use this .js and .no-js classes to write appropriate CSS styles.

Some important Meta tags!

Inside the head tag you need to insert the following important meta tags:

 

The first meta tag is used to define the character set used in the website, which is utf-8 in this case. The second meta tag is used to scale the width of the webpage to the width of the device it is viewed in.

Required CSS Files

To start using Foundation 5, you need to include the following two CSS files in your HTML file: foundation.css and normalize.css.

 

You should also preserve the order in which they are included. Otherwise normalize.css will reset Foundation’s CSS styles.

We will also include our own custom CSS file below all the CSS files as shown below.

 

Required JavaScript files

You have to include 3 different JavaScript files in your HTML file: modernizer.js, jquery.js and foundation.js.

The first one should be included inside the head tag and the last two can be included inside body tag in the end. Modernizer is required before the body is rendered hence it is included in the head.

Rows and Columns

Rows and columns are a part of Foundation 5 grid system. They let you place things at proper locations in a webpage. Before placing any component in a webpage, we need to add a row. Rows can be thought of as horizontal bars drawn across the webpage. They are created using a class .row as shown below:

 

Next, we need to define a column. Columns are vertical bars drawn inside a row. You can use .column or .columns to create columns. They are aliases of each other.

 

Let’s insert an H1 tag inside the column and add some inline styling to the page.

 

This how it looks in the browser:

 

You can see that row’s red background has been hidden beneath column’s green background. This means a column takes up all the available space inside a row. Here, the row centres the webpage in browser screen by setting auto margin on both left and right side.

Let’s proceed and remove the H1 Hello World tag and create a decent landing page header.

 

Adding a class .subheader will lighten up its color.

This will look like following:

 

Let’s also add the book’s cover image in this section. We will add an image tag with proper src attribute pointing to the image.

Now, we have a page that looks like following:

 

Let’s add a “Buy Now” button inside this page header. Creating a fancy button in Foundation is extremly easy. You just have to add the class .button to anchor element or button element.

I have also added an additional button class .radius so that the corners of the button are not sharp.

Foundation 5 provides a utility class called .text-center. You can use this class to apply text-align : center CSS property to any HTML element. Let’s apply this to above .columns class. We will also add our own class called .page-header to add some CSS styling to this section. Hence, the final markup for the page header is as follows:

Create a new file now called app.css inside /css folder. Insert the following CSS rules into it.

The page should now look like following:

 

Adding Navigation Bar

Foundation 5 provides a cool responsive navigation bar component called “Top Bar” out of the box. You just need to follow the markup structure provided by Foundation to create it. You don’t have to write any CSS rules or JavaScript code to make it work.

Create a nav element just above the page header markup created in the above section. Add the class .top-bar to it. You also need to add a custom data attribute data-topbar to let Foundation trigger its JavaScript functionality.

We will then create a section inside this nav element for the branding of the website. This is usually a <ul> tag with class .title-area.

The first <li> tag within it should have the class .name. Add an <h1> tag with an anchor tag inside it.

Check out the page in the navigation bar. It should look like following.

 

We need to add another <li> tag inside the above .title-area list. The content of this tag will be visible only in smaller display screens in its collapsed state. This tag should have the classes .toggle-topbar and .menu-icon added to it.

Check out the page in the browser now. Try to resize the browser width to see new toggle icon.

3-Columns Layout in Foundation 5

We will use Foundation’s grid system to create a 3-columns layout for our website. Create a new .row element below the page header section created earlier. Also, create an element with .columns class inside it.

To limit a column’s width to a certain amount you need to add classes like .small-*, .medium-* and .large-*. Here, * represents a number between 1 to 12. As the names suggest, small stands for smaller devices, medium stands for medium sized devices and large stands for larger devices.

Foundation divides a row into 12 virtual columns. You need to specify how many such virtual columns your .columns element should occupy. If we want to create a 3 column layout, each .columns element should occupy 4 virtual columns each. Hence, we will use the class .large-4 on each .columns element. So, let’s proceed and add these columns.

Now, you can fill these columns with the content of your choice. I have inserted <h3> tags, <p> tags and <ul> element in them. Hence, the page now looks like following:

If you try to shrink the browser width, you will see the columns stack on the top of each other. This is because we haven’t specified how they should behave in smaller and medium sized devices. Let’s convert this to a 2-columns layout in medium devices and 1-column layout for smaller devices.

For this, we will add the classes .small-12 and .medium-6 to our existing columns.

Adding Footer

We don’t have to do anything special here. The footer will consist of a single row and a single column. We will also add our own class .footer to apply some CSS styles.

CSS style

Conclusion

I hope this tutorial gives you a jump start to getting started with Foundation 5. There’s definitely more to it and we haven’t covered every item here. This article is a part of complete Foundation 5 course that will be published soon. I hope you enjoyed reading this article. Have fun.