If you aren’t already familiar with Zurb, they’re a “nimble team doing mighty things”. In other words they are a product design company from Campbell, CA. One of the most amazing products which they have designed is the Foundation web framework. Foundation is touted as “the most advanced responsive front-end framework in the world”. That title does not come easily in the land of web frameworks.
So what makes foundation so special? In my opinion it is the Rapid Prototyping and Mobility that you get when selecting foundation. Rapid prototyping is simple as building something quickly and iterating over your design until it is pixel perfect (or percentage perfect). Foundation comes jam packed with add-ons, features, and full fledged templates that can have you flying in no time. The mobility side of foundation is incredible. The framework is developed with the mobile-first mentality and it shines through. You are building for the future and zurb has built in media queries and device agnostic styles that allows it to display beautifully regardless of user-agent.
When it’s time to get down and dirty with some code you’ll want to check out the superb documentation at: http://foundation.zurb.com/docs/ . The framework allows you your choice of starting points. If you are a command line guru looking for high speed development install the ruby gem and begin by creating a compass project including zurb-foundation. More of a visual editor type of guy? Go ahead and download the master file set and begin tweaking the css and html files to your liking. If you are used to using ruby gems and compass you get a beautifully organized set of sass rules that are excellently devised to give the dev full control over the outcome.
The typical features that you will see with Foundation:
- The Grid
- Typography
- Button Styles
- Navigation
- Forms
- UI Elements
The extra wonderful features for some JS magic:
- Section: Tabbable Content
- Orbit: Responsive Slider
- Reveal: Modals
- Clearing: Gallery
- Magellan: Sticky Navigation
- Joyride: Website Tour Walkthroughs
- Tooltips
- Dropdowns
- Interchange: image sizing and replacement based on Media Queries
The project structure uses the common directory structure that is easily maintained. Want to cut out certain features and customize your build? Go ahead and use the customizer for foundation and choose what features you’d like to include.
All in all the Zurb Foundation Framework is an excellent way for any designer/developer to get his/her feet wet with mobile first responsive web design. Rapid prototyping and a fluid grid allow for some beautiful outcomes. Check out the library of sites created using Zurb Foundation here: http://foundation.zurb.com/case-jacquelinewest.php
