Nowadays design a website means also develop for all platforms in order to ensure a correct experience to all users. Luckily media queries allow you to create sites that work simultaneously on PC, tablets and mobile phones.
This article collects 25 CSS Frameworks that will help you in develop responsive web sites.
Comparison Table
The following table compares some of the most important libraries properties.
| Framework | Columns | Templates (psd, ai, …) | Size | Scss / Less | Max Container Width (px) |
|---|---|---|---|---|---|
| 1140px | Yes | Yes | 8.3 kb | No | 1140 |
| 320 and up | No | No | 537 kb | Yes | 1382 |
| Amazium | Yes | Yes | 76kb | No | 1200 |
| BluCSS | Yes | No | 4.26kb | No | 1000 |
| Columnal | Yes | Yes | 207kb | 1140 | |
| CSSHòrus | Yes | Yes | 68kb | Yes | 1200 |
| Fluid Baseline Grid | Yes | No | 18kb | No | 1280 |
| Frameless | No | Yes | Yes | ||
| Golden Grid System | Yes | No | 45kb | Yes | 2560 |
| Gridless | No | No | 14kb | No | |
| Gridpak | Yes | No | 63kb | Yes | custom |
| Gumby | Yes | Yes | 221kb | No | 940 |
| Less Framework 4 | Yes | Yes | No | 992 | |
| Inuit.css | Yes | No | 43kb | Yes | |
| Responsive Grid System | Yes | No | 55kb | No | |
| Responsive.gs | Yes | No | 1kb | Yes | |
| ResponsiveAeon | Yes | Yes | 294kb | Yes | 1104 |
| Skeleton | Yes | Yes | 25kb | No | 960 |
| The Goldilocks Approach | No | No | 35kb | No | |
| The Semantic Grid System | Yes | No | 31kb | Yes | 960 |
| Titan Framework | Yes | Yes | 6kb | No | |
| Twitter Bootstrap | Yes | Yes (third part) | 83kb | Yes | 1170 |
| Wirefy | Yes | Yes | 306kb | Yes | |
| Zen Grids | Yes | No | 30kb | Yes | 960 |
| Zurb Foundation | Yes | No | 217kb | Yes |
Responsive CSS Frameworks
1140px
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
320 and up
‘320 and Up’ is a lightweight, easy to use and content first responsive web design boilerplate. Some of its features are:
- Five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px
- Design ‘atmosphere’ (colour, texture and typography) separated from layout
- Bootstrap styles for buttons, forms and tables
- Modernizr, Selectivizr, responsive type tester and design tester
- LESS and Sass mixins and variables
- Upstarts for the things we build every day
Amazium
Amazium uses 6 main media queries to adjust the layout of your website to match the size of your screen. The media queries in Amazium only target at max and min widths rather than device sizes or orientations,
which means that any new mobile or browsers that don’t match the exact dimensions will still benefit from the styling.
BluCSS
BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.
Columnal
The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
CSSHòrus
CSSHórus is a CSS framework for easy and fast development of responsive and mobile websites. It contains 16 grid columns and basic style formats (Resets, Basics, Typography, Lists, Links, Table, Form, Button) for your web project, also with RTL and LESS CSS.
Fluid Baseline Grid
The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.
Frameless
Frameless isn’t properly a framework. It doesn’t include any code. It’s just an idea for a specific type of adaptive grid. You can use it as a good starting point for a new design, but you’ll still have to do all the hard work of designing and coding yourself.
Golden Grid System
Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
Gridpak
Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.
Gumby Framework
Gumby Framework was built to be the most maleable grid framework you’ve ever used while still maintaining the familiarity and ease-of-use of the grid you’ve always used.
Less Framework 4
Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
inuit.css
inuit.css is a powerful little framework designed for serious developers. It is a Sass based, Object Oriented framework that is full of objects and abstractions. inuit.css provides little-to-no design which means no undoing things, no deleting CSS and no adhering to other peoples’ design decisions.
Responsive Grid System
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.
Responsive.gs
Responsive.gs is a simple CSS framework for fast, intuitive development of responsive websites. Built using the ‘Mobile First’ approach, ‘clearfix’ for clearing floats, box-sizing: border-box for adding additional padding to elements, and weighs less then 1kb compressed.
ResponsiveAeon
ResponsiveAeon is an elegant & minimalistic css3 grid system framework. It makes use of a basic responsive grid system based on 12 columns layout called: col1, col2, col3, col4, etc…, with full width of 1104px. Very easy to understand and use.
Skeleton
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles:
The Goldilocks Approach
The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.
The Semantic Grid System
The Semantic Grid System is a modern approach to the CSS grid. It allows you to set column and gutter widths, choose the number of columns, switch between pixels and percentages, and achieve responsive layouts, all without any unsemantic .grid_x classes in your markup. By default it’s powered by LESS.js, but also supports SCSS and Stylus.
Titan Framework
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.
Twitter Bootstrap
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by Mark Otto and Jacob Thornton.
Wirefy
Wirefy is a style agnostic wireframe tool built on the principles of content first. It allows you to create functional responsive wireframes using standard elements. Many frameworks focus on quick layouts and base styles. This allows you to focus on the content rather than the subjective design decisions.
Zen Grids
Zen Grids is an intuitive, flexible grid system that leverages the natural
source order of your content to make it easier to create fluid responsive
designs. With an easy-to-use Sass mixin set, the Zen Grids system can be applied
to an infinite number of layouts, including responsive, adaptive, fluid and
fixed-width layouts.
Zurb Foundation
Foundation is the most advanced responsive front-end framework in the world. With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.