desarrollo web inteligentecon preprocesadores html y css

max kraszewski @minimalart

cómo comenzamos un proyecto web

html

html html

html html html htmlhtml

html html html htmlhtml

html html html htmlhtml

html html html htmlhtml

html

html html html htmlhtml

repetición de gran parte del código

complejidad del DOM y código inmantenible

JADE node template engine

div      span

<div>      <span></span>  </div> html jade

nodos

div#main<div  id=“main”>

ids

html jade

div.message<div  class=“message”>

clases

html jade

script(src=js/jquery.js)<script  src=“js/jquery.js”/>

atributos

html jade

htmljade

simplicidad. elegancia.

//  header.jade  head      title  Mi  Sitio      script(src=js/jquery.js)

include de templates

//  footer.jade  footer      p  Copyright  2013

//  index.jade  doctype      html          include  head      body          h1  Bienvenidos          p    Parrafo          include  footer

jade

jade

jade

html

extend y soporte de bloques//  layout.jade  doctype      html          head              title  Mi  Sitio              block  script          body              block  content                footer                  Copyright  2013

jade

//  index.jade  extends  layout  !block  script      script(src=js/jquery.js)  !block  content      h1  Bienvenidos      p  Párrafo

jade

//  contact.jade  extends  layout  !block  content      h1  Contacto      form          input#nombre(type=“text”)

jade

//  about.jade  extends  layout  !block  content      h1  Sobre  mi      p  Mi  nombre  es  Max      p  Vivo  en  Buenos  Aires

jade

about.jade contact.jade other.jadelayout.jade index.jade

jade engine

about.html contact.html other.htmlindex.html

simplicidad. elegancia. robustez.velocidad.organización

bien. agreguemos estilos

main.css index.html

main.css

colors.css modules.css reset.csslayout.css fonts.css

@import

index.html

reducción de performance

main.csscolors.css modules.css reset.csslayout.css fonts.css

link href

index.html

un poco mejor… pero aún muchos http requests extras

redundancia y nula reutilización

LESS dynamic stylesheet language

@main-­‐color:  #FFCC00;  !h1  {        color:  @main-­‐color;    }  !header  {        background-­‐color:  @main-­‐color;  }

h1  {        color:  #FFCC00;    }  !header  {        background-­‐color:  #FFCC00;  }

.css.less

variables

@main-­‐font:  “Arial,Tahoma”;  !h1  {        font-­‐family:  @main-­‐font;    }  !h2  {        font:  bold  1.2em  @main-­‐font;  }

h1  {      font-­‐family:  “Arial,Tahoma”;    }  !header  {        font:  bold  1.2em  “Arial,Tahoma”;  }

.css.less

@import  “reset.css”;  @import  “grid.less”;  @import  “colors.less”;  @import  “icons.less”;  !header  {  color:  @color;  }  

(content  of  reset.css)  (content  of  grid.less)  (content  of  colors.less)  (content  of  icons.less)  !header  {  color:  black;  }  ! .css.less

import

header  {        h1  {          background-­‐color:  gray;          color:  white;      }      nav  {        background-­‐color:  blue;        ul  {  list-­‐style-­‐type:  none;  }        }  }  

header  h1  {         background-­‐color:  gray;                color:  white;    }  header  nav  {         background-­‐color:  blue;  }  header  nav  ul  {         list-­‐style-­‐type:  none;    }  !!

.css.less

anidamiento

@page-­‐width:  960px;  @main-­‐width:  600px;  @sidebar-­‐width:  @page-­‐width  -­‐  @main-­‐width  

.less

operaciones matemáticas

@color:  red;  !button  {       background-­‐color:  @color;     &:hover  {background-­‐color:  darken(@color,  10%);  }  ! .less

operaciones de color

.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

mixins con y sin parámetros

simplicidad. elegancia. robustez.velocidad.organización reutilización de librerías

SASS syntactically awesome stylesheet

el 80% de SASS y LESS es similar

cual usar? depende

instalación y uso

>  npm  install  jade  !>  jade  index.jade  index.html  

jade

.jade

>  npm  install  less  !>  lesscss  style.less  style.css  

less

.less

>  gem  install  sass  !>  sass  style.scss  style.scss  

sass

.sass

simplicidad. elegancia. robustez.velocidad.organización reutilización de librerías dry. don’t repeat yourself

“If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!” Andrew Clarke, 2009

“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

“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)

gracias !max kraszewski

@minimalart