SlideShare una empresa de Scribd logo
1 de 19
Descargar para leer sin conexión
René Olivo
Santo Domingo
23 Sept. 2014
LESS
Bootstrap
Usando
Correctamente con
Mobile FirstWeb Framework
Fluid
Grid
Accesibilidad
Prototipos
El problema
Esto: 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 Real
Bootstrap 2.x -> 3.x
¿Qué es LESS?
● CSS con vitaminas
● Te permite usar:
○ Variables
○ Funciones
○ Operadores
○ Selectores Anidados
○ Etc.
Tutorial de LESS
Una 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

Más contenido relacionado

La actualidad más candente

La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...Asociación Webmasters Cantabria
 
Drush la navaja suiza de drupal
Drush   la navaja suiza de drupalDrush   la navaja suiza de drupal
Drush la navaja suiza de drupalJavier Gomez
 
Puntos clave para tener un wordpress rápido by Raiola Networks
Puntos clave para tener un wordpress rápido by Raiola NetworksPuntos clave para tener un wordpress rápido by Raiola Networks
Puntos clave para tener un wordpress rápido by Raiola NetworksRaiola Networks
 
Álvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
Álvaro Fontela Cofundador Raiola Networks. Consultor WordpressÁlvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
Álvaro Fontela Cofundador Raiola Networks. Consultor WordpressNetLab
 
Joomla y Wordpress
Joomla y WordpressJoomla y Wordpress
Joomla y WordpressEd Miranda
 
Los mejores trucos para aumentar la velocidad en joomla!
Los mejores trucos para aumentar la velocidad en joomla!Los mejores trucos para aumentar la velocidad en joomla!
Los mejores trucos para aumentar la velocidad en joomla!Carlos M. Cámara
 
Wpo para wordpress josé antonio esteve sáez - meetup wp murcia
Wpo para wordpress   josé antonio esteve sáez - meetup wp murciaWpo para wordpress   josé antonio esteve sáez - meetup wp murcia
Wpo para wordpress josé antonio esteve sáez - meetup wp murciaJose Antonio Esteve Saez
 
Te presento wordpress
Te presento wordpressTe presento wordpress
Te presento wordpressSebitx Lima
 
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...Darío BF
 
Wordpress como el CMS más completo en la actualidad
Wordpress como el CMS más completo en la actualidadWordpress como el CMS más completo en la actualidad
Wordpress como el CMS más completo en la actualidadJosé Luis Arriaza Sanjurjo
 
10 Claves para mejorar la seguridad de tu WP
10 Claves para mejorar la seguridad de tu WP10 Claves para mejorar la seguridad de tu WP
10 Claves para mejorar la seguridad de tu WPIñaki Arenaza
 
WordPress para programadores
WordPress para programadoresWordPress para programadores
WordPress para programadoreswpargentina
 

La actualidad más candente (19)

La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
La potencia sin control no sirve de nada, claves para aprovechar el uso de Wo...
 
WordPress
WordPressWordPress
WordPress
 
Drush la navaja suiza de drupal
Drush   la navaja suiza de drupalDrush   la navaja suiza de drupal
Drush la navaja suiza de drupal
 
Puntos clave para tener un wordpress rápido by Raiola Networks
Puntos clave para tener un wordpress rápido by Raiola NetworksPuntos clave para tener un wordpress rápido by Raiola Networks
Puntos clave para tener un wordpress rápido by Raiola Networks
 
Álvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
Álvaro Fontela Cofundador Raiola Networks. Consultor WordpressÁlvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
Álvaro Fontela Cofundador Raiola Networks. Consultor Wordpress
 
Wordpress
WordpressWordpress
Wordpress
 
Joomla y Wordpress
Joomla y WordpressJoomla y Wordpress
Joomla y Wordpress
 
Los mejores trucos para aumentar la velocidad en joomla!
Los mejores trucos para aumentar la velocidad en joomla!Los mejores trucos para aumentar la velocidad en joomla!
Los mejores trucos para aumentar la velocidad en joomla!
 
Que es WordPress
Que es WordPressQue es WordPress
Que es WordPress
 
Wpo para wordpress josé antonio esteve sáez - meetup wp murcia
Wpo para wordpress   josé antonio esteve sáez - meetup wp murciaWpo para wordpress   josé antonio esteve sáez - meetup wp murcia
Wpo para wordpress josé antonio esteve sáez - meetup wp murcia
 
Wordpress
Wordpress Wordpress
Wordpress
 
Te presento wordpress
Te presento wordpressTe presento wordpress
Te presento wordpress
 
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...
WPEuskadi 2015 - La potencia sin control no sirve de nada, claves para aprove...
 
Wordpress como el CMS más completo en la actualidad
Wordpress como el CMS más completo en la actualidadWordpress como el CMS más completo en la actualidad
Wordpress como el CMS más completo en la actualidad
 
10 Claves para mejorar la seguridad de tu WP
10 Claves para mejorar la seguridad de tu WP10 Claves para mejorar la seguridad de tu WP
10 Claves para mejorar la seguridad de tu WP
 
Play2012
Play2012Play2012
Play2012
 
WordPress
WordPressWordPress
WordPress
 
Alternativas de hosting para WordPress
Alternativas de hosting para WordPressAlternativas de hosting para WordPress
Alternativas de hosting para WordPress
 
WordPress para programadores
WordPress para programadoresWordPress para programadores
WordPress para programadores
 

Destacado (20)

Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Upv me prope_s1_presentacion
Upv me prope_s1_presentacionUpv me prope_s1_presentacion
Upv me prope_s1_presentacion
 
Presentación seres vivos
Presentación seres vivosPresentación seres vivos
Presentación seres vivos
 
Los medios de comunicación
Los medios de comunicaciónLos medios de comunicación
Los medios de comunicación
 
Trabajo ignacio
Trabajo ignacioTrabajo ignacio
Trabajo ignacio
 
Paint
PaintPaint
Paint
 
prevencion de accidentes de trabajo
prevencion de accidentes de trabajoprevencion de accidentes de trabajo
prevencion de accidentes de trabajo
 
Servicio de Boletín Electronico
Servicio de Boletín ElectronicoServicio de Boletín Electronico
Servicio de Boletín Electronico
 
Lanzamiento de la propuesta a padres de familia
Lanzamiento de la propuesta a padres de familiaLanzamiento de la propuesta a padres de familia
Lanzamiento de la propuesta a padres de familia
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Actividad 1.8 equipo 1 final
Actividad 1.8   equipo 1 finalActividad 1.8   equipo 1 final
Actividad 1.8 equipo 1 final
 
Mapas transgenicos[1]
Mapas transgenicos[1]Mapas transgenicos[1]
Mapas transgenicos[1]
 
Ibrain
IbrainIbrain
Ibrain
 
Portabilidad numrica en el sistema de telecomunicaciones 1
Portabilidad numrica en el sistema de telecomunicaciones 1Portabilidad numrica en el sistema de telecomunicaciones 1
Portabilidad numrica en el sistema de telecomunicaciones 1
 
GPEC
GPECGPEC
GPEC
 
Outlook.
Outlook.Outlook.
Outlook.
 
Paleo bizantino romanico
Paleo bizantino romanicoPaleo bizantino romanico
Paleo bizantino romanico
 
Diapositivas rosas
Diapositivas rosas Diapositivas rosas
Diapositivas rosas
 
JUPITER R APRENDIZAJE AUTONOMO Y APRENDIZAJE SIGNIFICATIVO
JUPITER R APRENDIZAJE AUTONOMO Y APRENDIZAJE SIGNIFICATIVOJUPITER R APRENDIZAJE AUTONOMO Y APRENDIZAJE SIGNIFICATIVO
JUPITER R APRENDIZAJE AUTONOMO Y APRENDIZAJE SIGNIFICATIVO
 
Laura aguirre
Laura aguirreLaura aguirre
Laura aguirre
 

Similar a Usando Bootstrap correctamente con LESS

Similar a Usando Bootstrap correctamente con LESS (20)

Bootstrap.pptx
Bootstrap.pptxBootstrap.pptx
Bootstrap.pptx
 
Guia bootstrap
Guia bootstrapGuia bootstrap
Guia bootstrap
 
S6 ds2
S6 ds2S6 ds2
S6 ds2
 
S6-DS2.pptx
S6-DS2.pptxS6-DS2.pptx
S6-DS2.pptx
 
Patrones de diseño de software
Patrones de diseño de softwarePatrones de diseño de software
Patrones de diseño de software
 
Modularización efectiva - domando a la hidra
Modularización efectiva - domando a la hidraModularización efectiva - domando a la hidra
Modularización efectiva - domando a la hidra
 
Desarrollo modermo de aplicaciones web
Desarrollo modermo de aplicaciones webDesarrollo modermo de aplicaciones web
Desarrollo modermo de aplicaciones web
 
Patrones de diseño I
Patrones de diseño IPatrones de diseño I
Patrones de diseño I
 
Manual css
Manual cssManual css
Manual css
 
VLCTechFest - Simplificando Controladores: Una introducción a Action-Domain ...
VLCTechFest -  Simplificando Controladores: Una introducción a Action-Domain ...VLCTechFest -  Simplificando Controladores: Una introducción a Action-Domain ...
VLCTechFest - Simplificando Controladores: Una introducción a Action-Domain ...
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Sitio web (bootstrap 3)
Sitio web (bootstrap 3)Sitio web (bootstrap 3)
Sitio web (bootstrap 3)
 
UDA-Componentes RUP. Feedback (v2.1.0 deprecado)
UDA-Componentes RUP. Feedback (v2.1.0 deprecado)UDA-Componentes RUP. Feedback (v2.1.0 deprecado)
UDA-Componentes RUP. Feedback (v2.1.0 deprecado)
 
Manual css-hojas-estilo
Manual css-hojas-estiloManual css-hojas-estilo
Manual css-hojas-estilo
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
 
Manual de java_2
Manual de java_2Manual de java_2
Manual de java_2
 
manual 9
manual 9manual 9
manual 9
 
Manual de java 3
Manual de java 3Manual de java 3
Manual de java 3
 
MANUAL DE JAVA 2
MANUAL DE JAVA 2MANUAL DE JAVA 2
MANUAL DE JAVA 2
 
Manual de java 3
Manual de java 3Manual de java 3
Manual de java 3
 

Más de René Olivo

How to code in the XXI century without losing your head
How to code in the XXI century without losing your headHow to code in the XXI century without losing your head
How to code in the XXI century without losing your headRené Olivo
 
Seguridad en Aplicaciones Web y Comercio Electrónico
Seguridad en Aplicaciones Web y Comercio ElectrónicoSeguridad en Aplicaciones Web y Comercio Electrónico
Seguridad en Aplicaciones Web y Comercio ElectrónicoRené Olivo
 
Implementing bootstrap the right way using less (1)
Implementing bootstrap the right way using less (1)Implementing bootstrap the right way using less (1)
Implementing bootstrap the right way using less (1)René Olivo
 
Pagos electrónicos
Pagos electrónicosPagos electrónicos
Pagos electrónicosRené Olivo
 
Introducciòn a RequireJS
Introducciòn a RequireJSIntroducciòn a RequireJS
Introducciòn a RequireJSRené Olivo
 
Introducciòn a AngularJS
Introducciòn a AngularJSIntroducciòn a AngularJS
Introducciòn a AngularJSRené Olivo
 
Comercio Electrónico en la República Dominicana
Comercio Electrónico en la República DominicanaComercio Electrónico en la República Dominicana
Comercio Electrónico en la República DominicanaRené Olivo
 

Más de René Olivo (12)

BDD UI testing
BDD UI testingBDD UI testing
BDD UI testing
 
How to code in the XXI century without losing your head
How to code in the XXI century without losing your headHow to code in the XXI century without losing your head
How to code in the XXI century without losing your head
 
Seguridad en Aplicaciones Web y Comercio Electrónico
Seguridad en Aplicaciones Web y Comercio ElectrónicoSeguridad en Aplicaciones Web y Comercio Electrónico
Seguridad en Aplicaciones Web y Comercio Electrónico
 
Implementing bootstrap the right way using less (1)
Implementing bootstrap the right way using less (1)Implementing bootstrap the right way using less (1)
Implementing bootstrap the right way using less (1)
 
Emacscript 6
Emacscript 6Emacscript 6
Emacscript 6
 
Git 101
Git 101Git 101
Git 101
 
Git workflow v2
Git workflow  v2Git workflow  v2
Git workflow v2
 
Pagos electrónicos
Pagos electrónicosPagos electrónicos
Pagos electrónicos
 
Git workflow
Git workflowGit workflow
Git workflow
 
