TipSS: Framework para CSS

Estructura

Usa .clearfix, .left y .right para crear dos columnas.

Izquierda (200px)
Derecha (530px)

Código fuente:

<div class="clearfix">
	<div class="left">...</div>
	<div class="right">...</div>
</div>

Usa .clearfix y .left para crear tres o más columnas.

Izquierda (145px)
Principal (425px)
Derecha (145px)

Código fuente:

<div class="clearfix">
	<div class="left">...</div>
	<div class="left">...</div>
	<div class="left">...</div>
</div>

Márgenes

Usa .mt* para crear márgenes superiores, donde (*) puede ser 5, 10, 15 ó 20.

1
2
3
4

Código fuente:

<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.

1
2
3
4
5

Código fuente:

<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.

Alineación

Usa .tac para centrar elementos inline y/o .tar para alinearlos a la derecha.

Texto alineado al centro
Texto alineado a la derecha

Código fuente:

<div class="tac">...</div>
<div class="tar">...</div>

Esquinas redondeadas

Usa .round* para redondear esquinas donde (*) puede ser 2, 4, 8 ó 16.

2
4
8
16

Código fuente:

<div class="clearfix">
	<div class="left round2">...</div>
	<div class="left round4">...</div>
	<div class="left round8">...</div>
	<div class="left round16">...</div>
</div>

Iconos

Usa .icol e .icor para poner un icono al lado izquierdo y/o derecho de un texto o enlace.

Código fuente:

<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.

Código fuente:

<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>