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 yeah
s 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 baby
s and yeah
s can be explicitly specified (in CSS, as either absolute or percentage values). baby
s and yeah
s 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 yeah
s 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.