Zurb’s newest offering for developers: Foundation

Wdd Logo.
January 05, 2012
foundationZurb

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 foundation@​zurb.​com.

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.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…