Today ZURB is excited to release Foundation, an open-source front-end framework to help you more quickly put together sites and apps that work on any device. You can check it out right now at foundation.zurb.com, or read on to learn more about it.
Why should you use Foundation?
We built Foundation to help you quickly prototype sites and apps so you'll understand how they look and work on any kind of device sooner. You can then easily adapt that prototype into final production code, so you stay efficient.
The landscape of devices is changing rapidly — new mobile phones, tablets, and other Web-enabled devices are being sold every day. Traditional Web design, with 960px Photoshop templates and comps, no longer applies.
What we have to do now is a more functional kind of design, where the way a comp works on different screens, in different orientations, is important. We need a coding framework that supports a workflow where we look at designs in different sizes and orientations, and can quickly translate them into something functional. We built Foundation after we realized our existing front-end code, and other existing frameworks, wasn't up to the task.
Foundation includes a rock-solid, tested, 12-column grid which is both fluid and responsive. It adapts to different screen sizes through percentage-based widths as well as through media queries. That means you can quickly lay out complex pages without worrying that they won't show up right on an iPhone, or an Android tablet, or a Blackberry, or a TV. You'll be able to see exactly how they look, and how they adapt to different sizes, then plan accordingly.
Foundation isn't just about the grid though - we built in all the tools you need to quickly prototype an entire site. That means typography, buttons, tabs, pagination, image grids, forms and more are all included. We also included some of our most popular JS plugins, Orbit and Reveal, so you can handle image/content sliders and modals (all completely responsive).
What should you use Foundation for?
Foundation is made to be equally suited to rapid prototyping on desktops and mobile devices as well as to adaptation into final production code. We've already used Foundation for a number of sites like Spur, Reel, Axe, this blog (try it!), Word Dynamo from Dictionary.com, and Rebekah Children's Services (this year's ZURBwired) — with more sites coming up in the very near future.
If you're starting a new site, or you're ready to bring an existing site into a brighter, device-agnostic future try out Foundation — we think it will come in handy. Foundation is MIT-licensed so you can use it however you'd like for free, and you can visit the Foundation site to download a ready-made scaffold or check out the entire project on Github.
We'd love to hear your feedback!
Foundation was a labor of love for us, dating back to our old global CSS through countless work sessions and code iterations. We're sure there are things it could do and doesn't, and things it does now that it could do better, so let us know! You can email us at [email protected] or report issues and requests through Github.
If you use Foundation let us know — we might even feature you on the Foundation site!