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.
akbrodie.wordpress.com 