Usa .clearfix, .left y .right para crear dos columnas.
<div class="clearfix">
<div class="left">...</div>
<div class="right">...</div>
</div>
Usa .clearfix y .left para crear tres o más columnas.
<div class="clearfix">
<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>
</div>
Usa .mt* para crear márgenes superiores, donde (*) puede ser 5, 10, 15 ó 20.
<div class="mt10">...</div>
<div class="mt10">...</div>
<div class="mt10">...</div>
<div class="mt10">...</div>
Usa .ml* para crear márgenes izquierdos, donde (*) puede ser 5, 10, 15 ó 20.
<div class="clearfix">
<div class="left ml10">...</div>
<div class="left ml10">...</div>
<div class="left ml10">...</div>
<div class="left ml10">...</div>
<div class="left ml10">...</div>
</div>
También puedes usar .mb* para crear márgenes inferiores y .mr* para crear márgenes derechos, donde (*) puede ser 5, 10, 15 ó 20.
Usa .tac para centrar elementos inline y/o .tar para alinearlos a la derecha.
<div class="tac">...</div>
<div class="tar">...</div>
Usa .round* para redondear esquinas donde (*) puede ser 2, 4, 8 ó 16.
<div class="clearfix">
<div class="left round2">...</div>
<div class="left round4">...</div>
<div class="left round8">...</div>
<div class="left round16">...</div>
</div>
Usa .icol e .icor para poner un icono al lado izquierdo y/o derecho de un texto o enlace.
<ul>
<li><a href="#"><span class="icol icon-asterisk"></span> Asterisk</a></li>
<li><a href="#"><span class="icol icon-bug"></span> Bug</a></li>
<li><a href="#"><span class="icor icon-check"></span> Check</a></li>
</ul>
Usa .icon e .img-rpl para remplazar texto o enlace por un icono.
<ul>
<li><a href="#" class="icon icon-asterisk img-rpl">Asterisk</a></li>
<li><a href="#" class="icon icon-bug img-rpl">Bug</a></li>
<li><a href="#" class="icon icon-check img-rpl">Check</a></li>
</ul>