Build Beautiful WordPress Sites With Zurb’s Responsive Foundation Framework

Build responsive websites with ZURB Foundation

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.

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:

Compare Bootstrap and ZURB Foundation

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.

Read full article here: Build Beautiful WordPress Sites With Zurb’s Responsive Foundation Framework – WPMU.org.