Trail Blazing by Francois Rossouw
What is Zurb Foundation?
ZURB Foundation is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Zurb is also one of the leading frameworks for creating responsive web designs. Zurb facilitates responsive web design through the use of a fluid grid system, which adapts to the current screen resolution. This is all done through css classes defined in zurb. Another benefit of using Zurb foundation is that they have invested considerable time and effort in standardizing your website look across all browsers. You need very little know-how about the different browsers to accomplish this, it just works out of the box! For more information on Zurb Foundation go to http://foundation.zurb.com/index.html
The Grid - How does it work?
Foundation employs the use of a grid system to design your page layouts. Your page is divided into rows. Each row is then divided into a number of cells. Zurb uses percentage values to control cell widths. Rather than expressing your cell width in a percentage yourself, Zurb allows you to express the widths in terms of the number of columns a cell should take up. A row has a maximum of 12 columns that you can assign to your cells. Take care to ensure that each rows columns add up to twelve as you will see strange results if you do not assign all 12 columns or more than 12 columns. The grid supports nesting of grids. You can therefore, further sub divide any cell into additional rows with cells. This gives you infinite possibilities in designing your page.
To illustrate. Take a look at: http://foundation.zurb.com/grid.php and http://foundation.zurb.com/docs/components/grid.html
Confused? Let’s try it out and you’ll soon see how easy it is:
Create a new page called TheGrid.html Go to the zurb site and download the zurb package with all the required javascript and css stylesheets and include it in your solution. Replace the contents of your HTML with this scaffolding.
<!DOCTYPE html>
<!--The no-js class is to assist modernizer in checking if you have javascript support-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<!--This will ensure that users see the site at their native resolution.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation 4</title>
<link rel="stylesheet" href="content/foundation/normalize.css" />
<link rel="stylesheet" href="content/foundation/foundation.css" />
<script src="Scripts/custom.modernizr.js"></script>
</head>
<body>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'scripts/zepto' : 'scripts/jquery') +
'.js><\/script>')
</script>
<script src="Scripts/jquery-2.0.1.min.js"></script>
<script src="scripts/foundation/foundation.js"></script>
<script src="scripts/foundation/foundation.alerts.js"></script>
<script src="scripts/foundation/foundation.clearing.js"></script>
<script src="scripts/foundation/foundation.cookie.js"></script>
<script src="scripts/foundation/foundation.dropdown.js"></script>
<script src="scripts/foundation/foundation.forms.js"></script>
<script src="scripts/foundation/foundation.joyride.js"></script>
<script src="scripts/foundation/foundation.magellan.js"></script>
<script src="scripts/foundation/foundation.orbit.js"></script>
<script src="scripts/foundation/foundation.placeholder.js"></script>
<script src="scripts/foundation/foundation.reveal.js"></script>
<script src="scripts/foundation/foundation.section.js"></script>
<script src="scripts/foundation/foundation.tooltips.js"></script>
<script src="scripts/foundation/foundation.topbar.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Now your page is all set to start designing.
Some notes on the above code:
- Note the initial scale of the viewport which ensures that users see the page in their native resolution.
- The normalize.css stylesheet is for cross-browser normalization. Just by linking this stylesheet, you have ensured that your website looks the same across all browsers.
- The foundation.css is where the real magic of foundation lies. The script at the bottom is really important. $(document).foundation(); initializes the foundation framework on the page.
- Now that we have our page skeleton, lets start designing.
Inside the body, create a row. You do this by creating a <div> and setting its class to “row”
<div class="row">
This row will span the full length of the page. So we will assign it all twelve of the columns in the row. To do this, create a div inside the row and set its class to “large-12 columns”.
<div class="row">
<div class="large-12 columns">
Let’s add some contents to this div:
<div class="row">
<div class="large-12 columns">
<h2>Welcome to Foundation</h2>
<p>This is version 4.2.1.</p>
<hr />
</div>
</div>
That does it for the top of the page. Now we want to add some content under the heading. So we add another row underneath your first one, but this time we cut the contents in two horizontally. One side will use 8 of the 12 columns and the other 4.
<div class="row">
<div class="large-8 columns">
<h3>The Grid</h3>
</div>
<div class="large-4 columns">
<h4>Getting Started</h4>
</div>
</div>
Zurb’s grid system supports nesting. This means that we can put a row inside a div and then specify how it’s contents must be divided as well. Notice how we can now create another row inside our 8 column div and assign it a number of columns.
<div class="row">
<div class="large-8 columns">
<h3>The Grid</h3>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
</div>
<div class="large-4 columns">
<h4>Getting Started</h4>
</div>
</div>
Thats too easy. Lets add yet another row inside our 8 column div, but this time divide it straight down the middle. 6 columns a side:
<div class="row">
<div class="large-8 columns">
<h3>The Grid</h3>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
</div>
</div>
<div class="large-4 columns">
<h4>Getting Started</h4>
</div>
</div>
Important!!! Your columns inside a row must always add up to twelve or else you will start to see some really funny results.
Now lets add another row inside the 8 column section, but this time cut it in 3:
<div class="row">
<div class="large-8 columns">
<h3>The Grid</h3>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
</div>
</div>
<div class="large-4 columns">
<h4>Getting Started</h4>
</div>
</div>
Let’s add a last row to the 8 column section and show off how buttons look with the Zurb styling:
<div class="row">
<div class="large-8 columns">
<h3>The Grid</h3>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
</div>
<h3>Buttons</h3>
<div class="row">
<div class="large-6 columns">
<p><a href="#" class="small button">Small Button</a></p>
<p><a href="#" class="button">Medium Button</a></p>
<p><a href="#" class="large button">Large Button</a></p>
</div>
<div class="large-6 columns">
<p><a href="#" class="small alert button">Small Alert Button</a></p>
<p><a href="#" class="success button">Medium Success Button</a></p>
<p><a href="#" class="large secondary button">Large Secondary Button</a></p>
</div>
</div>
</div>
<div class="large-4 columns">
<h4>Getting Started</h4>
</div>
</div>
Finally, let’s add some content to that 4 panel section on the right of the page:
<div class="row">
<div class="large-8 columns">
<h3>The Grid</h3>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
<div class="large-6 columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
</div>
<h3>Buttons</h3>
<div class="row">
<div class="large-6 columns">
<p><a href="#" class="small button">Small Button</a></p>
<p><a href="#" class="button">Medium Button</a></p>
<p><a href="#" class="large button">Large Button</a></p>
</div>
<div class="large-6 columns">
<p><a href="#" class="small alert button">Small Alert Button</a></p>
<p><a href="#" class="success button">Medium Success Button</a></p>
<p><a href="#" class="large secondary button">Large Secondary Button</a></p>
</div>
</div>
</div>
<div class="large-4 columns">
<h4>Getting Started</h4>
<p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<h4>Other Resources</h4>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<ul class="disc">
<li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />
Everything you need to know about using the framework.</li>
<li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />
Latest code, issue reports, feature requests and more.</li>
<li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />
Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
</ul>
</div>
</div>
And there you have it. With this fluid grid system and the ability to nest grids, you have infinite choices in how you want to lay out your page.