The 996 Grid: Making Websites Look Great from Desktop to Mobile with Our Responsive Framework

You may have heard about CSS grid frameworks for assisting in web design, such as 960.gs, Blueprint, or Golden Grid. These grids almost act as wire frames for web design and allow you to streamline your development process while ensuring consistency and cross-browser support. There are many out there to choose from, but I had a few specific requirements. I wanted a grid that had plenty of room for design but didn’t attempt to fill every last pixel. Also the ability to reformat the elements on a page for tablets and mobile was definitely needed. There were quite a few that came close and seemed to work well, but in the end I decided to make my own path through the CSS grid jungle.

Using the 960 grid as a starting point I decided that the 940px inner-space was just too small. Upping that 30 more pixels makes things a little less cramped and allows for a larger gutter between the columns. I wanted to ensure that the overall grid size did not push too close to 1024px because there are those who still use smaller screens, but still has minimal margins on larger resolutions.

After getting the grid dimensions at optimal sizes, I set out on a task of adding media queries to allow the content to restructure based on browser width. There are many grids that implement a “fluid” structure, but avoiding and using a fixed width ensures that content is laid out much more precisely on each screen. Electing to have 3 smaller sizes, they are sized to approximately tablet, landscape mobile and portrait mobile. The first step down still implements a grid structure, however with smaller columns and gutters while still maintaining a readable size. After that the content is stacked to allow mobile users a convenient view of the site without eliminating any content.

Lastly, the framework includes a slightly modified version of the html5 boilerplate, which offers cross-browser normalization and performance optimizations. The Modernizr JavaScript library is also included which can assist in making sure websites work exactly right, no matter what browser it is viewed in.

The 996 Grid is still a work-in-progress and the latest updates can be viewed on GitHub. Hopefully the 996 Grid will be useful for those who are still searching for a grid and have yet to find what they are looking for.

Read more: http://996Grid.com

2 Responses to “The 996 Grid: Making Websites Look Great from Desktop to Mobile with Our Responsive Framework”

  1. Matt says:

    I am starting to use it more and more. It’s a really good system.

  2. Nate says:

    Hey Carla,

    Love this grid system. I find the 1140 grid feels just a little too wide, even on bigger screens.

    I found your 996 grid after searching for something between 960 and 1140.

    My current goal is to incorporate the 996 grid into the Genesis Framework for WordPress to use as a base template for building new themes.

    I wish you all the best,

    Nate

Leave a Reply

Your email address will not be published. Required fields are marked *