Introducciòn a RequireJS
Introducciòn a RequireJSIntroducciòn a RequireJS
Introducciòn a RequireJS
 
Introducciòn a AngularJS
Introducciòn a AngularJSIntroducciòn a AngularJS
Introducciòn a AngularJS
 
Comercio Electrónico en la República Dominicana
Comercio Electrónico en la República DominicanaComercio Electrónico en la República Dominicana
Comercio Electrónico en la República Dominicana
 

Último

Ciberseguridad y Seguridad Informática Franco Correa Grupo B.pptx
Ciberseguridad y Seguridad Informática Franco Correa Grupo B.pptxCiberseguridad y Seguridad Informática Franco Correa Grupo B.pptx
Ciberseguridad y Seguridad Informática Franco Correa Grupo B.pptxcorreafrancoci00
 
Tipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdfTipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdfCarlosSanchez452245
 
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdfTECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdfUPSE
 
Especificación casos de uso del negocio
Especificación  casos de uso del negocioEspecificación  casos de uso del negocio
Especificación casos de uso del negocioMagemyl Egana
 
CIBERSEGURIDAD Y SEGURIDAD INFORMÁTICA.pptx
CIBERSEGURIDAD  Y SEGURIDAD INFORMÁTICA.pptxCIBERSEGURIDAD  Y SEGURIDAD INFORMÁTICA.pptx
CIBERSEGURIDAD Y SEGURIDAD INFORMÁTICA.pptxalzabenjaminci00
 
LA CALIDAD DE LA INFORMACION EN LA NUEVA ERA DEL INTERNET
LA CALIDAD DE LA INFORMACION  EN LA NUEVA ERA DEL INTERNETLA CALIDAD DE LA INFORMACION  EN LA NUEVA ERA DEL INTERNET
LA CALIDAD DE LA INFORMACION EN LA NUEVA ERA DEL INTERNETCasa
 
El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)Samuel Solís Fuentes
 
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...juanforero141
 
Modelado de Casos de uso del negocio
Modelado de  Casos  de  uso  del negocioModelado de  Casos  de  uso  del negocio
Modelado de Casos de uso del negocioMagemyl Egana
 
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptxTECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptxUPSE
 

Último (10)

Ciberseguridad y Seguridad Informática Franco Correa Grupo B.pptx
Ciberseguridad y Seguridad Informática Franco Correa Grupo B.pptxCiberseguridad y Seguridad Informática Franco Correa Grupo B.pptx
Ciberseguridad y Seguridad Informática Franco Correa Grupo B.pptx
 
Tipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdfTipos de datos en Microsoft Access definiciones.pdf
Tipos de datos en Microsoft Access definiciones.pdf
 
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdfTECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
TECNOLOGÍA DE LA INFORMACIÓN SLIDESHARE INVESTIGACION.pdf
 
Especificación casos de uso del negocio
Especificación  casos de uso del negocioEspecificación  casos de uso del negocio
Especificación casos de uso del negocio
 
CIBERSEGURIDAD Y SEGURIDAD INFORMÁTICA.pptx
CIBERSEGURIDAD  Y SEGURIDAD INFORMÁTICA.pptxCIBERSEGURIDAD  Y SEGURIDAD INFORMÁTICA.pptx
CIBERSEGURIDAD Y SEGURIDAD INFORMÁTICA.pptx
 
LA CALIDAD DE LA INFORMACION EN LA NUEVA ERA DEL INTERNET
LA CALIDAD DE LA INFORMACION  EN LA NUEVA ERA DEL INTERNETLA CALIDAD DE LA INFORMACION  EN LA NUEVA ERA DEL INTERNET
LA CALIDAD DE LA INFORMACION EN LA NUEVA ERA DEL INTERNET
 
El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)El necesario mal del Legacy Code (Drupal Iberia 2024)
El necesario mal del Legacy Code (Drupal Iberia 2024)
 
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
serenidad APP presentacion.pdfes una innovadora aplicación móvil diseñada par...
 
Modelado de Casos de uso del negocio
Modelado de  Casos  de  uso  del negocioModelado de  Casos  de  uso  del negocio
Modelado de Casos de uso del negocio
 
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptxTECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
TECNOLOGIA DE LA INFORMACION Y MULTIMEDIA 15 MAYO.pptx
 

Usando Bootstrap correctamente con LESS