This foundation framework tutorial is aimed at complete beginners, just understanding the basics of html and css is more than enough.

What is Zurb Foundation Framework?

Zurb Foundation framework is one of the most advanced front end framework. Zurb foundation framework comes with inbuilt html, css and js plugins for creating responsive web applications quickly and effectively without redoing the project from scratch. Responsive design and Mobile First Approach are the two main features of foundation framework.

Zurb Foundation tutorial provided in this website has been updated to the latest release foundation 5.

Foundation 5 ebook has been released

New tutorials Added in the ebook
1. 3 Real Time Examples
2. Working with Foundation using SASS
3. Creating New Templates for Foundation Framework
4. Using Foundation Framework to create responsive Wordpress themes
5. Adding Plugins in Foundation Framework
Click here for more details


Step by Step Example

Advanced topics are only available in Ebook.


Step by Step Example

What topics are covered in this foundation 5 tutorial?

1. Introduction

Zurb foundation is an advanced responsive front-end (client side) framework that creates protype rapidly and production code for websites. It works on all types of devices and it gives HTML, CSS, jQuery plugins and common elements for creating web applications.

In the section, the basics of downloading and using zurb foundation framework are covered. I have recently added popular links to zurb foundation templates and features of the latest release, foundation 5.

Read More......

2. Grid System

Grid Systems are being used to guide design for more than a century for magazines. Recently it was implemented in web design using CSS.

A grid system is an invisible foundation of web page layout, which is used to divide the web page multiple grids.

Zurb Foundation framework provides a powerful12-column, nestable Foundation grid through which multi-device layouts can be created quickly and easily.

Features of foundation grid system is covered in this section. By the end of this section, you will be able to use nesting, offset, source ordering and block grids.

Read More......

3. Zurb Foundation Elements

FoundationFramework have ton of elements to help you build responsive site without worry about your baseline.

Buttons: Foundation Framework allows you to customize or override button styles based on your needs. Foundation classifies buttons based on size attributes color, size and radius. Size class contains .tiny, .small, .medium and .large. Color class contains .secondary, .alert and .success.

Navigation: Navigation in Foundation Framework includes pagination, Side nav, Sub nav, Top bar and Breadcrumbs. Pagination is moving between pages with the advent of longer pages. It can useful for long, repititive content. Side nav, like you will see on our main site, is useful for sections of either a site or a page. Sub nav used to move between different states of pages. Breadcrumbs shows navigation trail for user clicking through site. Top bar is used for complex navigation between pages.

Elements of zurb foundation framework are explained with real time examples in this section.

Read More......

4. Step by Step Examples

In this section, we are going to see how to build real time websites using zurb foundation framework with the help of 3 real time examples.

  • Tourist Spot
  • Games Site
  • Social App
Read More......

Advanced Zurb Foundation Framework Tutorial
1. Developing Templates using Zurb Foundation Step1: Plain Template

In this chapter, we are going to delete the unwanted default content of Foundation Framework to create a plain template.

Step 1.1: Open the downloaded index.html file (inside Foundation framework package) in your favorite HTML editor.

Step 1.2: <body></body> tags except codes inside <script> tags, they are required to use Foundation 5 framework. Now the <body> element will look like this,

Now there is nothing in the index file.

Rest of this tutorial is available only in ebook.

2. Creating WordPress Theme
Introduction to Wordpress Themes

In this chapter, I am going to explain about creating Wordpress themes with Foundation Framework. This is what we are going to create, a plain Wordpress theme.

When you download any Wordpress theme, you can find a lot of files and folders inside the package. Not all are important; most of the files are used to improve the functionality of the theme.

To create a simple Wordpress theme, just 4 files are enough namely,

  • style.css - Handles styles of your new theme.
  • header.php - Comprises code of header section.
  • index.php - Contain the main content and code for including other files.
  • footer.php - Handles footer section of your theme.

Rest of this tutorial is available only in ebook.

3. Adding Plugins in Foundation Framework

Adding Plugins in Foundation framework is very simple. You just need to add the JS file of the plugin in the Footer (to reduce loading time) and the CSS file of the plugin in the header. That's all.

In Header,
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />

In Footer,
			<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
			<script src="js/vendor/snap.svg.js"></script>
			<script src="js/jquery.pizza.js"></script>

In HTML Body,

The HTML is very simple; it only has a list of data and its values. There are three types of charts in this plugin, below I have provided a sample code for each chart and their output.

Rest of the tutorial is available only in ebook.

4. Foundation Framework using Sass

