Foundation is a fully responsive front end framework for developers, made by ZURB. It provides many tools for making mobile friendly websites and allows developer to create front end code faster and better. It is an open source project. Foundation is MIT Licensed and free to use on anything you would like.
Foundation primarily consists of HTML, CSS and jQuery based design templates that use modern technologies and practices and compatible with all major browsers. Talking about version of Foundation, the latest stable release is Foundation 5 released on December 12, 2014 created by ZURB.
Let us have a look at different points mentioned below.
- The earlier version Foundation 2 was an open source and responsive design and released in October 2011.
- The Foundation 3 provides styles for formatting page elements and allows development of responsive layout and was released in February 2013.
- The Foundation 4 was about coding smarter and is a mobile first approach for mobile devices and enhanced the web pages for larger screens and was released in November 2013.
Introduction to Foundation 5:
The Foundation 5 is called as “Foundation for Sites” which includes three versions of Foundation such as Foundation for Apps, Foundation for Sites and Foundation for Email. It is called as “most advanced front end framework in the world” used by millions of developers and sites.
The latest release v5 brings some great updates and lots of key fixes. It is quite similar to version 4, but with performance improvements and developer tools.
- Foundation 5 contains jQuery 2 and removed the support of Zepto which was in version 4 by making better performance for both desktop and mobile users.
- The v5is now compatible with Sass 3.4. Improvements in dropdowns which closes automatically when a link is clicked.
- Split buttons can now support 2 different events.
- Accordions can now use <ul> elements instead of <dl> elements.
- New templates are available with v5 for faster prototyping.
- ZURB added Libsass (pre-processing language for CSS) which improves compilation performance.
Download Foundation 5:
To start working with Foundation, first we have to download all the package source code from the link: <a title=”http://foundation.zurb.com/develop/download.html” href=”http://foundation.zurb.com/develop/download.html”” target=”_blank”> Download Foundation </a>
When you click on the Download Foundation button, you will be redirected to its official download page as shown in the picture below:
Figure 1: Download Page of Foundation
Once you are on this page, you can see there are four types of downloading options.
- Complete:It lets you download everything in the framework in simple, vanilla CSS and JS that Foundation 5 has to offer.
- Essential:This option will give you important features such as typography, grid buttons, reveal and interchange.
- Custom: It allows generating custom build as per your requirements. It allows for custom default CSS colors and key sizes such as max-width. It will take you to the customization form where you can change default settings before downloading the framework.
- Sass:It is built using Sass CSS preprocessor and you can work with it in the same way.
For this article, we are going to download the first option i.e. “Complete” option which allows downloading everything in the framework. It will download in the zip format, unpack the zip and you will see the below mentioned folders and files:
- Style Sheet folder: It contains foundation.css, foundation.min and normalize files.
- JavaScript folder: It contains many plug-ins to make foundation work properly. It includes foundation folder which has all the plug-ins in the JS format, vendor folder and foundation.min JS file.
- Images folder: It includes images which are needed in the pages that are stored in this folder.
- Index.html: It is a sample structure which can be used as a basic structure of pages in the project.
Components in Foundation 5:
Grid
It is 12 columns grid system in which each row is divided into 12 columns which supports almost all sized device screen. It provides 3 types of specific classes for creating responsive classes namely .large-x, .medium-x and .small-x.
- .large-x for large sized devices like desktops
- .medium-x for medium sized devices like tablets
- .small-x for smaller devices like mobiles
Navigation
Navigation is used to create cross device forms such as top bar with dropdowns, button, search bar, side nav, sub nav, pagination and off-canvas navigation.
Forms
Forms are built with combination of form styles and grid system. Foundation brought powerful system for form layout in which you can create forms quickly and easily with this framework.
Buttons
Buttons are interactive element of your website or app and easy to use and customize. Foundation provides different types of button styles for user interaction. You need to add “button” class to anchor, input or div elements to see it transform into glorious foundation styles button. Using buttons, you can achieve different styles to meet your needs. It provides different shapes like square, slightly rounded, completely rounded, large, medium etc.
Typography
It provides clean, attractive and simple default styles for all the basic typographical elements. It uses modular scale for styling the header and sub header elements. It is easy to change size of the text in our web pages. Lists are useful for defining the list of things in which Foundation 5 provides different unordered and ordered list styles to perform this task.
Reveal Modal
You can create modal or pop up window using Reveal jQuery modal plug-in which makes it very easy for prototyping and production.
Orbit
It is powerful and responsive image slider that allows creating image and content slider easily.
Basic Structure of Foundation:
Now let us have a look at the basic structure of foundation in the code snippet below.
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” >
<meta name=”viewport” content=”width=device-width, initial-scale=”1.0”>
<title>Foundation 5 Structure</title>
<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” href=”css/foundation.css”>
<link rel=”stylesheet” href=”css/app.css”>
<script src=”js/vendor/modernizr.js”></script>
</head>
<body>
// your code goes here
<script src=”js/vendor/jquery.js”></script>
<script src=”js/foundation.min.js”></script>
<script>
$(document).foundation ();
</script>
</body>
</html>
[/code]
Let’s see what this structure contains:
Meta Tags
The meta tags are included inside the head tag as shown in the structure.
[code]
<meta charset=”utf-8” >
<meta name=”viewport” content=”width=device-width, initial-scale=”1.0”>
[/code]
In the first meta tag utf-8is used to define the character set in the website. The second tag is used to scale the width of the webpage to the width of the device it is viewed in.
CSS Files
To work with Foundation 5, you need to include following CSS files in the HTML file.
[code]
<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” href=”css/foundation.css”>
[/code]
You should include CSS files as shown in the above order. Otherwise, normalize.css file resets the foundation’s CSS styles. The foundation.css file serves as the base foundation. If you want to include your custom CSS file, then write as shown below:
[code]
<link rel=”stylesheet” href=”css/app.css”>
[/code]
JavaScript Files
You need to include 3 different JavaScript files in your HTML file: modernizer.js, jquery.js and foundation.js. The first one can be included in the head tag and last two can be included in the body tag.
The modernizr.js detects HTML5 and CSS3 features in the user’s browser. The modernizer is required before the body is rendered hence it is included in the head tag. We must include jquery.js before the JavaScript file of Foundation. The foundation.js loads the Foundation JavaScript Library which automatically loads the Foundation core and all JavaScript plug-ins.
Basic Example:
Let’s see one basic example by using this structure which creates rows and columns that are part of Foundation 5 grid system.
[code]
<!doctype html>
<html>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Foundation 5</title>
<link rel=”stylesheet” href=”css/foundation.css” />
<script src=”js/vendor/modernizr.js”></script>
</head>
<body>
<div>
<div>
<h4>This is your basic grid example</h4>
<div>
<div>
<div>
<p>Hello world!!! This is a twelve column section</p>
</div>
</div>
</div>
<div>
<div>
<div>
<p>Six columns</p>
</div>
</div>
<div>
<div>
<p>Six columns</p>
</div>
</div>
</div>
<div>
<div>
<div>
<p>Four columns</p>
</div>
</div>
<div>
<div>
<p>Four columns</p>
</div>
</div>
<div>
<div>
<p>Four columns</p>
</div>
</div>
</div>
<div>
<div>
<div>
<p>Three columns</p>
</div>
</div>
<div>
<div>
<p>Three columns</p>
</div>
</div>
<div>
<div>
<p>Three columns</p>
</div>
</div>
<div>
<div>
<p>Three columns</p>
</div>
</div>
</div>
</div>
</div>
<script src=”js/vendor/jquery.js”></script>
<script src=”js/foundation.min.js”></script>
<script>
$(document).foundation();
</script>
</body>
</html>
[/code]
Open the above html file in your browser, you will see the output as shown in the below picture:
Summary:
In this article we have discussed an overview of Foundation 5 framework used for UI development.Foundation 5 is a very popular responsive front end framework to build websites and apps quickly. It also has advanced features for rapid prototyping. The newer version of this framework is most stable and more comfortable to use.
Hope you have got a clear understanding to start working with this framework
