07 Jun 13
Responsive Web Design Sucks: Boilerplates & Frameworks
In some ways, responsive web design has regressed web design trends back to simplicity, flat designs, grid and box layouts. Some may argue that this limits creativity and innovation (especially in eCommerce website design), which is partially true. Given some time though I’m sure us web design/development geeks will find ways around constraints. There are already plenty of tools to support responsive web design, you can find my last three posts in this responsive web design tools series here: Part 1, Part 2 and Part 3. Boilerplates and frameworks are other awesome resources to cut down the time it takes to get a responsive website up and running. I’ll mention some of my favourites below.
Replacing the formerly popular boilerplate ‘320 and up’, Rock Hammer comes with typography, common HTML styling elements to give responsive web designers a head start. You can also check out the Rock Hammer sample page to make sure it’s appropriate for your project.
Whilst this is a great boilerplate for mobile web applications, it comes with many useful mobile-friendly HTML templates as well as an HTML5-ready alternative to CSS resets.
A very powerful front-end framework that should definitely speed up your responsive web development. Many sites have been built with Bootstrap, check out some of them showcased here.
Foundation is the most advanced responsive front-end framework. It is constantly updated and the features are so rich that there’s no point trying to list them out here. Pixar and National Geographic are amongst some of the big names that use this framework.
This Sass-based CSS framework is based on a scalable custom grid system and contains the igloos plugin. In the recently released 5th version (March 2013) the framework was completely overhauled to be even more efficient.
Another framework built with Sass. Gumby is fast and provides many tools to quickly customize and build on top of the Gumby Framework. Highly simple and robust, this framework will likely see more use.
Singularity’s unique point of difference is that it’s based on internal ratios instead of context-based, which allows for better gutter consistency across breakpoints. Ratio based also means that non-uniform grids can by in any unit of your choice.
So we are nearing the end of this responsive web design series, but there’re still plugins, polyfills, debuggers to come in the next 2 weeks! Stay tuned. Any cool frameworks or boilerplates that I might have left out? Leave a comment!