As responsive layouts rapidly move towards being the standard, more and more responsive grid frameworks have been cropping up. And with such a huge variety of frameworks available, and with everyone one of them employing different grid properties and techniques, it can be very difficult to choose the right one.
Of course, you could go for one of the popular all-singing-all-dancing frameworks, like Twitter’s Bootstrap or ZURB’s Foundation, as they do offer everything you could possibly need, as well as plenty of documentation and lots of support from the community. But, what if you are looking for something a little smaller? Perhaps something lightweight and minimal that would allow you to start your project quickly?
Below you will find your solution. We have 10 lightweight and minimal responsive grid frameworks all built with one thing in common – to get you going on your next project as quickly and as painlessly as possible.
The Toast framework, designed purely for simplicity, is a twelve column responsive grid CSS framework that includes two main states – a single column layout for mobile devices, and a 12 column desktop layout up to 960px. It comes in three main parts: A standard reset, the grid system and a typography stylesheet.
Toast includes a modified version of Normalize.css, as well as type styles based on a 16px font size with a 24px baseline for greater vertical rhythm. Every feature with Toast has its own stylesheet, so you can pick which parts you need. Simply edit the
toast.css file to import the modules you need.
The Titan Framework, based on 960.gs, comes in two versions, a 12 column grid and a 16 column grid. If you have already developed websites with 960.gs you will love this small framework. You can easily switch them to responsive web design very quickly by simply replacing the 960.gs CSS files with the Titan Frameworks CSS files.
Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Using Sass 3.2 block mixins, this framework makes it extremely easy to build responsive layouts. Using the
breakpoint() mixin, you can change the number of columns in the grid for each media query and store these values in project-wide variables to DRY up your code.
It has been built with the aim of ‘promoting clean and semantic markup’. It relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div’s.
The Goldilocks Approach uses a combination of ems, max-width and media queries to consider just three states (multi column, narrow column and single column) that allow your designs to be resolution independent. It contains two 2 well commented CSS files (that take into account the 3 CSS media query increments) and a boilerplate HTML file to get you started quickly.
Simple Grid is a lightweight responsive CSS grid (1140px 12 columns). The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving you numerous layout possibilities.
It is not a full CSS framework, like the others on this page, as there are no styles for buttons, tables, typography…, but does offer a super-simple platform for getting your next responsive project up and running really quickly.
The Kube Framework is certainly not an overblown responsive CSS framework with multiple layouts and styles. All you have with Kube is just what you need to get started – a minimal CSS file. By not imposing any styles, that is were its beauty lies – in its simplicity. It gives you the freedom to create your own site exactly as you like.
LESS files are also available for download.
The RWD Grid is another responsive grid system based on the popular 960.gs. The naming conventions of this grid system are similar to the 960.gs – underscore has been replaced by a hyphen (improving readability). The stylesheet has no base styles and the framework has been made for 1200px+ displays, 960px+ displays, 720px+ displays and mobile screens.
One% CSS Grid is a percentage based 12 column fluid CSS grid system. It has been designed as a base for building responsive web layouts easily, quickly and with minimum effort. It has two starting points, one which fits 1280px screens (in full screen view) and another one which fits 1024px screens (in full screen view).
And finally, if all of the lightweight frameworks above do not suit your needs, why not build your own?
Responsify is a responsive framework generator that lets you quickly and effortlessly build your own responsive grid framework and customise it as you see fit, all through an easy to use interface. Why not give it a try: