Como utilizar Bootstrap correctamente empleando LESS para adaptar el framework a nuestro proyecto y no lo contrario.

1. René Olivo
Santo Domingo
23 Sept. 2014
LESS
Bootstrap
Usando
Correctamente con

2. Mobile FirstWeb Framework
Fluid
Grid
Accesibilidad
Prototipos

3. El problema
Esto: Es igual a esto:

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

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

6. ¿Por qué es un problema?
● Difícil de integrar a un proyecto existente
● No se adapta al cambio

7. "Lo único constante en
esta vida es el cambio"
- Cohello
*Broma

8. Historia Real
Bootstrap 2.x -> 3.x

10. ¿Qué es LESS?
● CSS con vitaminas
● Te permite usar:
○ Variables
○ Funciones
○ Operadores
○ Selectores Anidados
○ Etc.

11. Tutorial de LESS
Una introducción

12. Cómo puede LESS
ayudar a Bootstrap?

13. Separando Contenido de Diseño
Less permite remover totalmente de nuestro
HTML las clases de Bootstrap.

14. Incorporando las bondades de Less
Poder utilizar variables, operadores, mixins y
funciones, mejora considerablemente el
esquema de trabajo.

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

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

17. Demo

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

19. Gracias