This article was published 12 years ago, therefore the contents of this post may be out of date.

The almighty CSS frameworks have been around for quite a while now, but with the arrival of the responsive web design practices has rendered many of the old favourites ineffective, but a whole lot of talented developers has jumped in to the pool and filled the void with the next generation of CSS frameworks and boilerplates.

Today’s posted features 10 of the newest Responsive CSS frameworks and boilerplates that really worth considering next time you starting your web project.

1. Twitter Bootstrap 2

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well. Twitter Bootstrap 2 features a 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customiser to make Bootstrap your own.

2. Foundation 3

With the latest version (3) of Foundation has been built with Sass allowing you to quickly develop Foundation itself – and gives you new tools to quickly customize and build on top of Foundation. The developers have added new elements, new options, and tons of streamlining to make this the fastest way to prototype responsively.

3. ResponsiveAeon

This’s the new version (2) from HTML5 NewAeon Framework. Now with a responsive grid all based in percentage with mediaqueries, html5 starting point and javascript. The whole framework has only three basic classes: 1-Container, 2-Content and Col, Simply you can create with them mockups/wireframes and final websites in the speed of light.

4. Titan Framework

If you’ve worked with 960.gs until now, you can work with Titan Framework also. Titan Framework uses the same CSS classes as 960.gs. Also, if you have developed websites with 960.gs, you now can easily switch them to responsive web design in a matter of minutes. You just replace the 960.gs CSS files with Titan Framework CSS files and you are ready to go.

5. Gridiculous

Gridiculous is fully responsive boilerplate based on a twelve column grid that you can set your site to max out at 960px, 640px, 320px or even stretch it out to full width. You can even space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size.

6. Susy – A Responsive Grid For Compass

Susy is a semantic CSS grid system with a responsive twist.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.  This isn’t another one-size-fits-all grid framework that will make your sites look identical and litter your markup with meaningless “col2of5” jargon. The Susy grid framework don’t design your site or write your markup, Susy just do the math and get out of your way.

7. Wirefy

Wirefy is a collection of CSS & JS files to help you rapidly experiment with responsive wireframes. Whether you keep them to yourself or use them to help educate your clients, Wirefy is flexible and here to help. Wirefy has been built from the ground up. Following the philosophy of mobile first, Wirefy will respond to the proper viewport.

8. Toast

Toast includes two main states – a single column layout for narrow screen and mobile devices, and a 12 column layout up to 960px. It’s super easy to adjust Toast for your own needs – simply change the min-width in grid.css, or write your own media queries for the screen sizes you want.

9. StatSheet Frameless CSS Framework

The StatSheet Frameless CSS framework is based on the frameless grid. We have a responsive and non-responsive version of the grid. This particular framework utilizes a 12 column grid for the desktop version and portrait tablet, a 4 column grid for a landscape mobile device and a 2 column grid for a portrait mobile device. When shrinking from a larger grid to a smaller grid, any column greater than the max grid level for that layout be shrunk to the size of the max grid size…

10. HTML5 Boilerplate V4

HTML5 Boilerplate has hit version 4.0. The front-end template is popular with web designers, providing a kickstart and saving more time then ever!

This release is notable for a number of changes including a new website, the cleaned up and reorganised of the code, the beginnings of a high-resolution-screen @media query and various libraries that Boilerplate relies on, including jQuery, Modernizer and Normalize.css.

You can see the complete changelog for this version over on Github

Share

10 Newest Responsive CSS Frameworks & Boilerplates Worth Considering