@Gregor: I don’t think a definition list adds any kind of meaning here – we’re not talking about a list, much less one that features definitions. Not sure where you got that from, unless I’m missing something…

Simply fantastic! I’ve learned so much by these past 15 days. It’s so enlightening hearing how the big boys and girls in the industry do their thing.

This grid thing is getting quite popular (and useful) and I’m being left behind cause I haven’t started adapting. Thanks for the demonstrations and tips.

I’ve working in my own modular layout system since 2007. It’s called “ORIGO” (origin in latin) and intends to be a structural platform for user interface layouts. Origo it’s ruled by the same principle that you’ve explained here.

Further information for Origo CSS, please <a href=“http://quiltro.cl/2007/11/11/origo-css/”>visit my blog</a> (in spanish)

As John Faulds was asking, I’d really be interested to hear how this approach is incorporated into a content management system (especially Textpattern or ExpressionEngine). I normally feel like I have to keep the “main content column” fairly simple so that clients won’t feel overwhelmed. This is definitely good stuff, though.

@John Faulds and Addison Hall:
That’s going to vary from site to site and CMS to CMS. But I think the best method is to abstract it as much as possible for non-technical people. It’s easy for them to understand (assuming they have followed some basic image size guidelines) that they could specify how large an image is and where it should go on the page. Many WYSIWYG editors offer options like this in the form of formatting buttons, and I think this could be achieved in a similar fashion.

Though, in order to do this in any CMS right now, I imagine you’d have to do some custom work to make it simple enough for everyone.

Sometimes I wonder what people originally thought CSS was for. If not for modular, reusable, semantic visual styling and standard layout/formatting, what then is it for?

Great article, and I am happy to see so many people helped by this, butI hope this is not the first time readers have thought about the power and purpose of CSS.

Looks like I came to the party a little late. About a year late. Thanks Jason for this awesome article, it was a great insight to a new way of thinking. I did a little bit of playing with it here: http://travisneilson.com/thought/a-gallery-showing/ I was very pleased with the results and will continue messing with this approach in the future. Thanks again Jason!

Jason, i’v been waiting for your article… and you didn’t disappoint!

Jason –

I appreciate the article. A quick question about the grid. You have the text’s left margin at 230px, which insets it by 10px off the grid line. Could you explain the rationale on that? Why not have it at 220, so it rides the line directly? Thanks!

@Charile Park: Thanks! About the text and grid, it’s just an example, but I find I like a little bit more padding on text. Grids are more of a starting point than strict rules for a layout.

Excellent article, Jason. I’ve implemented a similar system on a project I’m currently working on, and boy, has it made my life easier. Granted, it took some serious upfront planning, along with a few revisions and rewrites to get things right. But, in the end, the reward has been a site that is much more flexibile and agile.

I use something similar for one of my css frameworks. Great inspiriting article, thanks! We started with great article this Monday :)

To add more semantic you coud use <dl>‘s instead of <div>‘s.
Instead of

<div class=“pic two left”> <img src=“sample-image.gif” width=“210px” height=“110px” alt=”“ /> <p>description</p>
</div>

you could use

<dl class=“pic two left”> <dt><img src=“sample-image.gif” width=“210px” height=“110px” alt=”“ /></dt> <dd>description</dd>
</dl>

what do you guys think about that?

especially for editorial websites whose articles might have lots of images of varying sizes

How do people creating the content on these sort of sites apply the different classes? Do they use WYSIWYG editors (e.g. TinyMCE) or some other method? If they’re using WYSIWYG editors, how do they attach multiple classes without editing the HTML directly?

Really nice. Tough, It needs a little bit of change to support ie6 :)

I use a bunch of utility classes often in my layout work like fl (float:left) tc(text-align:center) etc. It’s definitely made things easier.

Chaining of css class names is very useful for this type of thing, that and child selectors would make CSS a lot more powerful. But we have to wait for the ie6 to die :(

Great article Jason, congratulations.

@GREGOR: I have to disagree with you. I don’t want to start a “semantic fight” but I think it’s more meaningful with the div then with the dl since you’re just describing the image, not defining it. (As I’ve said, it’s a matter of personal choices).

Jason,
thanks for an excellent article – great technique :) Wish I could think of a way to implement the different classes in a way that would be easy for my clients using WordPress….

Very cool! Glad to see many of these articles footnoting their support for IE. It’s no reason to hold back the rest of the show.

Useful example, thanks Jas!

