Web design framework scales your site for any device

Foundation, a new framework for web design, helps you make beautiful, consistent experiences across all kinds of personal computers, TVs and mobile devices, including tablets and a range of smartphones.

Seeing Framework’s magic in action is, well, a bit magical. As the screen resolution (or browser window size) changes, links become buttons. Images automatically resize. Layouts morph.

[aditude-amp id="flyingcarpet" targeting='{"env":"staging","page_type":"article","post_id":341895,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

Try it out yourself; go to one of the many sites built on Foundation, then manipulate the size of the browser window. Take it down to a tablet size, then a smartphone size, and watch the site change fluidly along with you.

The benefit of Foundation is that you, the designer, don’t have to customize each layout on a device-by-device basis.

“The framework does all the work,” said Dmitry Dragilev, lead marketer at design shop Zurb, which created Foundation. “People don’t need to worry about this stuff anymore.”

User experience these days lives on mobile as much as on the web. That’s why Foundation, a new building and prototyping framework for front ends, works across all platforms. Better still, it’s open source software; you can check it out on Github.

In some ways, the framework is a lot like Twitter’s open-source front-end framework, Bootstrap.

But Zurb representative Dmitry Dragilev says Zurb’s framework is superior because of its emphasis on multi-device scaling. “Bootstrap just works for desktop apps. The one we’re releasing is designed to work on any kind of device, mobile or not, and that’s crucial now that mobile web use has started to overtake desktop use.”

The basis of Foundation is the Grid, a layout framework that seamlessly scales your content across all form factors, including mobile devices, small screens, large desktops and even huge screens, such as Internet-connected TVs. The Grid is a twelve-column, semi-liquid “grid of awesomeness that you’re gonna love,” Zurb claims.

In addition to the Grid, Foundation includes a slew of tools for rapid web and mobile prototyping, including typography, tabs, buttons, image grids, pagination, forms and more. “We also included some of our most popular JavaScript plugins, Orbit and Reveal, so you can handle image and content sliders and modals,” stated Zurb in a company blog post.

[aditude-amp id="medium1" targeting='{"env":"staging","page_type":"article","post_id":341895,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

Finally, Foundation prototypes can be built into full sites for maximum developer/designer efficiency.

Dragilev said Dictionary.com already uses Foundation (check it out on their Word Dynamo app), as do a number of other sites and apps. Also, Zurb is presenting today at Mozilla’s WebFWD initiative for open web solutions.

Next, Zurb will be further refining the framework (squashing bugs and fixing edge cases), as well as adding templates, site generation, more common elements and even better mobile support.

Image courtesy of Juri Pozzi.

[aditude-amp id="medium2" targeting='{"env":"staging","page_type":"article","post_id":341895,"post_type":"story","post_chan":"none","tags":null,"ai":false,"category":"none","all_categories":"dev,","session":"B"}']

Check out DevBeat, VentureBeat’s brand new channel specifically for developers. The channel will break relevant news and provide insightful commentary aimed to assist developers. DevBeat is sponsored by the Intel AppUp developer program.