New Class: How to Use the Zurb Foundation Framework

How to Use the Zurb Foundation Framework

Zurb Foundation is a very popular alternative to the Bootstrap framework. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails.

This week’s new class is “How to Use the Zurb Foundation Framework“. Follow along with these videos. You’ll take a non-responsive HTML website and convert it into a powerful, responsive, grid-based design.

We recently published a class on Bootstrap, and there’s another class coming in December on UIKit, so you’ll be able to easily compare these design frameworks.

What’s in the Zurb Foundation class?


  • Introducing and Installing Zurb Foundation

The Foundation Grid

  • How to Create Your Zurb Foundation Grid
  • Building Out the Foundation Grid
  • Finishing the Foundation Grid


  • Adding Content into the Foundation Design
  • Nested Block Grids For Content
  • Using Modal Pop-ups in Zurb Foundation
  • Foundation Slideshows With the Orbit Slider


  • Responsive Dropdown Menus in Foundation
  • Continuing with the Responsive Dropdown Menu

More Foundation

  • How to Use Foundation Icon Fonts
  • Finishing Your Foundation-Based Design
  • Zurb Foundation Quiz


  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x