Mercury capsule

Introduction to the Foundation 5 Framework with Tutorials

I recently accepted a web development job that used the Foundation 5 front-end framework. If you know about Twitter’s Bootstrap framework, Foundation is a similar type of thing. It gives you a responsive grid and lots of design elements accessible mostly with just HTML and CSS. (For further info, check out this really handy comparison chart of responsive frameworks!)

After playing with it for a while, I really fell in love with Foundation!  But, I found that I had to hunt around the web for good free tutorial content on Foundation (Bootstrap is better documented).  Clicking “Learn More” on the Zurb (the company that produces Foundation) website leads to a registration form for a $299 class.  It was weeks away, so that didn’t work for me.

I did find some good free stuff online, so I’ve decided to put the best Foundation tutorial content that I found here!

Installation

Foundation takes a bit of set up because it uses the SASS CSS pre-processor (or more accurately, SCSS, “Sassy-CSS”). To compile the SCSS file, you’ll need to set up either Compass or Grunt.

All of this requires the command line, which is also scary for some people.  Note that most of the tutorials for this stuff assume you’re using a Mac.

I personally am using the FoundationPress starter theme for WordPress I used the setup directions on the FoundationPress GitHub page, and they ultimately worked for me (there were some errors during the install process and I had to repeat some of the steps).  When all was said and done, I had a FoundationPress theme installed in my WordPress site, and I had Grunt watching my SCSS files for changes to immediately process them into CSS.

If you are not using WordPress, here’s a video from the Zurb website on setting up Foundation.  This assumes you already have Git, Ruby and NodeJS, so you’ll have to go to those respective sites for installation instructions.

SCSS

I found the installation to be the most scary part of getting started with Foundation. If you’ve made it this far, congratulate yourself!

Another potential hurdle for using Foundation is that it uses SCSS.  Don’t let this scare you, as SCSS is quite amazing, easy to learn, and will ultimately improve your productivity compared to using plain CSS.

The SASS website has a pretty good overview of SCSS with examples.  Another good intro is this article from Mikkel Ricky.

I believe that many of the things that SCSS offers (such as nesting, variables, operators, etc.) are pretty intuitive. While working on websites, I’ve often wished that CSS offered these features!

Tutorial Videos

I found some great Foundation tutorial videos on YouTube from a Zurb-certified developer named James Stone. A self-described “Foundation fanatic”, James’ videos are very easy to follow, and he does a good job explaining Foundation best practices.

Foundation Components

If you want a clearer explanation of all of the command-line components you installed, this is a great video from James explaining it all:

As he mentions, you don’t need to be an expert on all of the components in order to use Foundation.

SASS and Foundation

This is a great tutorial video on getting acquainted with the SCSS file structure and how to make modifications to the default settings:

 Foundation Rows and Columns

This video is a great introduction to Foundation rows and columns:

 Foundation Grids

This video is not quite as useful as the previous one, but tackles a problem with Foundation grids:

Tutorial Articles

Tuts+ has a good set of tutorial articles on Foundation here.  Here’s a good article on how to build a fixed shrinking top nav bar.

Conclusion

I’ll continue to add any new Foundation tutorials I find here, so bookmark this page.

Have you found any great Foundation tutorials?  Let me know! – Brian

Leave a Comment or Ask a Question