Zurb Releases a Flexible Foundation for Developers and Designers

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Thanks to the success of projects such as HTML5 Boilerplate, companies big and small are increasingly giving back to the dev and design community by releasing pre-packaged toolkits and frameworks to make getting projects off the ground easier and less time consuming.

Back in August, Twitter released Bootstrap, its own front-end toolkit for rapidly developing web apps. Bootstrap is a remarkable toolkit, providing developers with access to a well-structured grid system, various layouts, styles for buttons and forms and more.

Twitter released Bootstrap on GitHub, and more than 8,000 users are currently “watching” the project and it has been forked more than 1,200 times.

Interaction design and strategy company ZURB — known for its web apps Notable and Chop — has decided to offer its own framework for web apps, the aptly named Foundation.

Foundation, now in version 2.0, includes a boilerplate, CSS, JavaScript and assorted plugins. What separates Foundation from other toolkits — like Bootstrap — is that it was designed from the ground up to be responsive and work on a cross-section of devices.

What’s In a Foundation

Foundation consists of a few different components to make building a website or web app less challenging. These include:

  • A semi-liquid mobile-scaling grid system
  • Pre-styled CSS3 buttons with options for sizes and colors
  • Pre-styled forms
  • Zurb’s jQuery plugins Orbit and Reveal for easy sliders and modal windows

Foundation in Action

ZURB is already using Foundation on a number of its projects — including its ZURBsoapbox. The company put together a set of case studies showing off how Foundation can be used to speed up the web development process.

Our favorite aspect of Foundation is the ability to hide or show elements based on the media query (screen resolution) of a website. This means that when viewing a page on the iPad or iPhone, a link to non-Flash MP3 audio player becomes visible.

Future Improvements

Like Bootstrap, ZURB is hoping to continue to add new features and additions to Foundation. Users can grab the project on Github and contribute their own feedback or fork it and use it the way they want.

We would love to see a base WordPress theme or framework created from Foundation.

What do you think of the trend of toolkits and quick-start frameworks that emphasized HTML5, CSS3 and mobile device support? Let us know in the comments.

Series Supported by Rackspace


The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More About: css3, features, HTML5, web development series, zurb

For more Dev & Design coverage:

This entry was posted in css3, features, HTML5, web development series, zurb and tagged , , , , , , , , , . Bookmark the permalink.