cmon is an HTML preprocessor that adds powerful layout capabilities to your markup. With cmon, you can engineer solid, cross-browser layouts that in CSS would require hours of writing and debugging browser-specific behaviour.

To use cmon, embed simple tags in your markup. cmon will then compile these to clean, valid HTML.

cmon understands 3 tags: cmon, baby and yeah. It also understands 2 attributes: babyspan and yeahspan.

<cmon>
    <baby>
        <yeah yeahspan="3">Header</yeah>
    </baby>

    <baby>
        <yeah>Left column</yeah>
        <yeah>Middle column</yeah>
        <yeah>Right column</yeah>
    </baby>

    <baby>
        <yeah yeahspan="3">Footer</yeah>
    </baby>
</cmon>

This (very simplistic) example will produce a 3-column layout. With a sprinkling of CSS, this will be ready for production use.

<cmon>-oriented layout has several interesting features:

All yeahs in a baby are always the same height. This makes equal-height columnar layouts trivial.

The height of baby tags and width of yeah tags is automatically calculated depending on the width and height of the cmon and the size of the content. This makes it trivial, for example, to arrange an arbitrary number of equally-sized elements horizontally, with even distribution. In CSS, this would necessitate ugly explicit widths (percentages at best; absolute values or extra markup if you were hoping to specify some padding).

Heights and widths of individual babys and yeahs can be explicitly specified (in CSS, as either absolute or percentage values). babys and yeahs for which a height/width has not been specified will still be sized automatically.

CSS height and width properties for cmon, baby and yeah elements apply to the full height and width of the element, not the content. This is like the proposed box-sizing: border-box; declaration in CSS3, except it works now, in all browsers!

Content inside yeahs can be trivially vertically-aligned by simply applying vertical-align: middle; to the yeah element. That’s right: vertical alignment that just works, in all browsers.

cmon comes with a command-line executable. It can take files specified on the command line or from standard in. The compiled code is provided on standard out.

cmon index.html
cmon < index.html

gem sources -a http://gems.github.com/
sudo gem install aanand-cmon

Yes! cmon comes with a drop-in Rack middleware component. Using it should be as simple as:

require 'cmon/rack'
use Cmon::Rack

At the moment, only by giving them classes (e.g. <cmon class="foo">). However, a CSS processor is feasible.

Copyright © 2009 Aanand Prasad. See LICENSE for details.