Conferencia dictada en Campus Party Cali Colombia 2014

1. Sácale todo el provecho
a Stylus el mejor pre
procesador de CSS
Leonidas Esteban
@LeonidasEsteban
http://leonidasesteban.com/
https://github.com/LeonidasEsteban/

2. “Estoy aprendiendo stylus
con @LeonidasESteban
en #CPCO7”

3. Semántica HTML y CSS

4. El problema
mala declaración de clases

5. La solución
Modulos, utilidades y jerarquía semántica

6. SuitCSS
http://suitcss.github.io/

7. • u-utilityName
• ComponentName
• ComponentName--modifierName
• ComponentName-descendentName
• ComponentName.is-stateOfComponent
5 Simples convenciones

8. https://github.com/LeonidasEsteban/pokedex

9. La triste verdad de CSS
• Carece de variables
• No puedo reutilizar código si no es creando otra
clase
• Sintaxis repetitiva
• Es muy complicado de mantener en aplicaciones
complejas

10. CSS needs a hero!!
http://learnboost.github.io/stylus/

11. Instala node.js
http://nodejs.org/

12. Instala stylus
(sudo) npm install stylus -g

13. Modulo.styl

14. NO más {} : ;
(si los pones igual funciona pero puede que un gatito muera)

15. Compila
stylus nombreDelArchivo.styl

16. stylus modulo.styl
(stylus -w estilos.styl sirve para que autocompile siempre
que hagamos cambios en el archivo)

17. Identación
(¡pero nosotros ya no codeamos así Leo!)
CSS Stylus

18. ampersand(&)
Concatenar selectores

19. Variables
(Las variables solo existen en el .styl)

20. Mixins
¡Oh si a programar!

21. nib
instalación = (sudo) npm install -g nib

22. Nib
Olvidate de escribir mixins de prefijos
compilación = stylus -u nib -w modulo.styl

23. @import
crea estilos.styl

24. Ordena y Optimiza
stylus -u nib -w -c -o css/ stylus/estilos.styl

25. Muchas, muchas gracias :)

26. “Aprendí stylus con
@LeonidasEsteban en
#CPCO7”

28. let's rock !
https://github.com/LeonidasEsteban/pokedex

29. Triángulos en CSS

30. Positions
static, relative y absolute