Introduction to the Zurb Foundation Framework
Basics
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.
Downloading Zurb Foundation
You can download Zurb Foundation from here: Download
Zurb Foundation framework is downloaded in 3 ways.
- Download Everything - If you want to download everything in the foundation framework, click download everything link.
- Download Essentials - The essential download have light version that includes the grid, typography, interchange, buttons and Reveal.
- Custom Download - In custom download, we can include or remove certain elements and define color, size of columns, font size, etc.,
By default there will be a HTML document called index in the downloaded files. You can start by editing that document. You will learn more about the structure and how to use the elements of Zurb Foundation in the following chapters.
Structure of Zurb Foundation
The zurb foundation download will consist of three folders and three files. CSS folder, JS folder, IMG folder, index.html file, humans.txt file and robots.txt file. Humans.txt and robots.txt files are just notes for people and the search engines, it is not important in this course so don't worry about it.
The CSS folder holds all the necessary CSS files such as foundation.css, foundation.min.css and normalize.css, The JS folder has foundation.min.js file and two folders named as foundation and vendor. Foundation.min.js provides all the foundation plugins in one file, for fast load. The foundation folder contains each plugins as a single file. Vendor file has some external JS files and the IMG folder is to store the images used to design the website. The index.html file is the default home page that comes with the download, just open it in a HTML editor like Aptana Studio and start editing it to create your website. Play with it using the codes from the previous chapters to get familiar with it.
Foundation Framework 5 templates
Foundation 5 is the latest release by Zurb Foundation by the time of writing this website. There are 13 default templates available here: Zurb Foundation Templates all you need to do copy the code of the template you like and paste it in between the body tags of your website, that's all. Information of each layout is given in the left side below the layout. HTML code of each layout is given in the right side below the layout.
Detailed explanation is provided in the next section with live examples.
Features of Zurb Foundation Framework
Zurb Foundation 4
Zurb Foundation 4 is smart for coding. It gives amazing results and saves lot of time for users.
Zurb Foundation 4 Features
- Mobile First Approach
- All Semantic
- Retooled Javascript
- Flexible and Efficient Layout
- It have included dozens of styles to help you quickly prototype a site.
Zurb Foundation 5
We can customize build to include or remove certain elements and also define the size of columns, colors, font size and more. Everthing in Zurb Foundation 5.0 is semantic.
Zurb Foundation 5 Features
- Faster for Users
- Faster to Code
- Faster to Learn
