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.

Tags ,

Comments (36)

  1. I’ve tried both Zurb’s Foundation and Bootstrap and both have a bit of a learning curve, especially with LESS and SASS. If wishes came true, I would wish there was a way to by-pass the new CSS compression techniques (on each framework) for another day. When I’m ready.

    • You actually don’t have to do anything with the preprocessors. Each outfit offers a zipped up package with the compiled CSS like you’re used to working with. They just also have the ability to be used with their respective preprocessors.

  2. Wonderful article, Sarah! Thank you!

    I am in the midst of creating my own parent theme based on Foundation and did not know about Required+. I tried out the other two themes and found them to be a bit buggy.

    In any case, I have enjoyed using Foundation and appreciate the write-up!

    • @themightymo. We’re in the same boat. I am working on creating my own parent theme based on Foundation too. I looked at Reverie and didn’t like it. I also didn’t care for WP-Foundation. This is the first I’ve heard of Required+. I’m definitely going to check it out. Thanks for a great post Sarah!

  3. Thank you Sarah for this comprehensive article about Foundation as a alternative framework to Bootstrap and the mention of our required+ Foundation parent theme.

    If any of you readers have questions regarding required+ Foundation, I’ll stick around in the comments for a while. (I am the guy who leads the development of required+ Foundation, in case you were wondering.)

    • I loved the article too. Thanks Silvan for offering to look at questions. The more I delve into required+ Foundation, the better I like what’s possible. I keep finding new things I can do easily. I am having a little trouble sorting out the css. The first thing that’s got me stumped is changing the color on the menus. Are there any tutorials on styling the menus or css explanations?

      Would compass help with this or is that just for Foundation?

      Are there any forums you would recommend to learn more?

      • Tutorials: So far there are no tutorials on styling the CSS menu of required+ Foundation, but you can check out our docs and the news section on our website for required+ Foundation.

        Compass: We are currently working on required+ Foundation 1.1.0 and there we will implement SCSS as well, so this should cover you.

        Forums: I strongly recommend visiting the Google Group for Zurb Foundation, because there are a lot of topics and hidden gems.

      • barryn – to change the colours of the menus you just need to add styles to overwrite the default zurb.css ones, you can add these in the required+ Foundation child theme’s ‘style.css’ file and they will take priority over the default styles – the child theme is named ‘required starter’ and comes in the “all-in-one” package on the download page.

        You can find the un-minified default stylesheet in the download package at / themes / required-foundation / stylesheets / foundation.css

        Search the style sheet for ‘nav-bar’ to get an idea of what styles you may have to override, most of them are around lines 483-525. A good idea could be to copy these styles into your child-theme’s style.css and then change the values to suit; the blue is #2ba6cb with a border colour of #2284a1, and the dark grey is #333, there may be some other colours associated with flyouts, active and hover states etc.

        I hope this helps

  4. Thanks Sarah, Boostrap and Foundation are sure to impact how WordPress themes are developed in 2013.

    I had been developing my own foundation starter for WordPress, mainly as a way of getting to grips with it and having reviewed the others. I hadn’t come across required+ though.

    I am still going to develop my own because as far I can see all the existing WP foundation themes don’t actually help harness the power of foundation and SASS. In fact they seem to make it all rather restrictive.

    One major gripe is that they all seem to insist on using non-semantic css in grid layouts. E.g. required+ has “eight columns” for its main content area.

    The beauty of using SASS and foundation is (or should be) that you can create layouts with sass mixins without the need to define your columns in the html.

    The main problem here is that most of the foundation starter themes I’ve looked at don’t really give you a baseline that allows you continue building with SASS.

    Sure, all the lovely foundation code is ready to use as plain old CSS which is fine for some users, but this makes these themes no different to ordinary themes. They give you the “look” of foundation but not the SASSY goodness and power it can offer.

    Perhaps I have missed something, but if someone knows a Foundation WordPress starter that is all SASSed up and ready to go with better semantic code, then I’d be very interested.

    • Hey Tim, these are fantastic inputs and I’ve seen that http://320press.com/wp-foundation/ is using SASS in their Foundation theme already.

      Working on required+ Foundation, I’m still looking for a way to integrate SASS in our theme as you can read here http://themes.required.ch/news/roadmap-to-required-foundation-version-1-1-0/. The idea is to integrate it in a way that you can use the power of Foundations SCSS files, while still giving users the option to use plain old CSS. In case you have any good suggestions on how the implementation could be done in a flexible manor, please get in touch with me, as I’m still fairly new to SASS, but not WordPress ;-).

    • Mixins are usable for layout, but my current experience shows that if you need to do some more complex row->column->row->etc nesting (either with mixins or .row .column inside elements made with mixins) … you need to make you own mixins. (or, possibly, I have completely misunderstood something)

      Still, as I chose Foundation namely for possibility to use mixins (so I can convert existing projects to Foundation without changing HTML too much) I have created a child theme that ties together Thematic and Foundation. Everything is nicely SASSy (just JS is merged using Codekit proprietary @codekit-append, needing a better solution to work with plain Compass watch).

      Resulting Foundation-base is available at https://github.com/petskratt/foundation-base/

      * requires Thematic
      * works as child-theme, needs some rearrangement for easier updates (both Foundation and child theme)
      * just add as a project to Codekit and enjoy (should work with Compass as well, just foundation.min.js is merged in proprietary way)
      * I’m thinking about ways to add some hooks to Thematic that would make it easy to emit (non-semantic) classes and move away from producing main layout with mixins… but that sounds like forking Thematic

      • There are times when you have to use non semantic selectors, such as “eight columns”.

        BUT the #main div in the theme should not be tied to the eight column layout.

        Using SASS the developer using the starter theme should be able to use SASS, using something like:

        columns(8)

        That way layout is configured in the SASS without touching the html code and the code is more semantic.

  5. Great writeup! Thanks for taking the time to include a feature comparison chart and listing a few class name examples. The only thing holding me back is my need to support IE7.

  6. I have one beginner questions about the visibility classes in foundation:
    Is it wise to use them? I think I have read somewhere you shouldn’t use these classes because the content will be loaded nevertheless on a mobile phone for example.

    So maybe the huge slider will be hidden but in the background the big images will be loaded. That seems not very mobile friendly if you are concerned about a nice loading experience.

    Or do I remember something wrong?

    • You are right. These basically add display:none; to element which as you say doesn’t prevent them from being downloaded along with any supporting baggage.

      But Zurb’s visibility classes are intended for “prototyping”, so don’t blame them!

      This is an area where RWD will need to improve in 2013. The first generation of responsive designs have relied rather too much on display:none and generally are not all that great on a mobile. While they do resize to fit small screens, they still come rather heavily laden with images and scripts often simply hidden from view.

        • http://timkadlec.com/2012/04/media-query-asset-downloading-results/

          Orbit supports arbitrary content divs (using a set ratio to scale fluidly) so it is possible to make slides that will not download images on mobile, or can download a smaller image etc – you simply need to apply the visibility conditions within the orbit slides rather than to the slider as a whole and use a wrapper div and background image combo as described in the linked article.

          It’s a bit of a workaround but if you’re serious about RWD it’s probably the best we’ve got to work with right now except UA/server side asset switching or a asset replacing JS.

          Each slide would look something like this, and you’d need some CSS to make it all look good/align.

          key css:
          .vc-wrapper div { background-image: url(‘../images/yourimage.jpg’)}

          you could also add perhaps a h2 and a paragraph inside the “orbit-slide” div with “show-for-mobile” classes so that mobile users get a text slide rather than nothing. The addition of these extra divs and the css markup is very trivial size wise compared to downloading an image.

  7. PROBLEM:
    I came across a bug: when viewing http://320press.com/wp-foundation/ on a mobile device such as an iPhone in landscape view. The iphone landscape view does not fit screen. The width of the page extends beyond the width of the screen.

    SOLUTION:
    The problem can be found in the header.php file.
    instead of:

    use:

    My site shows up correctly on mobile devices when viewed as landscape: http://mobyinteractivemedia.com

    wordpress responsive design issue with mobile device landscape. wp-foundation zurb

    • Problem:
      <meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

      Solution:
      <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”>

      (Sorry, I needed to convert the statement to ascii code.)

  8. PROBLEM:
    I came across a bug: when viewing http://320press.com/wp-foundation/ on a mobile device such as an iPhone in landscape view. The iphone landscape view does not fit screen. The width of the page extends beyond the width of the screen.

    SOLUTION:
    The problem can be found in the header.php file.
    instead of:

    <meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

    use:

    <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”>

    My site shows up correctly on mobile devices when viewed as landscape: http://mobyinteractivemedia.com

    wordpress responsive design issue with mobile device landscape. wp-foundation zurb

  9. I am working to develop a multisite project using Foundation 4. While I am not a very experienced developer, I would like to engage with anyone at WPMUDEV to develop a multisite/buddy press enabled Foundation 4 based theme.

    I don’t know that I bring anything to the table beyond enthusiasm, but I will otherwise be going alone on developing child themes based on required+ or something like responsive (CyberChimp).

    Minimally can a group be established on WPMUDEV for for Foundation 4?

  10. Before I download and experiment, does anyone know if the required+ extra shortcodes are client-friendly in terms of having an input via an interface element? Or can they only be input by keying the shortcodes?

Participate