Usar LESS con Bootstrap

Personaliza y expande Bootstrap con LESS un preprocesador CSS, para tomar ventaja de las variables, las mezclas y demás utilizado para crear CSS de Boostrap.

¿Por qué LESS?

Boostrap se ha hecho con LESS desde el interior, un lenguage de hoja de estilo dinámico creado por nuestro buen amigo Alexis Sellier. Hace que el desarrollo de los sistemas basados en CSS sean más rápidos, fáciles y divertidos.

¿Qué se incluye?

Como extensión de CSS, LESS incluye variables, mezclas para fragmentos de código reutilizables, operaciones de matemáticas simples, anidaciones e incluso funciones de colores.

Aprende más

LESS CSS

Visita la página oficial http://lesscss.org para saber más

Variables

Manejar colores y valores de pixel en CSS puede ser un poco doloroso, normalmente es un copia-pega completo. Pero sin LESS - asigna colores o valores de pixel como variables ni cambiarlas.

Mezclas

Aquellas declaraciones de border-radius triples que necesitas para hacer un CSS normal. Ahora están listas con la ayuda de mezclas, fragmentos de código que puedes reutilizar en cualquier lugar.

Operaciones

Haz tu grid importante, y más super flexible haciendo las matemáticas al vuelo con operaciones. Multiplica, divide, suma y resta a tu manera con CSS.

Hipervínculos

@linkColor #08c Color de texto de enlace por defecto
@linkColorHover darken(@linkColor, 15%) Color de texto de enlace por defecto en Hover

Systema de grid

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

Tipografía

@baseFontSize 13px
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight 18px

Colores de escala de grises

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee
@white #fff

Colores vivos

@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6

Componentes

Botones

@primaryButtonBackground @linkColor

Formularios

@placeholderText @grayLight

Navbar

@navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white

Estados de formulario y alertas

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Sobre las mezclas

Mezclas básicas

Una mezcla básica es una parte esencial para el fragmento de CSS. Se escriben al igual que una clase CSS y se puede llamar en cualquier lugar.

.element {
  .clearfix();
}

Mezclas paramétricas

Una mezcla paramétrica es como una mezcla básica pero también acepta parámetros (de ahí el nombre) con valores por defecto opcionales.

.element {
  .border-radius(4px);
}

Añade fácilmente el tuyo propio

Casi todas las mezclas de Boostrap se almacenan en mixing.less, un archivo de utilidad .less maravilloso que te permite usar una mezcla en cualquier archivo del conjunto de herramientas (toolkit).

Así que, ves y usa los que ya existen o añade el tuyo propio si lo necesitas.

Mezclas incluidas

Utilidades

Mezcla Parámetros Uso
.clearfix() none Añade cualquier pariente para quitar los floats de adentro
.tab-focus() none Aplica el estilo Webkit focus y redondea el outline de Firefox
.center-block() none Auto-centra un elemento de bloque usando margin: auto
.ie7-inline-block() none Uso normal de la propiedad display: inline-block con soporte para IE7
.size() @height: 5px, @width: 5px Ajusta rápidamente la altura y el ancho de una de las líneas
.square() @size: 5px Crea en .size() para ajustar el ancho y la altura del mismo valor
.opacity() @opacity: 100 Ajusta, en número enteros, el porcentaje de opacidad (por ejemplo, “50” o “75”)

Formularios

Mezcla Parámetros Uso
.placeholder() @color: @placeholderText Ajusta el color de texto de placeholder para las entradas de texto

Tipografía

Mezcla Parámetros Uso
#font > #family > .serif() none Hace que un elemento utilice la fuente serif
#font > #family > .sans-serif() none Hace que un elemento utilice la fuente sans-serif
#font > #family > .monospace() none Hace que un elemento utilice la fuente monospace
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ajusta fácilmente el tamaño, el ancho y la altura de la línea
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ajusta la familia de la fuente a serif, y controla el tamaño, el ancho y la altura de la línea
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ajusta la familia de la fuente a sans-serif, y controla el tamaño, el ancho y la altura de la línea
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ajusta la familia de la fuente a monospace, y controla el tamaño, el ancho y la altura de la línea

Sistema de grid

Mezcla Parámetros Uso
.container-fixed() none Crea un contenedor centrado horizontalmente para establecer tu contenido
#grid > .core() @gridColumnWidth, @gridGutterWidth Genera un sistema de pixel de grid (contenedor, fila y columna) con n columnas y x pixeles de ancho
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Genera un sistema de porcentaje de grid con n columnas y x % de ancho

Propiedades CSS3

Mezcla Parámetros Uso
.border-radius() @radius: 5px Redondea las esquinas de un elemento. Puede ser un valor individual o cuatro valores separados
.box-shadow() @shadow: 0 1px 3px rgba(0,0,0,.25) Añade una sombra a un elemento
.transition() @transition Añade un efecto de transición CSS3 (por ejemplo, all .2s linear)
.rotate() @degrees Rota un elemento n grados
.scale() @ratio Escala un elemento n veces la medida original
.translate() @x: 0, @y: 0 Mueve un elemento en los planos x e y
.background-clip() @clip Corta el fondo de un elemento (útil para border-radius)
.background-size() @size Controla el tamaño de las imágenes de fondo vía CSS3
.box-sizing() @boxmodel Cambia el modelo de casilla para un elemento (por ejemplo, border-box para un input de ancho completo)
.user-select() @select Controla la selección de cursor del texto en una página
.resizable() @direction: both Hace que se pueda cambiar el tamaño de cualquier elemento a la derecha y en la parte inferior
.content-columns() @columnCount, @columnGap: @gridColumnGutter Hace que el contenido de cualquier elemento use columnas CSS3

Fondos y degradados

Mezcla Parámetros Uso
#translucent > .background() @color: @white, @alpha: 1 Da un elemento un color de fondo translúcido
#translucent > .border() @color: @white, @alpha: 1 Da un elemento un color de borde translúcido
#gradient > .vertical() @startColor, @endColor ""Crea un degradado de fondo vertical de navegador cruzado""
#gradient > .horizontal() @startColor, @endColor ""Crea un degradado de fondo horizontal de navegador cruzado""
#gradient > .directional() @startColor, @endColor, @deg ""Crea un degradado de fondo direccional de navegador cruzado""
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor ""Crea un degradado de fondo de tres colores de navegador cruzado""
#gradient > .radial() @innerColor, @outerColor ""Crea un degradado de fondo radial de navegador cruzado""
#gradient > .striped() @color, @angle ""Crea un degradado de fondo a rayas de navegador cruzado""
#gradientBar() @primaryColor, @secondaryColor ""Utilizado para botones que asignan un degradado o un borde un poco más oscuro""
Nota: ""si estás enviando una petición pull a GitHub con CSS modificado, debes recompilar el CSS vía cualquiera de estos métodos.""

Herramientas para compilar

Nodo con makefile

Instala el compilador de línea de comando LESS y uglify-js en global con npm poniendo en funcionamiento el siguiente comando:

$ npm install -g less uglify-js

Una vez instalado, simplemente pon en funcionamiento make desde la raíz de tu directorio boostrap y ya estará listo.

Además, si tienes watchr instalado, puedes poner en funcionamiento make watch para hacer que boostrap se rehaga automáticamente cada vez que edites un archivo en el lib de boostrap (no se necesita, solo es un método de conveniencia).

Línea de comando

Instala la herramienta de línea de comando LESS vía Node y pon en funcionamient el siguiente comando:

$ lessc ./lib/bootstrap.less > bootstrap.css

Asegúrate de incluir --compress en ese comando si estás intentado guardar algunos bytes!

Javascript

Descárgate la última versión de Less.js e incluye el camino para él mismo (y Boostrap) en el <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Para recompilar los archivos .less, simplemente guárdalos y recarga tu página. Less.js los recompila y almacena en un almacen local.

App de Mac no oficial

La aplicación de Mac no oficial observa directorios de .less y compila el código de los archivos locales después de cada copia guardada de un archivo observado .less.

$

Si quieres, puedes hacer preferencias flip-flop (toggle) en la aplicación para una minimización y en que directorio los archivos compilados terminarán.

Más aplicaciones de Mac

Crunch

Crunch es un editor LESS genial y un compilador creado en Adobe Air.

CodeKit

Creado por el mismo tipo que la aplicación de Mac no oficial, CodeKit es una aplicación de Mac que compila LESS, SASS, Stylus y CoffeeScript.

Simpless

Aplicación de Mac, Linux y PC para arrastrar y dejar archivos LESS de compilación. Además, el código de fuente están en GitHub.