Zurb’s newest offering for developers: Foundation

Zurb has a long history of providing awesome web apps and resources for designers and developers. Their apps include Notable, Axe, Enroll, and Spur, among others.

Other resources from Zurb include everything from downloadable sketchsheets and grid paper, CSS buttons, CSS3 tools, visual effects & animation examples, and a lot more.

Zurb has recently launched a new tool for designers, called Foundation, a free rapid prototyping framework.

Zurb’s Lead Designer, Jonathan, answered some questions for us about the new project.

What is Foundation?

Foundation is a framework for quickly prototyping and building responsive sites and apps. It allows you to rapidly put together pages, including layout and common elements like navigation, pagination, forms and more so you can see how your site works on desktops, tablets and phones. Then you can take that code and customize or adapt it into rock-solid production code.

Why was Foundation built?

We realized that the tools out there for building responsive sites – sites that work on any kind of device – were not only insufficient but really non-existent. There are a number of CSS frameworks that people are using, but everything was designed for fixed layouts. Mobile devices will account for over half of all Internet traffic in the next 2 years, so not designing and building for them is a death sentence for online products or services. We wanted a tool that would let us not only deliver a great experience to every device, but to very quickly test out what a great experience really looked and felt like.

Talk about a site you had to use Foundation for? How did it help? What issues did you have to deal with?

We’ve used Foundation for all of our internal sites and projects for the last several months, but if I had to pick one great example it would be a web app we released recently called Spur. Spur is a tool for doing traditional design critiques by letting you capture a web page, or upload an image, and then view it with blur, heightened contrast, rotation and other effects that reveal how the visual design holds up. We designed it from the ground up with Foundation to support desktops, tablets, and iPhones; all from the same front-end codebase.

If you pull up the app on different devices you’ll see different tools and subtly modified layouts all made possible with Foundation’s mobile visibility classes. These let you easily tag elements to be hidden or shown on specific types of devices, such as ‘hide-on-phones’ or ‘show-on-tablets’. That and Foundation’s inherent ability to scale to most any size meant that Spur has a slick, tailored experience for any device type with very little additional effort.

Working entirely with percentages of course adds some complexity, especially regarding images and the flexibility of certain objects like toolbars but beyond some specific CSS Foundation took care of almost everything.

Who should be using Foundation?

Anyone who wants their site or app to be relevant in a couple years should be building for multiple devices, and Foundation is a good tool for doing that. Foundation is perfect for new sites that you want to quickly prototype and build, since you can lay out entire sites in just a few minutes using the flexible grid and common elements already included.

We’ve found Foundation to be especially helpful for companies or organization who have concerns about the cost (in time and resources) to build for mobile devices – Foundation helps you do things quickly and all at once.

What’s the future for Foundation?

We’re constantly working on Foundation, adding common elements that people have requested or we’ve seen a need for. We just recently added a new four-column phone grid so you can do more complex layouts for very small devices, and we’ll continue to work on device and pattern support. We’re also considering things like page templates, code packs for specific uses like wireframing, and working with outside developers on plugins for other frameworks like Less, SaSS, Drupal, WordPress, etc.

Our goal is for Foundation to be more than just an open-source Framework but a complete community and development approach for the front-end. We’d love to have even more contributors, both in issues, feature requests, and code on Github and we’re happy to answer questions at [email protected].

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.