📖 Chapter 3—Using Zurb Foundation

The modern CSS framework.

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.

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.

https://cdnjs.com/libraries/foundation

Using Foundation in Codepen

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

I recorded a video on this topic.

https://vimeo.com/makzan/using-foundation-in-codepen

Downloading Foundation

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

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.

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.