It seems everyone is talking about responsive web design now a days, and with good reason; as the number of web-enabled devices continues to grow day by day – each with differing capabilities and features – it’s no longer sensible to build fixed-width websites.
In this article, we look at frameworks that will help you handle the challenge. Just like most CSS frameworks, all of the frameworks below will help you rapidly develop sites by eliminating the need to write basic CSS styles yourself, and they also come with a responsive layout helping you to quickly and easily create mobile-specific sites.
Foundation is a 12-column, future-friendly responsive grid framework that includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code.
Semantic Grid System
The Semantic Grid System is a responsive grid system that lets you set column and gutter widths, choose the number of columns, and switch between pixels and percentages without any ugly .grid_x classes in your markup.
Golden Grid System
The Golden Grid System is a folding grid system for responsive design. It 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. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones.
320 and up
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. The FBG system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.
Skeleton is a small collection of CSS & JS files that has a lightweight 960 grid as its base that seemlessly scales down to downsized browser windows, tablets, mobile phones (in both landscape and portrait).
1140px CSS Grid
Less Framework 4
The Goldilocks Approach
inuit.css is a HTML5 framework that uses a grid system that scales down to small screens ‘out of the box’. It’s a minimalist approach, giving you just what you need to get started without unnecessary styles, but it’s extensible and there are a range of handy plugins available for it — such as one that creates breadcrumb trails out of ordered lists.
Gridless is an HTML5 and CSS3 boilerplate for making future-proof responsive websites. You can easily create responsive, cross-browser websites with beautiful typography. It is simple and straightforward and doesn’t come with any predefined grid systems or non-semantic classes.
Columnal, a 1140px wide grid system, has been inspired by the cssgrid.net and 960.gs. The grid is divided horizontally into a series of 12 columns, and vertically into rows. 12 columns divide nicely into equal columns of two, three, four, or six columns.
Subscribe to our Newsletter
If you liked this article, then please subscribe to our newsletter for latest web resources. You can also find us on Twitter and Facebook.