Responsive design frameworks. Zurb Foundation.

Zurb Foundation is flexible and powerful responsive design framework
Drupal article - Responsive design frameworks
Responsive design frameworks now allow designers, front end developers and pretty much everyone to embrace the power of already written HTML files with predefined flexible styles and some common functionality like modal windows and image carousels. You can see them as API frameworks which were popular with back end developers but weren't available to front end developers and designers. In the 3 part series I will have a look at 2 popular frameworks: ZURB Foundation, Twitter Bootstrap and then will compare them & look into their implementations in Drupal.
 
Zurb Foundation is flexible and powerful responsive design framework for building HTML prototypes. It the 13th most popular project on GitHub and used by Pixar, National Geographic among many others. ZURB itself is a web development shop who came up with easy to use framework and made it open source in September 2011. It is distributed under MIT License for those interested in legal side of things.  
 
Foundation (as majority of responsive design frameworks) consist of few components: grid system, CSS styles and customisation, JavaScript plugins.
  • Foundation's 12-column grid system has 3 types of grids: small, medium, large and extra block grid. Small grid always stays horizontal, whereas medium and large break the row and stack when particular width breakpoint reached. One big advantage of grid system is that you can center columns on the page.
  • Standard CSS styles cover wide range on elements from navigation, headers and forms to buttons and images. CSS customisation can be done via SASS and COMPASS  which are popular Ruby-based CSS modification frameworks with ability to define variables and other additional functionality.
  • On JavaScript side of things there is a set of jQuery-powered components including standard web page elements such as drop down menus, tool tips, popovers, modal windows and guided site tour. It runs on jQuery 1.7 or higher.
  • In addition, separately downloadable custom vector icon font is available. Vector images will scale well on displays of various resolution and density providing no distortion on retina displays. 
 
Browser support includes latest versions of Chrome, Firefox and Safari as well as iOS, Android and Windows mobile browsers.Foundation only support IE9 & 10 with limited IE8 support. The framework isn't tuned specifically for accessibility although most of the components "are fairly accessible".
 
There is pretty impressive customisation form when downloading the framework. It allows you to customise all the CSS & JavaScript elements with ability to exclude any unnecessary ones as well as modify default colours.
 
Version 5 suppose to be of before the end of the year and it will be official front end for Google Angular JavaScript framework (used for data model prototyping and building).
 
Next week, we will have a look at Foundation's competitor and number 1 project on GitHub: Twitter Bootstrap version 3.

The Author

Vladimir Roudakov

Solution Architect / Social Engagement