Usando Bootstrap correctamente con LESS

René OlivoSanto Domingo

23 Sept. 2014

LESSBootstrapUsando

Correctamente con

Mobile FirstWeb Framework

Fluid

Grid

Accesibilidad

Prototipos

El problemaEsto: Es igual a esto:

El problema

● No es porque tienen la misma cantidad de líneas.

● No es porque .row se asemeja a TR.● No es porque se está usando un sistema de

grid.

El problema

Estamos definiendo la presentación de nuestro contenido en el mismo HTML.

.pull-left

.col-md-6

.img-responsive

.show

.clearfix

.hide

.pull-right

.img-circle

.col-sm-offset-2

.row

¿Por qué es un problema?

● Difícil de integrar a un proyecto existente● No se adapta al cambio

"Lo único constante en esta vida es el cambio"

- Cohello

*Broma

Historia RealBootstrap 2.x -> 3.x

¿Qué es LESS?

● CSS con vitaminas● Te permite usar:

○ Variables○ Funciones○ Operadores○ Selectores Anidados○ Etc.

Tutorial de LESSUna introducción

Cómo puede LESS ayudar a Bootstrap?

Separando Contenido de Diseño

Less permite remover totalmente de nuestro HTML las clases de Bootstrap.

Incorporando las bondades de Less

Poder utilizar variables, operadores, mixins y funciones, mejora considerablemente el esquema de trabajo.

Reduciendo el peso del archivo final

Importando solo lo que necesitamos para nuestro proyecto puede reducir el archivo de Bootstrap considerablemente.

Lo que quiero usar

Lo que Bootstrap me obliga a usar

20%

80%

Funciones (Mixins)

● .container -> .container();● .row -> .make-row();● .col-md-8 -> .make-md-column(8);● .col-md-offset-2 -> .make-md-column-offset(2)● .bg-info -> background: @brand-info;● .text-info -> color: @brand-info;

Demo

Consejos finales● Utiliza SASS o LESS en tus proyectos (tutorial).● No adaptes tu HTML a Bootstrap o incl1uso a tu mismo

CSS. ● Lectura recomendada:

Gracias