Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TRABAJAR CSS CON ESTILO      Byron Corrales | @byroncor
OOCSSOOCSS se inspira en algunos principios de la OOP (abstracción,herencia, composición...)
PREPROCESADORES CSSReducirás considerablemente el tiempo de desarrolloCambio en el flujo de trabajo
Un preprocesador es un programa que procesa susdatos de entrada para producir una salida que se utilizacomo entrada a otro...
SIMPLE Y PRÁCTICO
DEADLINES
RESISTENCIA
SASS                                 LESS             Ruby                 Javascript, nodejs, java, php, python..Compilad...
YO ESCOGÍ LESSCSS      lesscss.org
VENTAJASUna mejor organización del códigoProyectos más fáciles de mantenerReutilización de códigoComentarios privados en m...
DESVENTAJASDebe aprender a usarse, y todo el equipo de desarrollodebe usarloPoco probable que quieras regresar al css común
INSTALACIÓN - CLIENTE                 Descargar en http://lesscss.org/<link rel="stylesheet/less" type="text/css" href="st...
INSTALACIÓN - SERVER       npm install -g less  lessc styles.less styles.css
INSTALACIÓN - SERVER       npm install -g less  lessc styles.less styles.css
VARIABLES
MIXINGS / FUNCIONES
NESTED RULES
OPERACIONES
@arguments
GUARDS
CHECKING FUNCTIONSiscolor     ispixelisnumber    ispercentageisstring    isemiskeywordIsurl
COMENTARIOS       // Asi se escribe un comentario en less/* Asi se escribe un comentario convencional en css*/
LO MAS INTERESANTE ES  LO QUE PODES CREAR
style.less       @import "lib_style.less";lib_style.less
markdotto.com/bootstrap/
lesselements.com
APPS
SublimeText
wearekiss.com/simpless
incident57.com/codekit/
github.com/Mte90/Plessc
GRACIAS
Trabajar CSS con estilo
Trabajar CSS con estilo
Trabajar CSS con estilo
Trabajar CSS con estilo
Trabajar CSS con estilo
Trabajar CSS con estilo
Trabajar CSS con estilo
Trabajar CSS con estilo
Trabajar CSS con estilo
Upcoming SlideShare
Loading in …5
×

Trabajar CSS con estilo

1,915 views

Published on

Esta charla tiene el objetivo de introducirles al uso de preprocesadores de CSS, una mejor forma de trabajar código CSS dinámico, en donde realmente se puedan aprovechar el uso de variables, funciones y pruebas lógicas dentro de nuestras definiciones de CSS.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Trabajar CSS con estilo

  1. 1. TRABAJAR CSS CON ESTILO Byron Corrales | @byroncor
  2. 2. OOCSSOOCSS se inspira en algunos principios de la OOP (abstracción,herencia, composición...)
  3. 3. PREPROCESADORES CSSReducirás considerablemente el tiempo de desarrolloCambio en el flujo de trabajo
  4. 4. Un preprocesador es un programa que procesa susdatos de entrada para producir una salida que se utilizacomo entrada a otro programa
  5. 5. SIMPLE Y PRÁCTICO
  6. 6. DEADLINES
  7. 7. RESISTENCIA
  8. 8. SASS LESS Ruby Javascript, nodejs, java, php, python..Compilado del lado del servidor Compilado del lado del cliente 2006 2010 HAML JADE
  9. 9. YO ESCOGÍ LESSCSS lesscss.org
  10. 10. VENTAJASUna mejor organización del códigoProyectos más fáciles de mantenerReutilización de códigoComentarios privados en modo desarrollo
  11. 11. DESVENTAJASDebe aprender a usarse, y todo el equipo de desarrollodebe usarloPoco probable que quieras regresar al css común
  12. 12. INSTALACIÓN - CLIENTE Descargar en http://lesscss.org/<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script>
  13. 13. INSTALACIÓN - SERVER npm install -g less lessc styles.less styles.css
  14. 14. INSTALACIÓN - SERVER npm install -g less lessc styles.less styles.css
  15. 15. VARIABLES
  16. 16. MIXINGS / FUNCIONES
  17. 17. NESTED RULES
  18. 18. OPERACIONES
  19. 19. @arguments
  20. 20. GUARDS
  21. 21. CHECKING FUNCTIONSiscolor ispixelisnumber ispercentageisstring isemiskeywordIsurl
  22. 22. COMENTARIOS // Asi se escribe un comentario en less/* Asi se escribe un comentario convencional en css*/
  23. 23. LO MAS INTERESANTE ES LO QUE PODES CREAR
  24. 24. style.less @import "lib_style.less";lib_style.less
  25. 25. markdotto.com/bootstrap/
  26. 26. lesselements.com
  27. 27. APPS
  28. 28. SublimeText
  29. 29. wearekiss.com/simpless
  30. 30. incident57.com/codekit/
  31. 31. github.com/Mte90/Plessc
  32. 32. GRACIAS

×