Foundation

With the explosion of smartphones, tablets, and other web-enabled devices, more and more people are using mobile devices to hop online. The mobile traffic is expected to leave desktop traffic in the dust by 2013.

Consider this — mobile users are expected to triple to a whopping one billion. Websites can no longer afford to be stuck in 960px Photoshop templates. Not designing for mobile would be suicide, because we'd be closing the door on a potential one billion customers. Our designs can't be trapped in only Firefox, Chrome, Safari, and Internet Explorer. They have to look spectacular on smartphone and tablet operating systems, such as iOS, Android, and Windows.

One thing is certain — the old ways of web design no longer apply.

There has to be a fundamental shift in the way we design and how we prototype. We delved deep into this problem and came up with Foundation, but it didn't start life out as a responsive framework. Far from it.

Prologue to Foundation

Foundation, believe it or not, had its origins in the ZURB style guide. Years ago, we decided that it was time to wipe the dust off our boiler plate of code and our old framework grid, giving them a nice polish. We wanted to make it crystal clear on how we used CSS in our design work. However, as we really got into it, we figured we'd better do a little bit more than give it a new sheen.

We decided that what we needed was a coding framework that allowed us to rapidly prototype. To that end we took all of our best practices, global CSS, jQuery plugins and common elements from around the web and Frankenstein'ed it into Foundation. At the time, Foundation a was fixed grid, and wasn't responsive one bit.

And then something wonderful happened …

Second Foundation (or Foundation 2.0)

Hal 9000: What is going to happen, Dave?

Dave: Something wonderful.

Hal 9000: I'm afraid.

Dave: Don't be.

"2010: The Year We Make Contact"

That something wonderful wasn't Jupiter being ignited into a small star. It was the brave new world of mobile devices. The landscape of devices had changed and we knew we needed to have a more functional design, where the way we comp works on different screens, in different orientations. We had to transform Foundation 1.0 into something wonderful, something better than just a fixed grid. We had to make it fluid and responsive.

That meant it had to be a rock-solid, 12-column grid foundation (pun fully intended) that adapted to different screen sizes through precentage-based widths as well as media queries. We had to be able to quickly lay out complex pages without fretting that they would degrade on an iPhone or Android tablet. We had to have a prototype to see exactly how our designs would look on all these different sizes and devices. That's because everything changes once you can see and touch your designs.

With that in mind, we went a hacking and came up with Foundation 2.0. However, for designers to prototype faster than a speeding bullet, they need more than a grid. That meant typography, buttons, tab, pagination, image grids, forms and more had to be included.

Foundation And Code

Foundation couldn't just be all about prototyping. It had work equally as well for coding up an entire site. We've used Foundation to build several of our own sites, such as our blog and even our homepage. Foundation was a big help when building the sites for a few of our apps — Spur, Reel, Axe, and Influence, to name a few. Foundation also came in handy when we built the Word Dynamo site from Dictionary.com.

We really put Foundation to the test during last year's ZURBwired design marathon, where we built the site for Rebekah Children's Services within 24 hours

.

On Foundation's Edge

Since releasing Foundation, we've continued to refine and update the framework, using Git to keep track of versions and comments, but also using Github to keep on top of bug reports, feature requests, discussions and contributions. We've deployed many updates, including a fancy mobile grid.

Third Foundation (or Foundation 3.0)

Foundation 2.0's release was followed by 12 updates, each building on each other to create the best responsive framework possible. But after deploying final iteration version 2.2, we realized that providing tools to build things faster just isn't enough. The new Foundation 3.0 aims to be the fastest way to build better-designed future friendly sites. In order to accomplish this, we significantly revised Foundation and fundamentally re-examined our approach to the framework.

In addition to a sleek website makeover and all new case studies, Foundation 3.0 has evolved to include a variety of new features. Some of them are listed below, and a full documentation is available on GitHub.

• Fully SCSS integrated. Foundation 3.0 is written entirely in SCSS, which really helps us build the most flexible possible framework.

• The Customizer. When downloading Foundation 3.0, the Customizer will let you tailor the grid system to your own needs. You determine how many columns you want, what size the buttons should be, what colors to use and whatever else strikes your fancy.

• Off-canvas layouts. We're adapted four different patterns of off-canvas layouts that you can easily use for your layouts. Each pattern has a very specific small-device layout, as well as a similarly specific larger device layout (tablets or desktops).

• New typography. The new typography will be based on a modular scale that utilizes ratios derived from the Golden Ratio and musical scales for maximum visual perfection.

• Modern CSS properties. The modular-scale is just the tip of the iceberg. We’ve included the fastest and newest CSS properties that will let you customize elements and offer greater control over the design process.

Foundation and the World

We've also been making the rounds, speaking about Foundation and how it helps people with responsive prototyping. Take a look at Matt, our lead engineer, speaking at SF HTML5 Meetup :

Bonus points for guessing what science-fiction book series inspired the titles in this post.

Check out more of Foundation's features on the Foundation website, foundation.zurb.com. You'll find examples, case studies, documentation, Github repo and a downloadable scaffold to start from.

Check out Foundation »