How I Chose A Grid Framework

Posted: 20 Sep 2012 05:30 AM PDT

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.

Field notes to re establish the excavation grid on Block 6 in Historic Washington — Field notes tto re establish the excavation grid on Block 6 in Historic Washington

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. When I first began to work out the grid here I was of 2 thoughts.

Use an existing framework
Build a framework for myself

Why it didn’t occur to me to just develop something specifically for this site like usual, I’m not sure. In the end I combined a grid system I found with a bit of custom development, but my first step was giving my own framework a try, in part to learn more about developing grids.

I wanted a system where I could quickly design new content through a handful of classes

Ideally I wanted to develop a true modular grid where Element A through some combination of classes could become a 4 module field in the lower right of the grid, while Element B with a different combination of classes could occupy 2 columns along a single row along the center of the left side of the design and so on.

I wasn’t looking for an endless supply of classes. One or two for position and maybe one or two more for the size of the element. I wanted a system where I could quickly design new content through a handful of classes.

I guess I played around with the same things most css grid frameworks do. I set some classes to define widths for columns and others to set margins. I floated columns and experimented with using relative and absolute positioning too.

What I was looking for proved more difficult than I expected. The basics of grid development aren’t too complex. You’re not doing much more than setting up classes to control 2 things.

Size of the element in terms of columns and rows
Position of the element within the grid

The issue with the first is that while widths are easy to set up in advance, heights are more dynamic. That leads to issues in positioning elements when it comes to the start of a new row, as that’s usually based on knowing the height of each row in advance. Sometimes you’ll know the row height in advance, but many times you won’t and in my particular case I didn’t.

Another issue with positioning has to do with our current need to maintain source order for when the layout renders as a single column. It’s difficult to position each element independent of others when using floats. Trying to break from this dependence led me toward experimenting with relative and absolute positioning, though I didn’t get very far when I realized I was working on an abstract grid problem and not the redesign of the site.

I figured the abstract problem could wait and I should get back the redesign, which meant giving up for the moment the exact grid I was looking for and settling for something I knew would work.

Concept cover for a show at the MoMA documenting the history of the grid

A Borrowed Framework

Early on while researching grids and grid systems I came across a post by Jason Santa Maria for 24 Ways. The article, now a few years old, describes a system for a modular layout and I think it was the system in place on a previous version of Jason’s personal site.

I’d actually kept this article open in a tab for a long time, specifically to look at the demo Jason had set up. It was about as close to what I wanted as I could find. It wasn’t exactly what I’d hoped to achieve, but it was pretty close. The system exists mainly to allow for some flexibility in the layout of images and captions, but I knew I could modify it for my own needs.

You can and probably should read Jason’s article for the details, but the gist is this system simply sets several classes to define how many columns an element will occupy and uses floats and margins to position those elements in relation to the main text, which has also been positioned through floats and margins.

In the case of this site the main block of content clears the first 3 columns and occupies the 5 rightmost columns. Giving elements a margin-left of 37.5% positions them there.

1  2  3  4  5  6  7

p,  ul,  h1,  etc  {    margin-left: 37.5%;  }

The unexpected part is the margin is added to each type of element as opposed to a container for all of them. This allows elements to slide in and out of the main block. Where it becomes complex is that every type of element that will be in the main block needs to be added to the selector list above. So blockquotes, ordered lists, various heading levels, etc are included as selectors for the margin-left.

Complex though it may be, it does fit nicely with the principles of DRY CSS and is relatively easy to manage. It’s a simple line of css with lots of selectors.

For the elements you want to pull out of the main block the first step is setting a size, which is pretty easy. Do the math on the fractions &frac18;, ¼, &frac38;, etc. and you have the values for an 8 column grid.

1  2  3  4  5  6  7  8

.one    {width: 12.5%;}  .two    {width: 25.0%;}  .three  {width: 37.5%;}  .four   {width: 50.0%;}  .five   {width: 62.5%;}  .six    {width: 75.0%;}  .seven  {width: 87.5%;}  .eight  {width: 100.0%;}

Positioning these elements is a simple matter of floating the elements left or right. The margin exists for the gutter between columns, something I didn’t actually use here.

1  2  3  4

.left         {float: left;  margin-right: 2%;}  .right        {float: right;  margin-left: 2%;}  .left.inset   {margin: 0 1.625em 1.625em 37.5%;}  .right.inset  {margin: 0 0 1.625em 1.625em;}

The additional .inset class is for when you want to keep something floated within the main body of text instead of pulling it out to the left or right. Accomplishing this only requires changing the margins to match those set for the main block of text.

I realize the basic idea of this system isn’t all that different from what most grid frameworks do, but it seemed a lot simpler to me. I’m sure there are some out there as simple as this and feel free to mention any you know about. For better or worse this is the system I went with in large part because Jason’s demo looked very much like what I wanted to be able to do.

Close, But Not Quite

As I said above this system was close, but not exactly what I was after. It worked very well when I was developing a single html/css page to represent a single blog post. It’s gotten more complex as I turned that page into a WordPress theme. I’m finding I have to add more element selectors to be given the default margin-left and some things I could easily change in the html page aren’t as easily changed using the dynamic pages of WordPress.

Also this system doesn’t do everything I initially wanted. I can’t place any element anywhere on the page without consideration for where it sits in the html structure. Of course that may be an impossibility given the current state of html and css.

There came a point though, where I needed to settle on something if I was going to finish redesigning the site and Jason’s system was pretty close to what I wanted.

I think to get at what I truly want will require some of the css layout modules like flexbox that haven’t yet been made ready for prime time or better a complete css solution for grids. I’m also thinking about taking another crack at experimenting with absolute and relative positioning to place elements within the grid.

Tile Clock - Texture — Tile clock texture illustrated by Patrick Hoesly, a Kansas City based illustrator.

Summary

When I set out to develop the grid system for the site, I had wanted to build a modular typographic grid. I experimented with different possible ways to get what I was after, but it proved more difficult than I thought. In order to redesign the site and avoid endlessly working on an abstract grid problem I adopted and adapted a system Jason Santa Maria wrote about a few years back.

The system sets a margin on your main block of content and then uses classes for size and position to push and pull certain elements out of this main column block. In my case most elements are given a default left margin of 37.5% and some are then given the positioning and/or size classes to move them outside the main block.

It’s a simple and flexible system that allows me to do much of what I wanted, though when time permits I plan on getting back to the more abstract problem I originally set out to solve.

Next week I’ll take a look at something I don’t consider a strength of mine as a designer. I’ll talk about color and offer thoughts for how I chose a color scheme.

The post How I Chose A Grid Framework appeared first on Vanseo Design.