SASS is a CSS pre-processor. You can think it as a CSS with advanced syntax which is processed by the program to turn into regular CSS style sheets. However, they do not extend the CSS standard itself.

What's new in SASS which CSS lacks?

CSS lacks things like variables, nesting, mixins, inheritance and other advance goodies which make it large and complex for huge websites.

SASS lets you work with variables, nesting, operators, controls and mixins which reduces the size of the code many times.

Rest of this tutorial is available only in ebook.

What tools do I need for this tutorial?

You don't need to buy any tool for this tutorial. You can use one of the free html editors. Let me know if you are having trouble with choosing the editor, I will help you out.

Useful Resources:
  1. Tools & Resources - All tools made for foundation framework are listed in here. This list is constantly updated with new resources.
  2. Online Foundation editor by Zurb - Zurb has created a pen in codepen for foundation elements. We can design single web page here by editing html code.
  3. Foundation Documents by zurb - All the foundation elements are explained with detailed example in this page.
  4. Common Foundation Tutorials by Zurb University - They provide lot of courses for product design.
  5. Introduction to Foundation by Wikipedia - Wikipedia explains history of foundation framework and structure of foundation framework

Other Popular Front-End Frameworks:
  1. 960 Grid System

    960 Grid System is used for streamline web development. It provides 960 px predefined column layout that can be split in to 12 or 16 smaller columns dependding upon the developers need.

  2. Twitter Bootstrap

    Twitter Bootstrap was designed for mobile, tablet, desktop and large desktops. Bootstrap provides some special queries for different screens. But main target is large screens.

  3. Fbootstrapp

    Fbootstrapp comprises CSS and HTML for all standard components like typography, forms, buttons, tables, grids, navigation and more.

  4. Uikit

    Uikit Framework was developed by YOOtheme. It is a light weight and modular front-end framework, can be customized before downloadiing. It uses preprocessor LESS.

Zurb Foundation Framework Evolution

We explain this topic through infographic for easy understanding. This foundation framework evolution infographic takes a history of foundation framework. For each release foundation framework offers new elements like abide, range slider, off canvas, etc.

Zurb Foundation Framework Evoluation

In our site, we explain only zurb foundation 5 tutorials with step by step realtime example. Because foundation framework 5.0 covers all the features of foundation framework 3.0 and 4.0.

Comparison of Zurb Foundation Framework and Twitter Bootstrap

Framework is pre-written CSS files which can be enforced to HTML using the class name. Both Bootstrap and Foundation try to give you all of the components that you need to quickly perform CSS-based layout and prototyping work with some JavaScript goodies. Foundation gives you the foundation to build upon. But Bootstrap will give you everything, if you need to bootstrap your project. Zurb Foundation framework uses REMs. But the twitter bootstrap uses pixels. By using pixels, you can explicitly declare height, width, padding and margin of component on every target device. In REM, you can state font size 80% and components shrink by 20%.

  • Zurb Foundation Tutorials
  • Bootstrap

Grid System

Foundation grid increased and decreased based on the browser width. Bootstrap has set of pre-defined grid sizes for screens and main devices. It will suddenly change the grid size while you resizing the browser width. Foundation will adapt its grid to the current browser. Both grid systems have all of the advanced features such as nesting, offsets and pushing/pulling.

Bootstrap grid use 12 columns making for a 940 px wide container without responsive. If responsive feature added, the grid adapts to be 724 px and 1170 px wide based on view port. The zurb foundation grid specify width each column with the small, medium and large.

Framework Elements

Zurb Foundation have a ton of components and structures to help you a responsive without worry about your baseline. And Foundation Grid works on almost any device and support nesting, source ordering, offsets and device presentation. Navigation in Foundation contain off-canvas implementation a robust top bar. Buttons include style of size, presentation and colors. It include ton of plugins used to optimize your page, show off images and pop up modals.

Both Bootstrap and foundation contain pre-styled but customizable UI elements. You can quickly prototype your web page without giving too much thought to how you're going to structure different pieces.

Foundation was designed for any screens. But Twitter Bootstrap was designed for mobile, tablet, desktop and large desktops. Bootstrap provides some special queries for different screens. But main target is large screens.

If you want to add more on to twitter bootstrap or make some changes, it is not so easy. "if you want to use foundation straight out of the box you can, but if you do want to customize, here are all the tools you need". Bootstrap has some features such as interactivity, simple, robust and well respond.

Foundation is not only CSS but it also have java script features. One of the favorite feature is Orbit slider. Bootstrap provides same type of items in different manner. Bootstrap offering is a little more robust.