Part 2—Zurb Foundation Grid

6 Using Zurb Foundation

There are Foundation for Sites and Foundation for HTML Email. What we focus here is the “Sites” part.

Foundation Sites and Email

Kitchen sink#

The Foundation’s kitchen sink page shows everything that Foundation can do.

It is also the document site for Foundation.

Setting up Foundation

The easiest way to start using Foundation is to use their CDN version in your code project.

Using Foundation in Codepen

Alternatively, you may use Codepen to quickly try out Foundation.

I recorded a video on this topic.

Downloading Foundation

To download Foundation, there are 4 ways: Full package, Essential, Custom, SASS source.

Foundation download page

Foundation is a library with both css and javascript code.

If we don’t use any components that required javascript, we can omit the javascript part and just include the css.

Customizing Foundation

If you need to customise the layout or the framework variable, you can customise the variables in their download page before downloading. The website will compile the custom build for us.


Using Zurb Foundation Copyright © by makzan. All Rights Reserved.

Share This Book

Notice: 2nd edition update is work-in-progress. See update logs for details.