For all of the advantages the web has with distribution of content, I’ve always lamented the handiness of the WYSIWYG design tools from the print publishing world. When I set out to redesign my personal website, I wanted to have some of the same abilities that those tools have, laying out pages how I saw fit, and that meant a flexible system for dealing with imagery.

Building on some of the CSS that Eric Meyer employed a few years back on the A List Apart design, I created a set of classes to use together to achieve the variety I was after. Employing multiple classes isn’t a new technique, but most examples aren’t coming at this from strictly editorial and visual perspectives; I wanted to have options to vary my layouts depending on content.

If you want to skip ahead, you can view the example first.

Laying the Foundation

We need to be able to map out our page so that we have predictable canvas, and then create a system of image sizes that work with it. For the sake of this article, let’s use a simple uniform 7-column grid, consisting of seven 100px-wide columns and 10px of space between each column, though you can use any measurements you want as long as they remain constant.

All of our images will have a width that references the grid column widths (in our example, 100px, 210px, 320px, 430px, 540px, 650px, or 760px), but the height can be as large as needed.

Once we know our images will all have one of those widths, we can setup our CSS to deal with the variations in layout. In the most basic form, we’re going to be dealing with three classes: one each that represent an identifier, a size, and a placement for our elements.

This is really a process of abstracting the important qualities of what you would do with a given image in a layout into separate classes, allowing you to quickly customize their appearance by combining the appropriate classes. Rather than trying to serve up a one-size-fits-all approach to styling, we give each class only one or two attributes and rely on the combination of classes to get us there.

Identifier

This specifies what kind of element we have: usually either an image (pic) or some piece of text (caption).

Size

Since we know how our grid is constructed and the potential widths of our images, we can knock out a space equal to the width of any number of columns. In our example, that value can be one, two, three, four, five, six, or seven.

Placement

This tells the element where to go. In our example we can use a class of left or right, which sets the appropriate floating rule.

Additions

I created a few additions that be tacked on after the “placement” in the class stack: solo, for a bit more space beneath images without captions, frame for images that need a border, and inset for an element that appears inside of a block of text. Outset images are my default, but you could easily switch the default concept to use inset images and create a class of outset to pull them out of the content columns.

The CSS

1. /* I D E N T I F I E R */
2. .pic p, .caption {
3. font-size: 11px;
4. line-height: 16px;
5. font-family: Verdana, Arial, sans-serif;
6. color: #666;
7. margin: 4px 0 10px;
8. }
9. 
   
10. /* P L A C E M E N T */
11. .left {float: left; margin-right: 20px;}
12. .right {float: right; margin-left: 20px;}
13. .right.inset {margin: 0 120px 0 20px;} /* img floated right within text */
14. .left.inset {margin-left: 230px;} /* img floated left within text */
15. 
    
16. /* S I Z E */
17. .one {width: 100px;}
18. .two {width: 210px;}
19. .three {width: 320px;}
20. .four {width: 430px;}
21. .five {width: 540px;}
22. .six {width: 650px;}
23. .seven {width: 760px;}
24. .eight {width: 870px;}
25. 
    
26. /* A D D I T I O N S */
27. .frame {border: 1px solid #999;}
28. .solo img {margin-bottom: 20px;}
29. Source: /code/modular-layout-systems/1.txt

In Use

You can already see how powerful this approach can be. If you want an image and a caption on the left to stretch over half of the page, you would use:

Or, for that same image with a border and no caption:


You just tack on the classes that contain the qualities you need. And because we’ve kept each class so simple, we can apply these same stylings to other elements too: