Desarrollo web inteligente
•
0 recomendaciones•2,816 vistas
Charla en Barcamp Buenos Aires 2013 sobre el uso de preprocesadores HTML y CSS. Se cubren JADE, SASS y LESS
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Desarrollo web inteligente
Similar a Desarrollo web inteligente (20)
Más de Max Kraszewski
Último
Último (20)
Desarrollo web inteligente
- 1. desarrollo web inteligente con preprocesadores html y css max kraszewski @minimalart
- 2. cómo comenzamos un proyecto web
- 3. html
- 4. html html
- 6. html html html html repetición de gran parte del código html html html html html html html
- 8. complejidad del DOM y código inmantenible
- 9. JADE node template engine
- 10. nodos <div> <span></span> </div> div span html jade ids <div id=“main”> html div#main jade clases <div class=“message”> html div.message jade atributos <script src=“js/jquery.js”/> html script(src=js/jquery.js) jade
- 11. jade html
- 13. include de templates // header.jade head title Mi Sitio script(src=js/jquery.js) // footer.jade footer p Copyright 2013 // index.jade doctype html include head body h1 Bienvenidos p Parrafo include footer jade jade html jade
- 14. extend y soporte de bloques // layout.jade doctype html head title Mi Sitio block script body block content footer Copyright 2013 // about.jade extends layout ! block content h1 Sobre mi p Mi nombre es Max p Vivo en Buenos Aires // index.jade extends layout ! block script script(src=js/jquery.js) ! block content h1 Bienvenidos p Párrafo jade jade jade // contact.jade extends layout ! block content h1 Contacto form input#nombre(type=“text”) jade
- 22. un poco mejor… pero aún muchos http requests extras
- 24. redundancia y nula reutilización
- 25. LESS dynamic stylesheet language
- 26. variables @main-‐color: #FFCC00; ! h1 { color: @main-‐color; } ! header { background-‐color: @main-‐color; } .less @main-‐font: “Arial,Tahoma”; ! h1 { font-‐family: @main-‐font; } ! h2 { font: bold 1.2em @main-‐font; } .less h1 { color: #FFCC00; } ! header { background-‐color: #FFCC00; } .css h1 { font-‐family: “Arial,Tahoma”; } ! header { font: bold 1.2em “Arial,Tahoma”; } .css
- 27. import @import “reset.css”; @import “grid.less”; @import “colors.less”; @import “icons.less”; ! header { color: @color; } .less (content of reset.css) (content of grid.less) (content of colors.less) (content of icons.less) ! header { color: black; } ! .css anidamiento header { h1 { background-‐color: gray; color: white; } nav { background-‐color: blue; ul { list-‐style-‐type: none; } } } .less header h1 { background-‐color: gray; color: white; } header nav { background-‐color: blue; } header nav ul { list-‐style-‐type: none; } ! .css !
- 28. operaciones matemáticas @page-‐width: 960px; @main-‐width: 600px; @sidebar-‐width: @page-‐width -‐ @main-‐width .less operaciones de color @color: red; ! button { background-‐color: @color; &:hover {background-‐color: darken(@color, 10%); } ! .less
- 29. mixins con y sin parámetros .bordered { border-‐top: 1px dotted black; border-‐bottom: 2px solid black; } ! .rounded(@radius) { border-‐radius: @radius; } ! button { background-‐color: red; color: white; .bordered; } ! label { background-‐color: red; color: white; .rounded(4px); } .less
- 33. SASS syntactically awesome stylesheet
- 34. el 80% de SASS y LESS es similar
- 40. jade > npm install jade ! > jade index.jade index.html .jade less > npm install less ! > lesscss style.less style.css .less sass > gem install sass ! > sass style.scss style.scss .sass
- 45. simplicidad. elegancia. robustez.velocidad.organización reutilización de librerías dry. don’t repeat yourself
- 46. “If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!” Andrew Clarke, 2009
- 47. “If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong! “I once wrote that there was no need to use a CSS pre-processor like LESS or Sass. I was wrong. Very sorry.” Andrew Clarke, 2011
- 48. “By becoming web developers you agreed on staying up to date with all the new cool stuff. ! THIS is the new cool stuff. Jonathan Verrechia (creator of Initialzr)