ZXCSS

Hi, Dave here, welcome to my intro and demo of ZXCSS

Base styles

The base styles ensure cross-browser compatibility and leave you free to concentrate on layout:

<div class="row">
  <div class="col">
    <div class="inn">
    </div>
  </div>
</div>

Layout styles

To produce the most robust and responsive layouts add custom classes to the rows, columns and inners as necessary:

Content
Sidebar
.layout-content {width:70%;}
.layout-sidebar {width:30%;}
.layout-main {margin-left:-20px;}
.layout-main .inn {margin-left:20px;padding:20px;background:#eee;}

<div class="row layout-main">
  <div class="col layout-content">
    <div class="inn">
    </div>
  </div>
  <div class="col layout-menu">
    <div class="inn">
    </div>
  </div>
</div>

Quick styles

Quick styles are for when you want to create a prototype or for web authors with no access to styles.

Quick styles: width

For example: w1o2 is equivalent to width:50%, w1o4 = 25% etc.

w1o2
w1o4
w1o4
<div class="row layout-main">
  <div class="col w1o2">
    <div class="inn">
    </div>
  </div>
  <div class="col w1o4">
    <div class="inn">
    </div>
  </div>
  <div class="col w1o4">
    <div class="inn">
    </div>
  </div>
</div>

Quick styles: placement

I added placement or position classes in order to provide control over the position of columns independent of source order.

1 w2o4 p2o4

2 w1o4 p4o4

3 w1o4 p1o4

<div class="row layout-main">
  <div class="col w1o2 p2o4">
    <div class="inn">1
    </div>
  </div>
  <div class="col w1o4 p4o4">
    <div class="inn">2
    </div>
  </div>
  <div class="col w1o4 p1o4">
    <div class="inn">3
    </div>
  </div>
</div>

The placement or position classes need applying to all columns in a row to be completely reliable.

Quick styles: max width and centered

Again for prototyping or when a web author has no access to the CSS I added max width and centering classes to give some control over page width and centering.

Div 1. Content: 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.

Div 2. Sidebar: 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. Menu: 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.

The placement or position classes need applying to all columns in a row to be completely reliable.

Centered 980px max-width page. All columns set 20px gutters, 20px padding and a grey background.

Bog Standard

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 Order Columns – Content First, Sidebar then Sitemap

Div 1. Content: 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.

Div 2. Sidebar: 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. Sitemap: 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.

With Custom Classes

Centered 980px max-width page. All columns set 20px gutters, 20px padding and a grey background.

Bog Standard

Gutters set with: .row {margin-left:-20px;} .inn {margin-left:20px;}

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.

Bog Standard 2

Gutters set with: .row {} .inn {margin-left:20px;} .col-3 .inn {margin-right:0;}

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 Order Columns – Content First, Sidebar then Sitemap

Div 1. Content: 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.

Div 2. Sidebar: 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. Sitemap: 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.