ZURB’s Foundation FTW
In the same way my kids are big fans of Zurg, I’m a fan of ZURB. For those who reside under rocks, ZURB are an ever-growing, team of product designers out of Campbell, California, who help companies design better websites, services and online products. Impressively, they’ve worked with more than 200 startups since 1998. Check out their new digs and plans for world domination.
I’ve been using several of ZURB’s UI & UX apps over the last few years (thanks @MarkLamb), but my favourite by far, has to be their responsive framework, Foundation. For me, it’s head and shoulders above the likes of Twitter Bootstrap, Less Framework and The Semantic Grid System. Its grid’s mark-up is structured as follows -
01 <div class="row">02 <div class="twelve columns">03 This is a twelve column section in a row.04 </div>05 </div>06 07 <div class="row">08 <div class="six columns">09 Six Columns10 </div>11 <div class="six columns">12 Six Columns13 </div>14 </div>
My colleagues and I released a financial services company’s site this week, which leveraged Foundation 2, and we couldn’t be happier with the result.
Foundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff.
Foundation’s OOTB styles meant we had a clickable prototype ready for our first showcase, and while responsiveness was deemed out of scope for the first release, Foundation meant we had mobile and tablet largely covered, which really impressed our customer and the site’s users alike. Unlike wireframing tools like Axure, Foundation boasts production ready code, so we saved a lot of front-end development time.
Since go-live earlier in the week, we’ve already looked into ZURB’s jQuery tour tool, Joyride. Today, Foundation 3 was succeeded by Foundation 3.1. Get it on Github. It seems planet ZURB is taking over — can’t wait to see what they produce next.














