Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Case Study

How They Did It: The Foundation Framework


These days, there are two approaches to developing a website front-end; start from scratch, or build upon a tried and tested framework. Today, we'll take a little tour into the origin and the still rising success of ZURB's Foundation.

We had the opportunity to sit down with Founder and Chief Instigator Bryan Zmijewski, and Partner and Design Lead Jonathan Smiley about their framework. We talked about how Foundation started, why it's open source, which significant milestones and challenges the team crossed and continue to face.


The Interview

Q Why was Foundation initially built?

For years we had a coded style guide at ZURB, a set of base styles and useful constructs that we would use to begin most client projects. We realized after a while that it would be even easier for us to use if we abstracted it out, added some other common components, and standardized how we wrote the code. Faster to bring new people up to speed, faster to execute for clients. That was the first version of Foundation, which we didn't release publicly and was not responsive – but it was a framework, and it lead us to make a responsive one and release it.

Q What was the reason for you making Foundation open-source?

Foundation as an open-source project has reached many more people than it would have as a product, or some sort of purchased item. We want to shape how people build for the Web, and to do that we needed to go big. Open source enabled us to do that – and in the process it has been a great efficiency tool for us, a great marketing tool, and a great source of exposure for everything ZURB does.

Q What did you expect to happen when you released Foundation 2 to the public?

Certainly nothing like what did happen. Responsive design was pretty new and ill-understood, so Foundation had to not only convince people to use a framework at all but also to do it in a way they were unfamiliar with. In spite of that it was pretty popular right off the bat, and each release has been another order of magnitude on top of that.


Q What has been the main goal of Foundation since you made it open-source?

To push the Web forward. We always try and bring new technology and practices to people in an easy to use way so we can make the Web better and better. By putting stuff out there it pushes us to be better product designers.

Q Tell us about the major milestones when publishing Foundation 2, 3, 4 and now 5?

Foundation 2 was about getting responsive design in front of people. Foundation 3 was about doing it in a smarter way, using Sass to build the framework. Foundation 4 was about coding smarter, and we redid the entire framework to be Mobile First in collaboration with Luke Wroblewski. Foundation 5 is about making it fast: fast to learn, to write, and to execute for customers.


Q What problems and challenges did you encounter during the development of each release?

Whew, lots? It's always daunting to build out a framework and make changes that impact more and more people every day. You have to make decisions for them about how they build and what pieces they have to work with, and what the changes will be for each new version. That's a constant struggle and point of concern, making the right decisions in an untested field with new technology.

Q In what way do you think that Foundation contributes to today’s fast changing world of devices and screen sizes?

Foundation makes it possible to build things that scale to any device – not just current ones but future ones too. There are new devices every day – getting anything done on those is difficult when they don't exist, unless you plan for what devices have in common and how they ought to work. Foundation is designed to be as robust as we can make it when it comes to the many many thousands of devices out there.

Q There are some other big responsive frameworks out there, do you feel like you are in a competitive market, even though it’s open source?

To some extent. We all compete for attention, users, exposure. But we're also driving each other forward, iterating quickly to keep up or get ahead...it's a reasonably friendly and overall positive competition going on in this space.


Q Has it ever been the intention for Foundation to be more than just a wireframing tool? Considering the fact that it can now be used to create fully developed websites using a customized version of the basic download?

Foundation has always been more than a wireframing tool for us – every client site we produce, every product we launch or site we have (that's been built out since Foundation was out) includes Foundation inside it. We do expect it to be customized every time, we don't want base Foundation looking sites out there, but it's been more than just a wireframing tool for us.

Q What has been one of the greatest innovations during the development of Foundation?

Switching to a CSS preprocessor. We build the entire framework with Sass (well, Scss) and it has enabled us to build more quickly, abstract things out more effectively, and even produce a version of Foundation that can be used completely semantically which is huge.

Q So guys, one final question: when you created this internal style guide for ZURB in 2007, would you have ever guessed it would be one of the most popular frameworks designers and developers over the world work with these days?

Of course. World domination baby! :) The real is answer is that we pursue excellence in all our work. We don't always have the right timing, team or skills for every project to be a homerun, but we show up every day and work hard on our goals. Sometimes luck plays a factor.


Wrapping up

We would like to thank Bryan and Jonathan for taking the time to get into their story. If you haven't yet dived into Foundation, we hope this interview has sparked your interest!


Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.