Responsive Web Design just got Easier with the Responsive Grid System. The Infinite Grid. Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today we’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between. We’re designing for an infinite canvas—and for that, we need an infinite grid system. It’s common to think of responsive design as multiple layouts: mobile, tablet, desktop, etc.
The problem is the “in-between” sizes tend to suffer, so we end up with layouts that look great at specific dimensions (320, 720, 960), but less than great for everything else. So while a site may look perfect on your 640x960 iPhone 4, it’s going to be a bit off on a visitor’s Nokia Lumia (480x800), or the 685x308 browser window you have open on your desktop. What is an infinite grid system? States#section2 Components#section3 1. 2. In Grid Builder. Responsive Grid System. The Heads-Up Grid. Responsive web design, as described/defined by Ethan Marcotte anyway, is the act of creating various forms of the same basic site design that are optimized for different ranges of browser window widths.
Luckily, the way that I originally constructed the Heads-Up Grid made it relatively easy to adapt to the needs of responsive web design. You can quickly and easily define as many different grids as you need by way of basic JavaScript conditional statements. Even if you are not extremely comfortable with JavaScript, if you are ambitious enough to tackle responsive web design you will most likely have no problem figuring this out. To create a responsive grid use the following code as a template.
The result should be a system that checks the browser window width on pageload as well as any time that the browser window is resized and render the appropriate grid. Tiny Fluid Grid. Frameless. The Semantic Grid System. How I Chose A Grid Framework. Last week I talked about my choice of a grid for this site. I walked you through my thought process, the constraint the grid is built on, and how I eventually settled on an 8 column grid.
I even tossed in a few thoughts about setting up a baseline grid. Today I want to talk a little more about the 8 column grid behind this design from the development side. Choosing the grid rested on one line of thought and how to build the thing on another. Experimenting with Grids Most of the time when developing the layout for any site I just have at it. I build a simple html/css web page and develop the boilerplate structure custom for that particular site. Why it didn’t occur to me to just develop something specifically for this site like usual, I’m not sure. I wanted a system where I could quickly design new content through a handful of classes I wasn’t looking for an endless supply of classes.
I guess I played around with the same things most css grid frameworks do. A Borrowed Framework Summary. How To Choose The Right Grid. It’s easy enough to understand how grids are helpful in organizing your content. Not as easy is deciding what type of grid best suits your content and how to build it. Here’s how I made decisions about what grid to use for the redesign of this site. You may remember in redesign this site I created documents filled with design decisions that later became an online style guide. Last week I walked through the decisions in my typographic document. Today I’ll talk about the next document, the one I used to help me determine the grid upon which this site is built. This post will focus more on my design choices for selecting a typographic grid, what I was looking for and how I made the decision to use the grid that’s in place.
Setting a Constraint for the Grid Layout Prior to making any grid choices, I had a few thoughts about what I wanted from the layout. In print, the fixed dimensions of the page offer the constraint. Trial and Error Baseline Grid Breaking Out of the Grid Summary. 978 Grid System for Web Design. Gridless - An awesome HTML5 & CSS3 boilerplate for mobile first responsive, cross-browser websites. Golden Grid System. GGS was my next step after Less Framework. Instead of a fixed-width grid, it used a fully fluid-width one, without even a maximum width. The resources it was published with are still available on GitHub.
The idea was to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 and 2. This behaviour was inspired by Massimo Vignelli's Unigrid system. While the grid's columns were fluid — proportional to the screen's width — the gutters (spaces between the columns) were proportional to the font-size being used. GGS also contained a set of typographic presets, strictly to a baseline grid.
Correctly setting all of these measurements is difficult, of course. When published, GGS gained a lot of attention, as the web design community was searching ways to work with fluid-width grids, which have always been troublesome, running counter to many graphic design principles. The 1140px CSS Grid System · Fluid down to mobile. Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit. Columnal | A responsive CSS grid system helping desktop and mobile browsers play nicely together.