@JSM: Why the extra spaces between letters in your comments? I noticed this on your personal site as well. It certainly helps to make the comments easy to scan.

But are there any other things you considered with regards to making CSS comment flags?

@Gregor: The definition lists could work depending on your situation. The important thing to take away from this is not my example, but the idea of systematic approach to layout. How you want to setup your markup is all you.

@Shani Elharrar: Getting this to work in IE6 wouldn’t be hard at all, you just have to avoid chaining the classes (which only happens on those inset classes). You wouldn’t be able to use @right@ and @inset@ (as @right.inset@), you would have to create an additional class of something like @right-inset@. It’s just the chained classes that don’t work in IE6, not the layout principles.

@Jason Robb: The extra spaces in my CSS comments are just a personal style. It makes it easier for me to skim the headings.

Great article Jason.

I’m using a similar approach in my site. I have “nudgers” classes (.nudge-bottom, .nudge-left), “borderers” classes (.bordered) and a image container class for widescreen images that I place inside a post. Each class is applied to a certain element when desired, and the power resides in combining them.

Re: semantics: I understand that using a combination of classes and divs could not lead to a good semantic result. However this is really useful to set a base wireframe to work on, and to commmit quick changes in the layout. If the client approves the mocks, you can proceed to rename the DIVs and use proper elements, such as DL (mileage may vary), moving the CSS rules to the proper file.

Yo!

I’m always trying to draw on my previous life as a paginator when working on the web. Thanks for putting some of these concepts out there.

What’s nice about this is that it translates well project to project. Assuming your style sheets are as well organized as the approach, you will soon develop a nice personal “base” style sheet from which you can start any project you work on. Nice quick read, thanks!

Maybe I’m missing something, but I think .right.inset is missing “margin-right: 110px”. Without it, the image isn’t inset into the text column all the way. (I’m using Safari 3.1.2, by the way.)

Very informative article, thanks for posting it. Your site looks so good, and I was curious how you had done it.

Ah ha – we finally get a little bit of the nitty gritty on JSM’s site. It’s a really cool idea, and seems to be pretty scalable. Thanks for sharing!

@Steven: Nice catch, I forgot to add that back in when I was making the example file. The article and example files have been updated. Thanks!

Really good, clear article. I don’t see any problem with the lack of semantic meaning for the example, though—it’s just an example, after all. The idea itself can be implemented in a semantic fashion with virtually no problems.

…He said, thinking about how clients always find ways to break designs…

Ha, I noticed this when rooting through the CSS on your site, then borrowed the approach for mine :) It certainly makes for more creative layout opportunities:
stainlessvision.com/visual-page-contents
stainlessvision.com/moo-cards

Jason,
This is great. I love your current site’s feel, and the print-like articles. It’s always an inspiration to read. I’m glad you posted this, so we get a bit of insight.

One of the biggest things that helped me go from someone who was decent in CSS to someone that ‘gets’ CSS was this type of modular, powerful, class-based setup. I could use CSS before, but was doing everything manually. This is so much more effective. I really need to implement this in the next iteration of my portfolio, which needs some work right now!

Elyse

Great tip! I should have done this for a site that I am currently developing, and will definitely keep this in mind in the future. Nice and simple. Thanks!

Jason

YES! Thank you, Jason. This is exactly the sort of semantic approach that’s missing in so many “frameworks”. It’s human-readable and maintainable. Great article!

I always thought browser scaling of images always looked a bit poor when compared to a “properly” scaled image using Photoshop?

What’s the thinking behind this method of in-browser scaling and I guess you’d have to upload larger sized images to cater for the biggest size you might choose allowing the browser to scale down when necessary?

Anyway, it’s a really nice, flexible idea. Thanks.

I really like the way this provides a convenient way to prevent “fighting the grid” every time you need to lay something out. Being able to snap modules to columns in the grid looks like a nice way to do things.

Regarding IE6, if you use something like IE7.js or IE8.js your chained class selectors will work out of the box, although I’ve found that there’s typically a little bit of lag between when the page loads and the JS library accounts for the IE discrepancies. If you can improve the specificity of your selectors it helps, but more often than not you’re better off merging your chained rules into a single selector as you’ve suggested.

Great job Jason! I really like what you just said in the comments above, Grids are a great starting point but not a rule. I think this is really true, it shows that you are thinking about your placement more than just putting things all willy-nilly. But if you go too crazy sometimes you can restrict yourself. This type of layout is great though!

@John Faulds:

If they’re using WYSIWYG editors, how do they attach multiple classes without editing the HTML directly?

I used a similar technique a few years back for client using Contribute as their WYSIWYG editor. My solution to the “multiple classes without editing the HTML” problem was to create shared assets with image and caption placeholders for each width and alignment combination.

The user simply

* inserted the shared asset for the desired width and alignment

* replaced the placeholder image

* and either replaced or deleted the caption placeholder.

Here are two examples from the current site:

* Luther Wins Conference Opener

* Luther Defeated at Simpson

This won’t win any semantic awards, but it provides the desired flexibility via a WYSIWYG editor and is better than what the client was doing, which was the floating tables.

Nice! I’ve seen similar principles employed by some of the CSS frameworks, and this article is a good example of how you can build your own reusable grid system without the weight (or obfuscation) of a framework.
I know some of the methods are sometimes criticized for their lack of semantics, but I would argue that semantic markup is much more important for CONTENT than it is for LAYOUT. As long as the content within the layout is semantic, you’ll get the benefits of semantic markup while still having a solid layout.

A well written article. It has given me many ideas for my own modular layout.

With that out of the way I must say – your picture does bear a striking resemblence to the character Tony Stark (Ironman). Awesome.

I’ve been looking at a complete re-design of my personal site. Given that I don’t do web design and/or even coding as my primary profession, I have been looking at modular/grid systems to aid in development. They certainly provide an easy way to work with layouts and maintain consistancy.

CSS promotes the separation of content and design elements, and I have worked very hard to maintain that separation for maximum flexibility in my new design. One issue I see with modular layouts in general (and especially the case with systems like BlueprintCSS) is that more of the layout specifics are pushed to the HTML vs. remaining in the CSS.

Am I missing something, or are modular systems specifically designed to provide an intermediate/development level layout solution leading to a finalized fully implemented CSS design?

Jason, great article. This is a game-changer, at least for me, and I can’t wait to start playing around with this framework.

others like left and right are tougher to justify.

Ha-ha, nice one.

Nice article! Think I have to study it again to completely get the idea. But I like it a lot. Like the design of your site with all the transparancy!

this is an unbelievable approach. i never thought that a grid would set me free.

great article. gonna start re-designing my site tonight :)

Thank you for this eye-opener. I was getting bored reading articles on content, and content, and content…

There are various comparable solutions floating around. This reminds me most of Blueprint, which sports 24 columns. Both feel like they take a print-based appraoch.
I do have a preference for Yahoo Grids in this respect. By using percentages rather than absolute widths it feels more webbased and allows for greater flexibility and elasticity. The trade-off lies in the fact that this requires a slightly more complicated mark-up.

Semantically all of the solutions I have seen are disappointing. There also I favor the more neutral mark-up of Yahoo Grids (e.g. yui-b yui-g) to lay-out describing class-nemes indicating a position (e.g. left and right). The obvious solution is to choose names that give an indication of the type of content that goes into a certain container. But that defeats the purpose of a grid based lay-out and would prevent the carry-over of the template from one project to the next.

Thanks Jason.

I’ve tried a couple of css grid frameworks, but sometimes they do too much.

This simple method makes total sense, and doesn’t seem daunting. I think I’ll use something like this on my next project.

Also, very readable writing style. Much appreciated.

A revolutionary article posted on the right place, thanks!

I understand the goal of this technique is to provide more flexibility in layout, but it seems to me just a roundabout way of using in-line styles. CSS provides a remarkable way for us to abstract presentation from structural mark-up, but we always find a way to add it right back in with classes like “right” or “left.”

It reminds me of when designers began finding ways to redesign tabular data (and bloat their code) with numerous div tags instead of using table, tr, and td tags simply because using tables in HTML code suddenly became so “yesterday.”

I’m certainly not saying that this is a bad solution, but I sure would not want to be the one who has to clean up the work of a designer who applies the method with a bit too much zeal: class=“left bold red three about clear medium”

I know it’s been a while, but maybe someone’s still paying attention. =) Is it possible to get this layout method to work with images wrapped in blank (class-less) <p></p> tags? I’ve been trying to wrestle this approach into a CMS lately, but none of the WYSIWYG or Markdown/Textile type editors play nice: they always want to wrap things in <p></p> tags.

I wonder how JSM publishes his articles in EE (which I, too, am using)? Probably straight HTML code…

I really like this post. Thanks for this article, Anyone got any more info about it? I am now your blog’ s rss follower. you are now in my bookmarks.