📖 Chapter 3—Using Zurb Foundation
The modern CSS framework.
- Quick starting Zurb Foundation on Codepen
- Setting up Foundation
- Foundation grid
- Block grid
- Interchangable content
- Push and pull column
- Flex video
- 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.
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.
To download Foundation, there are 4 ways: Full package, Essential, Custom, SASS source.
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.