ZXCSS Layout 0.5 beta

ZXCSS is a CSS Grid Framework to create fluid layouts

It defines a bunch of CSS classes with some easy HTML to soothe the pain of layouts.

Fluid

Layouts adapt to viewing preferences

No fixed-pixel-width columns here just %s and some handy max-widths to set page widths.

Flexible

For a whole layout or just a part

Wherever a column is placed benefit from the array of width classes that range from w1o1 to w12o12. Where w1o2 (width 1 over 2) is 50%, w3o4 is 75% and so on.

Lightweight

Bandwidth friendly

4 KB minified it's light, not as light as some, but slim like Elsa Pataky.

Any Order Columns

Position columns independent of source order

Smoke and mirrors with floats. Classes range from p1o1 to p12o12. Where p1o4 puts a column in first place, p3o4 places a column third of four and so on.

HTML

Code

HTML
<div class="row">
  <div class="col w1o2">
    <div class="inn">
      <p>Div 1.</p>
    </div>
  </div>
  <div class="col w1o4">
    <div class="inn">
      <p>Div 2.</p>
    </div>
  </div>
  <div class="col w1o4">
    <div class="inn">
      <p>Div 3.</p>
    </div>
  </div>
</div>
CSS

With Custom Classes

HTML
<div class="row">
  <div class="col col-1">
    <div class="inn">
      <p>Div 1.</p>
    </div>
  </div>
  <div class="col col-2">
    <div class="inn">
      <p>Div 2.</p>
    </div>
  </div>
  <div class="col col-3">
    <div class="inn">
      <p>Div 3.</p>
    </div>
  </div>
</div>
CSS
.col-1 {width:50%;}
.col-2 {width:25%;}
.col-3 {width:25%;}

Demo/Fiddle

CSS

The Core Classes

row is a row; col is a column and inn is an inner to style column margins, padding, background and borders.

Column Classes Out-of-the-Box

Widths: w1o1 to w12o12 where w1o2 is a width of 50%, w1o4 is a width of 25% and so on.

Max-widths: w480, w768, w960, w980, w1140 and w1380. Great for setting the main page column width.

Positions: p1o1 to p12o12 determine where the column is placed. p4o5 puts a column in position four of a five column row and so on.

Custom Classes

Out-of-the-box classes are great to throw together a layout or to give a web author some options. But to really do some damage combine the Core Classes with your own and kick-style.

Use

<!-- ZXCSS Layout -->
<!--[if lte IE 7]><link href="path-to/zxcss-0.5-beta-lte-ie7.min.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<!--[if lte IE 6]><link href="path-to/zxcss-0.5-beta-lte-ie6.min.css" rel="stylesheet" type="text/css" media="all" /><![endif]-->
<link href="path-to/zxcss-0.5-beta.min.css" rel="stylesheet" type="text/css" media="all" />

Paste the above into the Head element of a HTML document, change path-to-zxcss and upload the linked CSS files.
Source files: zxcss-0.5-beta.css, zxcss-0.5-beta-lte-ie7.css and zxcss-0.5-beta-lte-ie6.css.

Goals of ZXCSS

  • to create fluid layouts
  • to be free of cross-browser issues
  • to make small-screen friendly layouts easier
  • to be able to sketch-out some layouts without much CSS work
  • to assume/do as little as possible and as much as needed

ZXCSS Layout is one of many grid and layout systems/frameworks available. Here are some that I am aware of: 1140 Grid, 960 Grid System, Blueprint, EZ-CSS (ez-css.org), FluidGrid (fluid.newgoldleaf.com), inuitcss (csswizardry.com) and ZXCSS Layout :)

Compatibility

Chrome, Firefox 1.5+, Internet Explorer* 5.5+, Opera** 7.54+, Safari 1.3+
* IE 7+ are fully compatible, see IE lte 6 section for more
** Curiously Opera 7–9 quantized certain % values (brunildo.org)

Margin/Gutter/Gap/Spacing

Code

HTML
<div class="row">
  <div class="col w1o2">
    <div class="inn">
      <p>Div 1.</p>
    </div>
  </div>
  <div class="col w1o4">
    <div class="inn">
      <p>Div 2.</p>
    </div>
  </div>
  <div class="col w1o4">
    <div class="inn">
      <p>Div 3.</p>
    </div>
  </div>
