I was delighted to see the concept, and the discipline, of grid systems becoming popular for building websites. Obviously, I wasn’t the only one, and grid frameworks have literally flourished in recent years. The facet of proportions still needs to raise its profile a little bit more, but a significant forward step has been taken. However, since those frameworks were born, Responsive Design has taken the web by storm, and brought with it the issue of grid-related class names.

Even though classes don’t have to bear the burden of meaning, and even if you’re not obsessed with semantic purity, you must admit that the following code is disturbing:

@media (max-width: 480px) {
.grid_3, .grid_4 {
    width: 100%;
    }	
}

Problems:

1. Both .grid_3 and .grid_4 suddenly have the same width.
2. 3 columns and 4 columns are as wide as the max number of columns (usually known as .container).

Doesn't make much sense, when you think about it, does it?

Responsive Design has enabled whole areas of layouts to morph. The proportions of a given box have now gained a lifecycle of their own, conditioned by the viewport size and resizing (with a beginning point determined by the size at which the page is first viewed, or entered, and an ending point determined by the size at which the page is last viewed, or exited). I decided my grid class names should reflect that new state of things and its potentiality (or, at least, I wanted to avoid not accounting for it at all). The naming exercise proved, however, to be a more complex task than I expected.

In my relationship with grids, the first step I take is to determine which proportions are going to be used for a given project. If 16 classes are really required to achieve a layout structure, there is probably something going wrong, and chances are that the end result will be unpleasant to look at. Class names like .grid_4 and .grid_6 don't have the same meaning (or width, if you prefer) whether they appear in a 12, 16 or 24 columns context, which is something I usually try to avoid for versatility reasons. The following system is suitable for most designs:

.grid-quarter {
  width: 25.0%;
  }
.grid-third {
  width: 33.333%;
  }
.grid-half {
    width: 50.0%;
    }
.grid_threequarters {
    width: 66.667%;
    }
.grid-full {
    width: 100.0%;
    }

Let’s consider a simple mark-up:

<ul>
    <li class="grid_third">List 1</li>
    <li class="grid_third">List 2</li>
    <li class="grid_third">List 3</li>
    <li class="grid_third">List 4</li>
    <li class="grid_third">List 5</li>
    <li class="grid_third">List 6</li>
</ul>

On larger screens, I have decided that three list items should stand side by side. On narrower screens, I want to have only one item per row. I used to end up with the following unsatisfying code:

@media  (max-width: 480px) {
.grid-third {
    width: 100%;
    }	
}

Problem:

1. A third of a given proportion should always be 33%, no matter what the context (or the viewport size, if you prefer).

A poor relationship between the class name and the declarations it contains often leads, to my experience, to confusion, which itself results in loss of time and coding mistakes. It’s not even about semantics; it’s about how the human brain works: .grid_4 becoming the same as .grid_6 and .grid_12 at the same time, for example, doesn't make sense and requires some kind of mental translation when thinking about your layout that could be avoided. In a simple design, you can get away with it. But when things get very complex, you're likely to lose yourself in media queries scope and compartimentalitazion.

Here is a first attempt at finding a better naming for our .grid-third class:

.grid-third-to-full {
    width: 33%;
    }

@media (max-width: 480px) {
.grid-third-to-full {
    width: 100%;
    }
}

A mobile-first approach would look like this:

.grid-full-to-third {
    width: 100%;
    }

The class name takes into account the lifecycle of the area it is tied to. Unfortunately, the unpleasantness of poor naming, and the inability to visualize the morphing trajectory of our area, still persists in the following situation:

@media (max-width: 768px) {
.grid-third-to-full {
    width: 50%;
    }
}

Same issue with a mobile-first approach:

@media (min-width: 768px) {
.grid-full-to-third {
    width: 50%;
    }
}

Altering our class to .grid-third-to-half-to-full to account for the complete lifecycle of our area triggers two obvious problems:

1. HTML documents would quickly become painful to look at due to the verbosity of such naming.
2. A viewport may be sized in a way that triggers first the “half” part of the element lifecycle, which means our class should potentially be named grid_half_to_full_to_half_to_thirty_to_full. I'm being very picky here, and it’s a purely theoretical problem, but it's worth mentioning.

The solution to this problem lies in abstraction. Grids can no longer be thought of in terms of number of columns, but rather in terms of lifecycles, of elements morphing to adapt to their environment (i.e. the viewport). I took a look back at my projects, and realized some morphing patterns were recurrent. One of them is the lifecycle revolving around the 33% - 50% - 100% proportions. I also noticed that the 50% - 100% pattern occurred very often.

After testing a few more naming approaches which I will spare you (most of them didn’t survive the arguments already exposed), I kept the system that was the most concise and made the most sense: lifecycles are represented by letters (numbers would have created confusion with the classical system, which consists in using numbers to specify how many columns wide a grid element is). The choice of letters was motivated by the fact that first letters are easily associated with smaller values, which makes it easy to remember, for example, that "a" is related to the lifecycle containing the smallest proportion. But obviously, subjectivity is strongly involved here, and many choices are perfectly acceptable.

Nonetheless, here is what a grid system could look like following this philosophy (which is actually what I'm currently using to build my layouts):

/* = Lifecycle Grid System (Simple Example)

--------------------------------------------- */

[class^="morph-area-"] {
    float: left;
    }
.morph-area-a {
    width: 33.333%;
    }
.morph-area-b {
    width: 50%;
    }
.morph-area-c {
    width: 66.667%;
    }

@media (max-width: 768px) {
.morph-area-a {
    width: 50%;
    }
}

@media (max-width: 480px) {
[class^="morph-area-"] {
    float: none;
    }
.morph-area-a, 
.morph-area-b,
.morph-area-c {
    width: 100%;
    }
}

Does this naming approach help visualize a responsive layout? It really depends on how your brain is wired, but abstracting grid class names certainly doesn't cast a veil on your mental representation of a given layout. And also, there is a certain richness to this approach, creativity-wise, as one can think in terms of proportion associations, and perceive one’s work in a more abstract way. There is also a reusability argument to take into account, as one can easily modify one’s layout appearance without having to alter the mark-up to make it account for CSS decisions.

It's really just a thought. But what is obvious, is that our naming approach will have to take into account the various environments a web page is going to be confronted to.