Line25

Which Responsive Frameworks are Designers Using?

Read the full post

All the mathematics involved in creating a responsive website design can be exhausting and time consuming, but thankfully there’s a range of responsive frameworks available that make the process quick and easy. These frameworks or boilerplates have all the complicated grids, layouts and media queries in place ready for you to add your own design and markup. Here’s a roundup of the most popular frameworks currently being used by designers.

Bootstrap

Bootstrap

Bootstrap, made by the folk from Twitter, has to be the most widely used framework. It is built with the most comprehensive list of features and can be quickly customised for each individual project.

Foundation

Foundation

Foundation is an advanced responsive front end framework based on a flexible grid that can be customised to your exact needs. This makes it easy to develop layouts for mobile and desktop devices using the same markup.

Skeleton

Skeleton

Skeleton is one of the more lightweight frameworks that’s based on a simple grid system. The Skeleton grid elegantly scales from 960px right down to tablets and mobile viewports in landscape and portrait.

Golden Grid System

Golden Grid System

If you’re passionate about grids, you’ll love the Golden Grid System. It starts as a 16 column grid with neat margins and gutters, but neatly folds up as the viewport is downsized to create 8 or 4 columns layouts for tablets and mobiles.

320 and Up

320 and Up

Some designers prefer progressive enhancement over graceful degredation. This is where the 320 and Up framework comes in. It’s designed to create layouts for small screens up, rather than from the desktop down, which ensures the content comes first.

Less Framework

Less Framework

Less is one of the classic frameworks that is based on a simple fixed width adaptive grid. It contains 4 ready made layouts and 3 typography presets to cater for desktop, tablets, mobile and landscape mobile viewports.

1140px CSS Grid System

1140px CSS Grid System

Creating responsive designs doesn’t just mean you’re catering for smaller resolutions, it also means you can go super wide for your maximum layout and still cater for the common desktop resolutions. The 1140 grid creates a nice screen-filling design on 1280px monitors and scales nicely for anything smaller.

Frameless

Frameless

Frameless shouldn’t really be in this roundup, seeing as it’s neither truly responsive or an actual framework. The core idea makes it easy to imagine and build layouts for infinite viewports, with the frameless grid simply adding columns as and when they’re required.

Wirefy

Wirefy

The idea of a responsive design doesn’t always make sense to clients, but it’s pretty time consuming building concepts to show them how it all works. Enter Wirefy, the responsive wireframe framework that makes it easy to mock up layouts with elements such as slideshows, galleries, menus and forms.

Gumby Framework

Gumby Framework

If you’re new to responsive web design, the Gumby Framework might be a good place to start. It’s simple and lightweight, and unlike some of the more daunting frameworks, it actually comes with a PSD and UI Kit which makes it easy to mock up your designs the traditional way.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

33 Comments

  1. Claude Meri says:

    I heavily recommend bootstrap or foundation

  2. aidan says:

    Which framework do you use chris? I have found myself predominantly using Foundation

  3. Thank you to everyone who contributed to the

  4. AviaT- says:

    Just finished my redesign using the Skeleton Boilerplate for it's ease of use! I'll have to check some of the others you listed here, they look promising!

  5. Dave says:

    I just started using bootstrap. it is pretty sweet.

  6. Andrea says:

    I use foundation adn bootstrap.
    But I prefer foundation

  7. Chatman R. says:

    I've been mostly stitching my projects with relevant parts of HTML5 Boilerplate while I tried out multiple grid frameworks. When I designed my first responsive site, I used a responsive grid generator named Gridpak. I might have to give Bootstrap a much closer look.

    When I integrated Sass and Compass into my toolbox, I decided to take a serious look at the Susy responsive grid framework as a natural complement. My first experiment with it was quick and dirty, but those frameworks look great!

    How is Skeleton, by the way?

  8. If you use Bootstrap be sure to download the non-compiled source from Github. There is lots to learn from the structure of the .less files.

  9. I don't use any of these frameworks, they're all too bloated, I usually just need a basic grid system and not much else to I really like using responsive.gs.

  10. Jimmy says:

    I have been using 960 grid system and found rwdgrid.com is an amazing responsive grid system based on it.

    Nice collection btw.

    Thanks Chris :)

  11. Steve says:

    I was using Bootstrap, but will check out the others. Thanks

  12. J says:

    Skeleton was my first love, but I have since moved on to Foundation.
    Foundation is great and has excellent documentation.

    I appreciate that code bloat is a nuisance with frameworks, but they're such a time saver – especially if you can get validated.

    It is somewhat discouraging when there are quite a few designers who consider frameworks as cheating. On that basis, I do try to code from scratch whenever feasible. However, sometimes these frameworks are suited for the project.

  13. Arun says:

    I've used Amazium & its really good!

  14. Framework you have decribed in your psot are amazing, anybody will use them and create a very impressive website

  15. Tom says:

    I've tinkered with Bootstrap, but that's about it – though Im interested in what you use, Chris – you're the master here!

  16. jo says:

    I love Bootsrap! :D

  17. falz says:

    I will recommend twitter bootstrap! Even if their is still a bug when viewed in iPad and iPhone.

  18. Progflicks says:

    Good collection of blogs.We are running web designing company. our services are web design,web development,seo(search engine optimization),hosting,domain registration,content management system,web maintenance and e commerce sites

  19. Rob Arel says:

    We have been using Bootstrap and Skeleton on all of our Web Design projects for some time now. It cuts down our development time considerably.

  20. Jason says:

    Nice. I'm bookmarking this page for easy reference. Responsive design is extremely important for our time. Thanks for compiling these resources.

  21. i'm using Bootstrap but i really wish they would take on 320 and up's approach to responsiveness.

  22. Alex Sablan says:

    I have been drawn into the vortex that is the twitter bootstrap. It is so adaptable and its javascript library is deep. It just saves time for everyday framework development.

Comments are now closed