Contact Michael Lange

x Cancel
posted 2 years ago

Compact CSS grid system

                .g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12{ display:inline; float:left; margin-left:10px; margin-right:10px; }
.g1{ width:60px;  }  .g2{ width:140px; }
.g3{ width:220px; }  .g4{ width:300px; }
.g5{ width:380px; }  .g6{ width:460px; }
.g7{ width:540px; }  .g8{ width:620px; }
.g9{ width:700px; }  .g10{ width:780px; }
.g11{ width:860px; } .g12{ width:940px; margin-left:auto; margin-right:auto; }
.f{ margin-left:0; }
.l{ margin-right:0; clear:right; }
Raw

I really don't like the lengthy class names in Blueprint and 960gs. I especially don't like the confusing names in other systems/rewrites that that convert the incremental numbering to actual pixel widths.

My argument for this compact version:

  1. A grid system doesn't need to be semantic since it is for layout, not content
  2. Shorter class names result in less mark up
  3. The letter g fully describes what the class is for after seeing it once
  4. The classes .f and .l also fully describe their purpose within the grid system
  5. The classes .first and .last should/will probably be used better elsewhere, like to denote the last item of a list
  6. The class names .alpha and .omega just seem a little ridiculous to me

Yes, the .push, .pull, .prepend, and .append classes have all been stripped. That's just because I personally never use them.

I'm looking forward to suggestions and concerns.

15 View ▸
See More Posts