Zurb Foundation Framework Resources for WordPress Developers

For most web developers, Bootstrap is probably the first CSS framework that comes to mind. But it is not the only framework out there. For my own WordPress development work I’ve settled on using Foundation as my front-end framework. Foundation is a front-end framework created by the folks at ZURB, and it is actually one in a family of frameworks. The topic of this post is the original Foundation framework, or Foundation for Sites. It is different from the new Foundation for Apps, which is developed primarily for web apps.

Why Foundation?

I think developers should use a framework (or not) that they are comfortable with. There is no single best framework out there. That said, here are my reasons for choosing Foundation.

1. It uses Sass. When I first started with Foundation, Bootstrap was LESS only (though not anymore). I was comfortable with Sass, so that was one of the reasons I opted for Foundation.
2. It’s modular. When I work with the Sass files, I can pick and choose which components I want by commenting out imports that I don’t need. Not having to import the entire framework helps keep my file size down.
3. It’s actively maintained. The community around Foundation might not be as big as Bootstrap’s, but it’s still a pretty big one. While it’s open source, it’s backed by an agency called Zurb.
4. It’s feature rich. Foundation is packed with features, and can go pretty much toe-to-toe with Bootstrap. Need pricing tables? I know that’s an important one if you want to sell on ThemeForest…
5. It’s responsive. I suppose this goes without saying.

Learning Foundation

• Foundation Documentation: Start here to install Foundation and learn how to use each feature. A particularly useful tool is the Kitchen Sink that shows you all the elements in one page.
• Foundation Forum: Ask questions here if you get stuck.
• Foundation Templates:
• Zurb University: Zurb provides live, paid training for those wanting to learn Foundation. This is coupled with a live Q&A that is suited for those with specific questions.
• Treehouse: Treehouse is a great place to learn code. This particular course covers both Bootstrap and Foundation.
• Steve Zehngut’s WCOC Talk: Steve Zehngut of Zeek Interactive gives a good overview of how to integrate Foundation into Underscores.

WordPress Themes

• Hybrid Foundation: Created by yours truly, Hybrid Foundation integrates Foundation with Hybrid Core, my go-to theme framework.
• FoundationPress: Using Foundation 5.4.7 as of this writing, FoundationPress is a starter theme created Ole Frederik Lie. The demo faithfully follows the styles of the Foundation site. You’ll need to have Node, Grunt, and Bower installed to develop with the theme.
• Reverie: Reverie was one of the first Foundation WordPress themes I looked at, and I learned quite a bit from its code. The current build has been updated to Foundation 5, but as of this writing it’s only at 5.2.3.
• JointsWP: Joints looks like a promising Foundation starter theme meant to give you a blank start.
• Reactor: I’ve worked with Reactor before, and it’s got some good stuff going on. Unfortunately it looks like it hasn’t been updated and still runs on Foundation 4.

WordPress Plugins

If your theme supports Foundation, then you can consider these plugins that add Foundation features as shortcodes:

• Easy Foundation Shortcode
• Zurb Foundation 5 Clearing Gallery: this plugin focuses on Clearing, Foundation’s gallery lightbox feature. I must say, I really like how Clearing works (check out the demo) and this plugin just made it easy to hook it onto the native WordPress gallery