Responsive design frameworks. Zurb Foundation.
Zurb Foundation is flexible and powerful responsive design framework
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'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.
- 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".
Next week, we will have a look at Foundation's competitor and number 1 project on GitHub: Twitter Bootstrap version 3.
Solution Architect / Social Engagement