WL CSS Helpers, el por qué de algo tan obvio

Recientemente he publicado una mini librería en LESS, que genera un archivo CSS de tamaño ínfimo, con un montón de clases para ayudar en la maquetación de contenido HTML.

La razón de ser de ésta librería puede explicarse poniéndonos en situación:

Vamos a hacer una nueva web que nos han encargado, y vamos a utilizar Bootstrap como punto de partida, porque nos ahorra un montón de trabajo y el diseño es actual. Recuerdo los primeros momentos en los que empecé a trabajar con bootrstrap, y mientras ponía divs aquí y allá, de repente, necesitaba alinear uno a la izquierda, y pensé, «vaya!, ya tengo que o poner un ‘style’ inline a lo bestia o crear un archivo CSS para empezar a añadir estilos…» pero espera! si pongo un ‘pull-left’ asunto arreglado! Limpio, entendible, y sin «ensuciar» la maquetación. Que idea tan genial y simple. Una de esas ideas cuyo secreto es cómo la implementas más que la idea en sí.

Bien, siguiendo con la maquetación del nuevo sitio que nos han encargado, vemos que necesitamos mover 20px hacia abajo uno de los divs que acabamos de alinear utilizando «pull-left». No hay clases específicas en bootstrap para llevar esto a cabo, pero podría haberlas, ¿por qué no hacer una lib con esas clases que echamos en falta? Dicho ésto, en cuestión de media hora tenía lista la pequeña lib que os presento, que no tiene misterio alguno ni es un alarde de conocimientos ni nada parecido, pero cuando comienzas a usarla te das cuenta que es TREMENDAMENTE ÚTIL.

Con ella puedes construir sitios web sin una sola línea de CSS exclusiva del proyecto que estés realizando, sólo utilizando las clases de bootstrap y las de ésta lib se puede hacer prácticamente de todo en lo que a layout se refiere. Evidentemente para los colores y otras cosas necesitas un estilo personalizado, que será lo que distinga tu proyecto de todos los demás.

Ejemplos de uso:

1. Colocar una imagen «img-responsive» dentro de un div y centrada.

Con bootstrap sólo, ésto no es posible, ya que «img-responsive» hace que la imagen tenga un «float: left», por lo que es imposible centrarla utilizando un «text-center» en el contenedor, que sería lo obvio. Algo así:

<div class="text-center">
<img src="" class="img-responsive" />
</div>

Con wl-helpers, resolvemos la situación utilizando «wl-ma-auto» que lo que hace es poner un «margin: auto;» a la imagen. De hecho ya no necesitamos el contenedor para la imagen:

<img src="" class="img-responsive wl-ma-auto" />

Aquí os dejo un resumen de todas las clases que tenéis disponibles. El código habla por si solo para saber lo que hace cada una, cómo me gusta el código meta-semántico 🙂

• CLEARFIXES: wl-cfix-{{SIZES}}
• DISPLAY: wl-ds-{block, inline, inline-block, none}
• FLOATS: wl-fl-{none, left, right}
• POSITION: wl-ps-{absolute, fixed, relative, static}
• MARGINS: wl-ma-auto, wl-ma-{all, bottom, left, right, top}-{no, {SIZES}}
• PADDINGS: wl-pa-{all, bottom, left, right, top}-{SIZES}
• FLUID BOXES: wl-box-{{BOXSIZES}}
• FULLWIDTH: wl-fullwidth

Os dejo aquí el enlace para descargar la librería. A divertirse maquetando!

Descargar wl-helpers desde GitHub