8 Useful Responsive CSS Frameworks

By / Sep 11, 2012 / Tools
shares

Responsive web design continues to become more widely practiced. Because of that, as web developers and designers, we have more tools and resources that make it easier for us to create responsive web sites. So for today, we gathered 8 CSS Frameworks that will help you do just that. As you know, we never get tired of showing you tools to help you do your job, especially when it comes to something like responsive web design – something that is not only trendy, but useful and extremely user experience oriented. This is ever so important with the diversity of screen sizes you need to cover these days.

Titan Framework

Titan Framework – A CSS framework for responsive web designs

8 Responsive CSS Frameworks

Responsive Grid System

Fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

8 Responsive CSS Frameworks

Ingrid

Ingrid is a lightweight and fluid CSS layout system, whose main goal is to reduce the use of classes on individual units. Making it feel a bit less obtrusive and bit more fun to reflow for responsive layouts. Ingrid is also meant to be an extendable system, easy to customize to your own needs.

8 Responsive CSS Frameworks

Gumby

The NEW Responsive 960 Grid CSS Framework That You’re Already Familiar With.

8 Responsive CSS Frameworks

Susy: Responsive grids for Compass

The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive. Susy grids are fluid on the inside, ready to respond at any moment, but contained in the candy shell of your choice, so they respond how and when and where you want them to.

8 Responsive CSS Frameworks

Responsive Grid System

Spectacularly Easy Responsive Design. The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

8 Responsive CSS Frameworks

Foundation 3

The most advanced responsive front-end framework in the world.

8 Responsive CSS Frameworks

Less + Framework

Less+ Framework is a cross-device CSS grid system using media queries. Less+ empowers designers and developers to build websites that can adapt their content depending on screen resolution.

8 Responsive CSS Frameworks

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

20 Comments

  1. Zachary Winnie
    September 11, 2012

    I can vouch for using Foundation 3. It’s great for mocking up straight forward looking and functional sites, and even is a good starting point to build on top of for full site design.

    Reply
  2. Design Turnpike
    September 11, 2012

    Foundation 3 looks great!

    Reply
    • Kevin
      September 16, 2012

      I agree, I’ve tried Foundation 3 out and so far looks excellent :)

      Reply
  3. Nimsrules
    September 11, 2012

    I recently used Gumby for a client’s business portal landing page and gave me amazing results. Have to check others too, thanks for sharing!

    Reply
  4. john cooper
    September 11, 2012

    3 more
    skeleton http://www.getskeleton.com/
    twitter bootstrap : http://twitter.github.com/bootstrap/

    now this ones a bit special as it’s focused only on creating the grid
    http://gridsetapp.com

    Reply
  5. Jonathan Weisberg
    September 12, 2012

    Great resource! I’m on board with Foundation3 and Twitter Bootstrap.

    Reply
  6. Ryan
    September 12, 2012

    I am a fan of 320 and up, especially for supplying a range of UI controls.

    Reply
  7. ju
    September 12, 2012

    Missing Twitter Bootstrap is a big mistake ;)

    http://twitter.github.com/bootstrap/

    Reply
  8. Sandra
    September 12, 2012

    You’re forgetting The Semantic Grid System, which is great because it doesn’t add any useless classes (from the semantic point of view) to the HTML.

    Reply
  9. Kawaljeet Singh
    September 13, 2012

    Thanks for the list. There are many other CSS frameworks which work fine and easy to use among which : “Blueprint CSS” “Boilerplate CSS Framework” is which I commonly use.

    Reply
  10. aditia
    September 14, 2012

    missing the most popular today, bootstrap

    Reply
  11. Web Design Malaysia
    September 21, 2012

    another happy gumby user here! worked like a charm!

    Reply
  12. Peter Drinnan
    September 25, 2012

    I use Bootstrap for admin interfaces as it is a great way to make web apps look really sharp. For the front end I’ve been getting away with the old 960 grid. The lazy part of me wants to use Gumby 960 but maybe that is a mistake.

    Reply
  13. Marty
    September 26, 2012

    The foundation is great, in any case, but on the other hand, restricting the freedom
    I use WIREFY from author Chris Da Sie, gives a large amount of freedom.

    Reply
  14. Dan
    February 20, 2013

    We incorporate fully responsive styles into http://mixudo.com – submit your designs and sell them to the public!

    Reply
  15. John Slegers
    March 20, 2013

    Just last weekend, I released a new CSS framework I labeled “Cascade Framework”.

    Cascade Framework combines feature richness with modularity, flexibility and a tiny footprint while maintaining support for old browsers.

    Feel free to check it out at http://jslegers.github.com/cascadeframework/ .

    Reply
  16. John Slegers
    July 8, 2013

    If you want just the most basic features, there’s now also Cascade Framework Light ( https://github.com/jslegers/cascadeframeworklight ).

    Reply
  17. Howard Steele
    July 29, 2013

    Great post, and many useful comments

    Reply
  18. paul browne
    November 12, 2013

    Try out mine
    http://paul-browne.github.io/articlr/

    Reply
  19. Tiji
    May 6, 2014

    Also there is another one named Unsemantic.css which works purely around 960 grid system and uses percentages.

    Reply

Leave a Reply