📖 Chapter 3—Using Zurb Foundation

The modern CSS framework.

Foundation website

  1. Quick starting Zurb Foundation on Codepen
  2. Setting up Foundation
  3. Foundation grid
  4. Block grid
  5. Interchangable content
  6. Push and pull column
  7. Flex video
  8. Off canvas

Foundation is a CSS framework that’s built for the, well, foundation of any website. It includes a solid grid system, different interface components. And most importantly, it is mobile first.

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.

Next Page → Foundation grid

← Previous Page Do mobile web has to be a webpage?

Last updated at 2017-04-19. Show version history


no comments yet.