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.

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

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.

4. Customization
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

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.

Base

Similar to Skeleton, Base framework offers a minimal set of features to built upon.

Gumby Framework

Based on the well known and widely used 960 grid framework, Gumby offers styling and javascript for additional user interface elements features such as tabs, menu, form, etc. Gumby framework also offers a way to customize the package based on the type of grid required.

Wirefy

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

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.

Twitter Bootstrap

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.

Less  Framework 4

Less Framework has been around since a while and has undergone lot of changes. It offers a different way of creating resonsive websites with 4 layouts and 3 different sets of typography presents all based on a single grid.

A new and even more leaner version of this is now available under name name Frameless available at http://framelessgrid.com.

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.

Goldilocks Approach

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

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.

Fluid Baseline Grid

Fluid Baseline Grid is another Responsive CSS framework with mobile first approach similar to 320 and Up.

Conclusion

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

Harish Chouhan

Harish is a web developer from India and loves working with Fireworks & WordPress. As owner of Dreams Media, he provides custom website development for a living. He loves to write about Fireworks & WordPress and often blogs on his website HarishChouhan.com. You can also find on twitter @harishchouhan.

Newsletter

19 Comments
  1. Franco Feb 27, 1:45 pm

    You missed an excellent one:

    YAML

    See http://www.yaml.de

    Cheers,
    F.

    Reply
    0
    • Harish Feb 27, 3:59 pm

      @Franco, I skipped YAML, as their license required a link on the website.

      Reply
      +3
      • Dirk Mar 16, 1:16 pm

        @Harish If the CC-BY License of YAML is a problem for you, why don’t you mention this fact in your article, instead of skipping this project? It might be a minor (or even no) problem for your readers.

        Reply
        +3
  2. Mike Feb 27, 2:35 pm

    Brand new, fresh out of the oven, there is JEET Framework http://www.jeetframework.com. Jeet is built for designers that dont need all of the bloat added by most of the frameworks above. Its really worth checking out and will likely be the most used framework in 2013.

    Reply
    +3
  3. Arden Feb 27, 4:03 pm

    You did miss Susy though ;) http://susy.oddbird.net/

    Reply
    +6
  4. Patrik Wibron Feb 27, 7:33 pm

    You missed Susy and Bourbon Neat! http://susy.oddbird.net/ http://neat.bourbon.io/

    Reply
    +2
    • Harish Feb 27, 8:57 pm

      @Patrik & @Arden, the once you mentioned are no doubt good, however the purpose of the article was to introduce only a few that could be used by someone new within few minutes.
      Please keep sharing links to all other frameworks so this article & its comments could be useful for everyone to come back to.

      Reply
      0
      • Arden Feb 28, 4:09 pm

        If that’s so, SUSY should be in there as it is a hell of a lot easier to set-up than Foundation ;)

        Reply
        +2
  5. George Olaru Feb 27, 8:59 pm

    What about InuitCSS system for building grids? Seems the best from the point of view of developer. http://inuitcss.com/

    Reply
    +1
  6. Samuel Feb 27, 11:35 pm

    Semantic.gs, been using for a year or so. Cant believe theres no more buzz about it!

    Reply
    +1
    • Jorge Avila Feb 28, 2:08 am

      At least you metioned it
      Semantic.gs is the simplest grid i’ve ever tried.
      Combined with stylus make the cssthing process really enjoyable :P

      Reply
      0
      • Kevin Price-Ward Feb 28, 1:39 pm

        I’ve used a few of the above during my journey learning responsive but none come close to the Semantic.gs grid system in terms of flexibility – really should be on this list!

        Reply
        +1
  7. Elliott the designer Mar 1, 10:11 am

    You didn’t include css inuit, its worthy of a share amongst this lots too, http://inuitcss.com/

    Reply
    0
  8. Javier Díaz Mar 4, 3:21 am

    WOW! this is magnific, the tools are wonderfull! Good Post! Thanks! :)

    Reply
    +1
  9. Michael Ruescher Mar 5, 3:10 am

    We use Foundation for all of Webpop’s in-house starter templates. We settled on Foundation since it hits the sweet spot of being very capable, without being overly opinionated on the styling.

    Check out this “Startup” template we built with Foundation.
    http://app.webpop.com/themes/startup

    It’s really easy to simply start using all of Foundations features with Webpop since we’ve already set it all up for you.

    Reply
    +5
  10. adrian Aug 13, 9:23 am

    i used to use jeet to create responsive grid. Is there any conflict to adopt flat ui components with jeet grid framework ?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters