Enhanced EZ-CSS layouts

For those that do not know, EZ-CSS is a great snippet of code primarily used for column based layouts. I wouldn’t go so far as to call it a “grid” but it can certainly be useful when creating column.

Why use it you ask? Well there are a number of reasons:

• Consistency in your code. (Nobody likes to see “.col1”, “.oneCol”, “.col-1” etc… all doing the same thing);
• Consistency across larger development teams;
• Its flexible and scalable (keep reading);
• It allows for rapid prototyping and deployment;
• It works in IE6!

Sold? Good. The original CSS is available for download and you can also learn how to create different layouts here.

Enhancing EZ-CSS

Since adopting EZ-CSS, I have found myself makes some slight changes, to suite my style of development. The first of which is to add some additional widths to the defaults:

/* 2009 - 2010 (c) | ez-css.org
 * ez-min.css :: version 1.3 :: 03132010
 */
.ez-oh {overflow: hidden; }
.ez-oa {overflow: auto; }
.ez-dt {display: table; }
.ez-it {display: inline-table; }
.ez-tc {display: table-cell; }
.ez-ib {display: inline-block; }
.ez-fl {float: left; }
.ez-fr {float: right; }

.ez-20 {width: 20%; }
.ez-25 {width: 25%; }
.ez-33 {width: 33.33%; }
.ez-50 {width: 50%; }
.ez-66 {width: 66.66%; }
.ez-75 {width: 75%; }
.ez-80 {width: 80%; }

.ez-negml {margin-left:-1px; }
.ez-wr:after,
.ez-box:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.ez-wr,
.ez-box,
.ez-last {
  min-height: 0;
  display: block;
}

.ez-negmr,
.ez-negmx {margin-right: -1px; }

We can add any number of different widths if we should choose. However, I have found that these meet most of my requirements for column based layout.

My next step was to separate the Internet Explorer 6 specific CSS into a different stylesheet. I am not a big fan of CSS hacks. So I have separated out these fixes, to be included in my IE6 stylehsheet (you ARE still supporting IE6 right?).

/* 2009 - 2010 (c) | ez-css.org
 * ez-min.css :: version 1.3 :: 03132010
 */
.ez-wr,
.ez-box,
.ez-last{height: 1%; }

.ez-oh {overflow: visible; }
.ez-fl {margin-right: -3px; }
.ez-fr {margin-left: -3px;}
.ez-negmr {margin-right: -4px; }
.ez-negml {margin-left: -4px; }

The final step is to reset the floats for small screen sizes. I use media queries to create an optimised layout for narrow browsers and mobile browsing (checkout the CSS of this site). So assuming the browser supports media queries (or you are using a script for media query support) we should get a nice linear layout:

@media only screen and (max-device-width: 480px), only screen and (max-width: 50em) {
  .ez-fl,
  .ez-fr,
  .ez-negmr,
  .ez-negmx {
    float: none;
    margin: 0;
  }

  .ez-20,
  .ez-25,
  .ez-33,
  .ez-50,
  .ez-66,
  .ez-75,
  .ez-80 {width: 100%; }
}

There we have it. Some very subtle changes, that might just make your code a little more consistent and help to speed up development of column based layouts.