Basics of Zurb Framework

Building this website was an important stage in learning foundation, the font-end framework. First stage was to download a custom version of the Zurb foundation, the only difference between this one and the main Zurb foundation was the guttering being reset to 0 REM from 1.875.

The next step was learning how the layout worked properly. I learnt that divs should have various class names that relate to the stylesheet that comes with Zurb. These are the most commonly used classes from site and what they meant;

“row”

Row is an important div that contains all of the column divs

“large”

This class displays the content of that div on small – large sized screens

“medium”

This class displays the content of that div on small – medium sized screens

“small”

This class displays the content of that div on small sized screens only

The previous size classes are used in conjunction with width numbers to select the width of the div in columns. For example “large-12 column” would be a full width div while a “large-6 column” would only be half width of the page.

“show-for-small-only

This class would show the contents of that div only on a small screen, the same works for medium and large.

“hide-for-small-only

This class would hide the contents of that div only on a small screen, the same works for medium and large.

“float-center”

This class floats everything contained in the div to the centre.

It was also important for me to connect my own css file to style elements of the page without me touching the css that cam bundled with Zurb. Therefore I created a custom.css file into my css folder to add styles to my html files. It is worth noting sometimes I needed to use an !important tag in my css to override the code shown elsewhere.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s