Zurb Foundation – Basic


Foundation has been designed to get project from on paper design to production more efficiently. Foundation is a framework that makes it easy to design a website, emails and apps that looks amazing on any device. It is semantic, readable, flexible and completely customizable.

Process to include the Foundation files on your website/ Process to install Foundation- Foundation has a template with compiled CSS and JavaScript that can be downloaded from the below link,

Download – https://foundation.zurb.com/sites/docs/installation.html

When we download the foundation we will be getting below three files CSS/JS and Index.html.

CSS files – This includes all the style sheet properties for Foundation.

JS files – This includes all the JavaScript files.

Index.html – This is just an introductory file which renders an overview of how Foundation layouts look.

Components of Foundation-

  1. Layout
  2. Navigation
  3. Media
  4. Typography
  5. Plugins
  6. Controls
  7. Containers

In this section of blog I will cover Layout, Typography and Controls.

Layout – We can create multi device layouts quickly with using the Grid in Foundation.

Horizontal block – When we add a class “.row” within an element then it creates a horizontal block.

Vertical Columns – When we add a class “.column” within element then it creates vertical columns within the horizontal block.

Grid system works on 12 columns properties.

There are three types of Grid – Small, Medium and Large.

Zurb Foundation

In above example I have created a row and in that row I created two columns of size 2 and 10.

Small, medium, large grid works as per the screen size. Lower screen properties inherit to the higher screens.

Forms –

We can create extremely creative and flexible form design using Foundation. Below are the input fields. Text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url, week.

Zurb Foundation

Above is the example to create the input fields.

Zurb Foundation

Typography- Typography is the easier way to the typographical elements.

Typography includes the headings, paragraphs, dividers, lists, blockquotes, abbreviations, code, keystrokes.

Headers – This includes 6 header elements from H1 to H6.

Blockquotes – The <blockquote> element defines a block of text that is a direct quotation.

Abbreviations – This is used to annotate a shortened term, this must be used with title attribute/

Code – This is used to annotate a piece of code.

Keystrokes – This is used to annotate the combination of keys.

Zurb Foundation

Above code includes the examples of typography, which will be rendered like below-

Zurb Foundation

Related Posts

Leave a comment