16 RESPONSIVE CSS GRID FRAMEWORKS

Responsive web design is undoubtedly a hot topic in web design right now. To some degree, the popularity of the concept of responsive web design is well deserved because site users are increasingly diversifying their methods of accessing a website. iPad, iPhone, Android mobile devices, desktops, netbooks — we’re in a time where our web designs must function in a multitude number of ways.

Responsive CSS grids allow the developer to easily and quickly markup and create structured, grid styled websites and layouts. Each grid systems has its pros and cons, and different ways of accomplishing goals. Today, we’ll review 15 responsive CSS grid frameworks.

FOUNDATION

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

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.

SKELETON

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

LESS FRAMEWORK 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

FRAMELESS

Dig responsive design? Hate fluid grids? Try a Frameless grid.

FLUID BASELINE GRID SYSTEM

The Fluid Baseline Grid System is an HTML5 & CSS3 development kit that provides a solid foundation to quickly design websites with ease.

INUIT.CSS

inuit.css is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

SIMPLEGRID

Creating the code for your grid should be the least of your problems when building a site. That’s why SG keeps things simple and straightforward with as little markup and classes as possible. Even nesting grid slots doesn’t require extra classes.

MQFRAMEWORK

A responsive CSS framework, MQFramework utilises the @media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes.

GOLDILOCKS

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.

BOOTSTRAP, FROM TWITTER

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

THE SEMANTIC GRID SYSTEM

The Semantic Grid System is a fresh approach to CSS grids which allows us to define column-gutter widths, choose the number of columns and switch between pixels and percentages. And all these without the -kinda ugly- .grid_x classes used in the markup.

THE 1140PX CSS GRID SYSTEM

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

COLUMNAL

A responsive CSS grid system helping desktop and mobile browsers play nicely together.

978 GRID SYSTEM FOR WEB DESIGN

978 is a grid layout system that uses 12 columns at 54px, with 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024×768 monitor.

GRIDPAK

The Responsive grid generator Created by Erskine Design.

Share this

admin