Introduction:
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-
- Layout
- Navigation
- Media
- Typography
- Plugins
- Controls
- 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.
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.
Above is the example to create the input fields.
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.
Above code includes the examples of typography, which will be rendered like below-
