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.
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.
Index.html – This is just an introductory file which renders an overview of how Foundation layouts look.
Components of Foundation-
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.
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-