Build Beautiful WordPress Sites With Zurb’s Responsive Foundation Framework

Living mostly in the shadow of Twitter Bootstrap is a powerful CSS framework that is just now making its way into WordPress themes. Billed as “freakishly advanced”, with support for literally any grid size from mobile phone to TV, this is one framework that can no longer be overlooked. Today we’re going to explore Foundation, the MIT-licensed front-end framework created by ZURB, Inc.

With several successful case studies already under its belt, Foundation is rapidly gaining popularity for use in high profile websites, such as Pixar and National Geographic. This full-featured responsive framework offers a few advantages that some developers find to be sorely missing in Twitter Bootstrap. Let’s take a look under the hood, compare some features and check out options for using Foundation with WordPress.

A Powerful CSS Framework Represented By A Super-Nerdy Blue Yeti

Foundation contains all the components necessary for quick prototyping, which is really the entire point of using a CSS framework. The ability to build fast is a high priority for front-end devs on a deadline. Foundation was created to allow you to quickly whip together prototypes and production code for modern sites and apps that will look beautiful on virtually any device. Check out ZURB’s new responsive showcase for some inspiration.

Build Fast With Advanced Front-End Tools

If you’ve ever had to create flyout menus or webforms from scratch, then you’ve probably had the experience of wanting to poke your eyes out with a stick. Such experiences are what originally drove me to CSS frameworks. Foundation is particularly exceptional when it comes to making complex UI elements easy to implement. It also includes some innovative custom jQuery plugins that you won’t find in other frameworks.

Here is a quick overview of Foundation’s most notable features:

  • A fluid grid with support for nesting, source ordering, offsets and device presentation.
  • Multiple navigation styles, including a complex top bar that supports 3-level dropdown navigation for simple bars, sidebars and subnav pills
  • UI Elements for all the important stuff, like alerts, buttons, tooltips, accordions, tables, video, thumbnails, forms, pricing tables and more
  • Custom Clearing plugin to display responsive lightboxes
  • Reveal – a custom jQuery modal plugin for easy modal calls across all devices
  • Joyride – a cross-browser compatible plugin for giving users a tour of your site or app

How does Foundation Stack Up To Twitter Bootstrap?

It’s a bit absurd to consider this to be a war of the frameworks or even to identify the two as competitors, given that they’re both free to use, with Bootstrap under the Apache license and Foundation under the open source MIT licensing.

However, the more popular a framework becomes, the more widely it is adopted, sparking greater levels of contribution. In this area Bootstrap wins with a much larger ecosystem, which also translates to more tools available for WordPress developers. If stars on github are any indication of the current use of both frameworks, here’s how they compare:

Even though Bootstrap has a much larger ecosystem, there are some very strong reasons why you might want to consider Foundation over Bootstrap.

Quick Comparison:

This quick comparison chart demonstrates just a few of these frameworks’ most notable differences:

Semantic Classes:

Both frameworks contain an impressive number of UI components and javascript add-ons. However, if semantic classes are a big deal to you, then you’ll probably appreciate Foundation over Bootstrap.

Here’s a simple example of the difference in classes used to set column widths:

Bootstrap: .span1

Foundation: .one.column

Though both frameworks tend to use presentational classes, you’ll find Foundation tends to be a little more semantic.

Mobile Visibility Classes:

Foundation also offers a much greater level of flexibility and control with its feature-based visibility classes. This allows you to create a finely-tuned mobile presentation with different tweaks for screen size, orientation and touch.

For example, here are the responsive utility classes you get with Bootstrap:

  • .visible-phone
  • .visible-tablet
  • .visible-desktop
  • .hidden-phone
  • .hidden-tablet
  • .hidden-desktop

Foundation includes roughly three times the number of visibility classes:

    Screen size based:

  • .show-for-xlarge
  • .show-for-large
  • .show-for-large-up
  • .show-for-medium
  • .show-for-medium-down
  • .show-for-small
  • .hide-for-xlarge
  • .hide-for-large
  • .hide-for-large-up
  • .hide-for-medium
  • .hide-for-medium-down
  • .hide-for-small
      Landscape based:

    • .show-for-landscape
    • .show-for-portrait

Touch based:

    • .show-for-touch
    • .hide-for-touch

Print based:

  • .print-only
  • .hide-on-print

LESS vs. Sass

The LESS vs. SASS comparison would be enough for another post. Your preference in preprocessors is very much influenced by your workflow and how extensively you plan to use mixins. Also, Sass has Compass, an open-source CSS framework that helps you write cleaner code, an area where Bootstrap is lacking. Front-end devs who have a background in Ruby will have no problem getting started with Sass and Foundation, though an in-depth knowledge of Ruby is not required.

Options for Using Foundation with WordPress:

This often-overlooked underdog is starting to gain attention in the WordPress theme development community. There are actually quite a few solid WordPress theme options that are powered by the Foundation Framework, but these three are the standouts:

Required+

Required+ is a Foundation parent theme for WordPress. It is one of the newest options integrating the framework into your WordPress site.

This theme is very well done with commented code, extensive documentation and code examples to help you build something awesome with WordPress and Foundation working together.

Required+ features:

  • 6 custom page templates
  • 4 widget areas
  • Shortcodes for columns, alert boxes, Reveal modal windows, Orbit slider, Clearing galleries and tooltips
  • Improved post editor with custom styles dropdown

Download Required+ | View Demo

Reverie

Reverie is a versatile HTML5 responsive WordPress framework based on Foundation. This framework keeps the Foundation files separate so that you can update them at any time without any problems. Reverie uses a template structure inspired by Roots with loops separated from templates. It also stands out with its support for popular plugins such as bbPress and BuddyPress.

  • Clean image HTML output for TinyMCE, only class and alt are returned
  • Custom menu output for ZURB’s sub nav
  • Custom caption output for HTML5 figure and figcaption tags
  • Two widget areas: sidebar and footer
  • Two menus: top navigation menu and footer information menu
  • Several custom page templates included in the package
  • Support for bbPress 2.0 and BuddyPress 1.5, even without styling

Download Reverie | View Demo

WP-Foundation

WP-Foundation is a simple starter theme that includes a basic set of features to help you get started:

  • Four page templates
  • Theme Options panel for easily changing heading styles, main body text styles, link colors, show/hide homepage ‘Orbit’ slider of recent posts and more
  • A few shortcodes pre-styled with Foundation’s styles

Download WP-Foundation | View Demo

As you can see, Foundation is an exciting CSS framework full of promise. Because Foundation gives developers the power to quickly create websites without having to reinvent the wheel every time, there is little doubt that its ecosystem will expand in the same way Bootstrap has grown. A larger user base usually also means more themes and plugins will emerge to maximize the ways that Foundation and WordPress can play together.

With all of its features and potential, look for Foundation to quickly become a key player in the world of front-end frameworks. In the meantime, if you think that most Bootstrap sites all look the same, grab one of the above free WordPress themes based on Foundation and let us know what you think.