</div>
CSS
.row {margin-right:-18px;}
.inn {margin-right:18px;}

Out-of-the-box there are no classes defined for margins/gutters. The above CSS or similar will get quick results, but to have full control custom classes will need adding and styling.

With Custom Classes

HTML
<div class="row">
  <div class="col col-1">
    <div class="inn">
      <p>Div 1.</p>
    </div>
  </div>
  <div class="col col-2">
    <div class="inn">
      <p>Div 2.</p>
    </div>
  </div>
  <div class="col col-3">
    <div class="inn">
      <p>Div 3.</p>
    </div>
  </div>
</div>
CSS
.row {margin-right:-18px;}
.inn {margin-right:18px;}
.col-1 {width:50%;}
.col-2 {width:25%;}
.col-3 {width:25%;}

or

.row {margin-right:0;}
.col-1 {width:50%;}
.col-2 {width:25%;}
.col-3 {width:25%;}
.inn {margin-right:18px;}
.col-3 .inn {margin-right:0;}

etc.

Demo

Div 1. The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.

Div 2. For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale.

Div 3. The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of locomotion, and the peculiar life with which it seemed endowed.

Any Column Order

Code

HTML
<div class="row">
  <div class="col w1o3 p3o3">
    <div class="inn">
      <p>Floated Right</p>
    </div>
  </div>
  <div class="col w1o3 p1o3">
    <div class="inn">
      <p>Floated Left by Default</p>
    </div>
  </div>
  <div class="col w1o3 p2o3">
    <div class="inn">
      <p>Floated Left by Default</p>
    </div>
  </div>
</div>
CSS

With Custom Classes

HTML
<div class="row">
  <div class="col col-1">
    <div class="inn">
      <p>Div 1.</p>
    </div>
  </div>
  <div class="col col-2">
    <div class="inn">
      <p>Div 2.</p>
    </div>
  </div>
  <div class="col col-3">
    <div class="inn">
      <p>Div 3.</p>
    </div>
  </div>
</div>
CSS
.col {margin-right:-100%;width:33.3333%;}
.col-1 {margin-left:66.6666%;}
.col-2 {margin-left:0;}
.col-3 {margin-left:33.3333%;}

Demo

Div 1. The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.

Div 2. For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale.

Div 3. The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of locomotion, and the peculiar life with which it seemed endowed.

A Page Layout

Code

HTML
<div class="row">
  <div class="col w980 center">
    <div class="inn">

      <h1>ZXCSS Layout Demo</h1>

      <div class="row">
        <div class="col w1o2">
          <div class="inn">
            <p>Div 1. The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.</p>
          </div>
        </div>
        <div class="col w1o4">
          <div class="inn">
            <p>Div 2. For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale. </p>
          </div>
        </div>
        <div class="col w1o4">
          <div class="inn">
            <p>Div 3. The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of locomotion, and the peculiar life with which it seemed endowed.</p>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>
CSS
body {margin:36px;}
.row {margin-right:-18px;}
.inn {margin-right:18px;}

The CSS used here is the simplest to give all columns 18px gutters. Note that the body has a margin 2× that of the row, which is calculated to prevent a horizontal scrollbar appearing.

There are of course different ways to setup a page column but the example shows more page rows or columns could be added.

With Custom Classes

HTML
<div class="row">
  <div class="col col-page">
    <div class="inn">

      <h1>ZXCSS Layout Demo</h1>

      <div class="row row-1">
        <div class="col col-1">
          <div class="inn">
            <p>Div 1. The year 1866 was signalised by a remarkable incident, a mysterious and puzzling phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the maritime population and excited the public mind, even in the interior of continents, seafaring men were particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and America, naval officers of all countries, and the Governments of several States on the two continents, were deeply interested in the matter.</p>
          </div>
        </div>
        <div class="col col-2">
          <div class="inn">
            <p>Div 2. For some time past vessels had been met by "an enormous thing," a long object, spindle-shaped, occasionally phosphorescent, and infinitely larger and more rapid in its movements than a whale. </p>
          </div>
        </div>
        <div class="col col-3">
          <div class="inn">
            <p>Div 3. The facts relating to this apparition (entered in various log-books) agreed in most respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its surprising power of locomotion, and the peculiar life with which it seemed endowed.</p>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</div>
