10 Lightweight & Minimal Responsive Grid Frameworks

As responsive layouts rapidly move towards being the standard, more and more responsive CSS 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.

Base Framework

Base Framework - Responsive Grid Framework

Base is a 12 column 960px grid (max) responsive CSS framework that contains everything you need to get up and running quickly. It contains a minimal HTML5 template (including jQuery), a stylesheet with basic styles (for typography, blockquotes, code, form elements, tables…), a default Javascript file with base enhancements & fallbacks and, finally, a LESS file to easily customize your stylesheet.

Base FrameworkGitHubDemo

Toast CSS Framework

Toast CSS Framework - Responsive Grid Framework

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.

Toast CSS FrameworkGitHub

Titan Framework

Titan Framework - Responsive Grid Framework

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.

Titan FrameworkDemo

Bourbon Neat

Bourbon Neat - Responsive Grid Framework

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.

Bourbon NeatGitHub

The Goldilocks Approach

The Goldilocks Approach - Responsive Grid Framework

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.

The Goldilocks ApproachGitHubDemo

Simple Grid

Simple Grid - Responsive Grid Framework

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.

Simple GridGitHub

Proportional Grids

Proportional Grids - Responsive Grid Framework

Proportional GridsDemoGitHub

Kube CSS Framework

Kube CSS Framework - Responsive Grid Framework

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.

Kube CSS Framework

RWD Grid

RWD Grid - Responsive Grid Framework

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.

RWD GridGitHubDemo

One% CSS Grid

One% CSS Grid - Responsive Grid Framework

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).

One% CSS Grid

Responsify.it – A Responsive Template Generator

Responsify.it - A Responsive Template Generator - Responsive Grid Framework

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:


You might also like…

15 Responsive CSS Frameworks Worth Considering →
15 More Responsive CSS Frameworks & Boilerplates Worth Considering →
10 Responsive Navigation Solutions and Tutorials →
20 Free Responsive HTML & CSS Templates →
15 Free WordPress Themes with a Responsive Layout →
25 jQuery Plugins to help with Responsive Layouts →

Speckyboy Design Magazine

Leave a Comment