Useful Responsive CSS Grid Frameworks
2012 has truly been the year in which many companies finally adopted responsive website design. Web Design is a fast evolving craft and it had its share of many trends which come and go. But unlike many others, Responsive website design is not just a passing trend. Smartphones, Tablets & faster data connectivity is changing the way people access the web. As your website or webapp gets viewed across different devices, platforms & browsers, delivering a good experience along with great content becomes even more important.
Before responsive design came into the scene, companies created multiple versions of their websites for mobile users. Creating and maintaining a different website for each device is not practical and this is when responsive design approach saves the day.
Why to use a Responsive CSS Framework?
Every web developer at some point has created a set of base CSS files to be reused for multiple projects. Web design standards and browsers are constantly evolving and maintaining a custom framework becomes a task in itself.
CSS Frameworks offer a great starting point without having to re-invent the wheel. Being available for the general consumer, these are constantly updated and follow best practices. These frameworks would not only provide a default set of rules for your content display but would also make the content responsive based on screen size.
How to select a framework
If not more, then there might be at least a hundred different responsive CSS frameworks available. The general way in which most of these frameworks work is the same, however each one follows a different set of naming convention, file structure and rules. Understanding them is the key to successfully choosing and using them.
Before you pick a framework for your project, I would strongly recommend testing them for dummy projects as changing the frameworks for a completed website would be time consuming. Some of simple enough to understand and use within few minutes, but some like Twitter Bootstrap would take more time to learn.
There is no hard and fast rule to select the best framework at the end it would come down to which Responsive CSS framework you are most comfortable with. Every framework would have its pros and cons and 1 framework might not be the best solution for every single project.
Few things you can consider while selecting a frame are:
1. Learning Curve
The most important aspect in choosing a Responsive CSS framework would be to find the one you are comfortable with. A basic framework would be the fastest to learn and use but lack of features would mean additional work for larger websites.
2. Features & Performance
More features in a framework might affect its performance. A typical website might not require every single feature a framework offers. Hence it would be best to use different framework based on the requirements of each website.
3. Backward Compatibility
Framework is used to save time. Hence having a framework that is compatible on older browsers makes development even easier.
As mentioned in the above point, lot of features would affect performance. Hence being able to choose only certain components of a framework gives us more control. Twitter Bootstrap is one of the most feature rich CSS Frameworks available today but also offers a great customization option to be able to choose only required features.
5. Support & Maintenance
Another important aspect to consider would be how well a framework is maintained. As many frameworks are created by web developers on their own, if for any reason, they get busy or lose interest, you might have to continue improving the framework yourself or switch to another. This is no doubt true for every free product out there, but nonetheless is an important aspect to consider.
6. Online Community & Resources
Finally, to be able to make the maximum use of your chosen framework, the community and available resources for the framework would be crucial. E.g. for Twitter Bootstrap, you would many articles on how to use it as well as web based tools and ready made website templates.
In this article, my aim is to not cover all of the Responsive CSS frameworks out there, but only a few.
Some of the Responsive CSS Frameworks
Skeleton is a lean css framework with a familiar lightweight 960 grid that scales down to different lower resolutions elegantly. It comes in a small package with just handful of files with basic styling for forms and other elements.
320 and Up
320 and Up offers mobile first approach and 4 breakpoints.. It comes with basic styling for general UI elements and also includes styles from another framework “Bootstrap”. The CSS for responsive layout is separated from the other design related styling to easily allow us to only use what we need.
Similar to Skeleton, Base framework offers a minimal set of features to built upon.
Wirefy was created with the intention of quickly creating interactive wireframes. However it can also be used as a base framework for your projects. Its features are similar other Responsive CSS frameworks like Foundation, Bootstrap, etc but with minimum styling.
Amazium is a full fledged Responsive CSS Framework similar to Bootstrap offering styling for general user interface elements along with a robust responsive grid.
Foundation from ZURB
Foundation along with Bootstrap is one the most feature rich Responsive CSS Frameworks and as they brag one of the most advanced Responsive Frontend frameworks out there. Maintained by Zurb a digital agency, Foundation is also one of the most constantly updated responsive framework. Due to the number of different element and styling available in Foundation it is very easy to create rapid prototypes for any web project.
Bootstrap by Twitter is one of the most widely used and most famous Responsive CSS Frameworks out there. Created by the folks who worked at Twitter, it offers everything that even a large web application might need. Bootstrap has one of the best documentation. Due to the size of the community around this, you would be able to find lot of reference material and also ready made website templates. One of the best things about this is the customizer that allows us to choose only those features that we require giving us the ability to pick only what we need for a project.
1140 CSS Grid
Unlike many other CSS frameworks, 1140 CSS Grid as the name suggests starts with a default grid of 1140 pixels and then downsizes gracefully to smaller resolutions.
Golden Grid System
Golden Grid System or GGS offers a maximum of 16 column grid layout that wors even for a screen with resolution as high as 2560 pixels. The 16 columns are then combined or folded into 8 columns for tablet-sized screens and into 4 columns for mobile-sized screens.
This is another lightweight framework which uses a combination of Ems, Max-Width, Media Queries and Pattern Translation to consider just three states to allow designers to create more resolution independent designs. This framework is not updated recently, but that does not mean its outdated. If you prefer to build your own Responsive CSS Framework, this can be used as a starting point.
Proportional Grids Framework offers a simple method of creating fluid grids with fixed gutters.
Responsive Grid System by Graham Miller
Another simple framework, Responsive Grid System offers a simple way to create columns without needing the .last, or .first class required in many other CSS frameworks.
Though no Framework is perfect, you can decide based on whether you just need to add responsiveness to your website or want a complete set of default styling and features along with it. Skeleton is my choice for any project & Twitter Bootstrap is the one worth spending time but if you just want something minimal or you plan to build something on your own then experiment with Proportional Grid, 1140 Grid and others. Twitter Bootstrap and Zurb has the biggest learning curve, but they also offer enough features to never require anything else once you start using them.
Responsive Web Design allows you to offer better experience for your website visitor irrespective of the device they use. So if you haven’t already started using responsive design approach, its not too late. Whether you are making an existing website responsive or planning to make your next website project responsive, any of the above frameworks, will save hours of your time and give you a solid platform to build on