CSS
body {margin:36px;}
.row {margin-right:-18px;}
.inn {margin-right:18px;}

.col-page {width:auto!important;max-width:980px;width:980px;margin:0 auto;float:none;}
.col-page:before,
.col-page:after {content:"\0020";display:block;height:0;overflow:hidden;}
.col-page:after {clear:both;}

.row-1 .col-1 {width:50%;}
.row-1 .col-2,
.row-1 .col-3 {width:25%;}

Column Styles: Background, Padding etc.

Custom Classes

HTML
<div class="row row-1">
  <div class="col col-1">
    <div class="inn">
      <p>Div 1.</p>
    </div>
  </div>
  <div class="col col-2">
    <div class="inn">
      <p>Div 2.</p>
    </div>
  </div>
  <div class="col col-3">
    <div class="inn">
      <p>Div 3.</p>
    </div>
  </div>
</div>
CSS
.row-1 {margin-right:-18px;}
.row-1 .col-1 {width:50%;}
.row-1 .col-2 {width:25%;}
.row-1 .col-3 {width:25%;}
.row-1 .inn {margin-right:18px;background:#ddd;padding:1px 18px;}
.row-1 .col-2 .inn {background:#dee;}

IE lte 6

Max-width is not supported in IE lte 6, therefore two things need to be addressed: images and other media in columns, and max-width columns like w980.

Images and Other Media in Columns

In IE lte 6 images, iframes, video and audio will be clipped by the enclosing column. Each column is set to overflow:hidden and word-wrap:break-word. word-wrap:break-word prevents long unbroken text from expanding a column and breaking layout.

Max-width Columns like w980

Rather than polyfill for IE lte 6, a plain width is used instead. This isn't ideal but IE lte 6 users will get an ok experience, while IE7, 8 and 9+ users get the fluid deal.

There are couple of ways to polyfill that I know of, the first being with CSS expressions similar to:

.w980 {width:expression(document.body.clientWidth > 980 ? "980px" : "auto");}

And the second, as there is reason to use plain JavaScript instead (robertnyman.com): a JavaScript solution. To do: Couple of links to good JavaScript solutions.

CSS3 Multi-Columns

CSS3 Multi-Columns (W3C) are really cool, check them out if you haven't already. Also check out the fab CSS3 Generator to create some nice and easy. Here are a few I prepared earlier:

/*/ CSS Columns /*/
.cols-2 {-moz-column-count:2;-moz-column-gap:12px; -webkit-column-count:2;-webkit-column-gap:12px; column-count:2;column-gap:12px;}
.cols-3 {-moz-column-count:3;-moz-column-gap:12px; -webkit-column-count:3;-webkit-column-gap:12px; column-count:3;column-gap:12px;}
.cols-4 {-moz-column-count:4;-moz-column-gap:12px; -webkit-column-count:4;-webkit-column-gap:12px; column-count:4;column-gap:12px;}
.cols-5 {-moz-column-count:5;-moz-column-gap:12px; -webkit-column-count:5;-webkit-column-gap:12px; column-count:5;column-gap:12px;}
.cols-6 {-moz-column-count:6;-moz-column-gap:12px; -webkit-column-count:6;-webkit-column-gap:12px; column-count:6;column-gap:12px;}

Addressing Right-to-Left (RTL) and Left-to-Right (LTR)

Input here would be appreciated as I have no experience in creating websites for RTL languages. However I have a little experience with multiple languages on one page and multiple languages through a switcher.

My thoughts would be that if a page is to switch between a LTR language page to RTL or vice-versa then a page would likely be reloaded with the new content. Assuming that, a different template may be used or a class applied that mixes in with custom classes to style columns etc the way they are wanted. Therefore nothing needs to be added in ZXCSS to help here.

Projects that could help here:

Equal Height Columns

Nothing out-of-the-box. Projects that could help here: