Por Cecy Correa / @cecycorrea
Email: cecy@fourkitchens.com
Casa de...
Si señor!
Donde vivo ahora.
Four Kitchens, Directora de Desarrollo de Negocios
Maestra
Que son 'estail tails'
En vez de diseñar composiciones en Photoshop, puedes diseñar style tiles.
Una representacion abstracta del diseño web.
Una version para cada dispositivo / monitor?
En vez de enfocarte en el 'layout', enfocate en los elementos que juntos componen un systema de diseño.
Puedes definir letras, colores, texturas, y la combinacion de ellas.
Pues... en Photoshop?
También puedes diseńar en tu navegador!
Usando Sass!
Sass: Pre-procesador de CSS.
Tienes que compilar tu Sass a CSS valido.
Si eres nuevo al lenguaje de Sass, puede ser un poco dificil empezar por que tienes que tener instalado...
Sass es una gema de Ruby.
Mac: Buenas noticias si tienes Mac — Ruby ya viene con tu maquina!
Chequa tu version de Ruby. Necesitas tan siquiera 1.9.
$ ruby -v
Es fácil!
$ gem install sass
Compass: Te ayuda a compilar tu Sass a CSS automaticamente... pero tienes que usar la linea de comandos.
Pero es fácil de instalar!
$ gem install Compass
Bower: Un administrador de paquetes, se encarga de que tengas las versiones correctas de tus lenguajes para tus proyectos.
Pero necesitas node.js para que Bower funcione...
Primero, instala node.js. Vé a nodejs.org y baja el paquete.
Con node ya instalado...
$ npm install g- bower
Para compilar Sass, necesitas Compass y la linea de comandos...
Ó puedes instalar Codekit!
Codekit en un programa que se encarga de monitorear tus proyectos. Codekit puede compilar Sass automaticamente, sin la linea de comandos!
Alternativa PC: Scout.
Pero para que?
Usando Sass, puedes diseñar style tiles para tus proyectos.
Y por que Sass te da archivos de CSS, puedes usar los mismos estilos en tu diseño!
Variables: Puedes usar variables para no tener que escribir el mismo código, y aprenderte valores de hex.
$color-primario: #0000ff;
Cada vez que quieras usar ese color...
h1 { color: $color-primario; }
Si el cliente quiere cambiar colores, nada mas tienes que cambiar $color-primario. Sass se encarga del resto.
Puedes extender estilos...
h2 { @extend h1; font-size: 1.5em; }
En vez de escribir todo, puedes usar @extend.
Tambien hay 'Mixins.'
Mixins son buenos para crear 'sets' con estilos ó funcionalidad complicada.
Favor de dar click en "fork" para copiar el templete.
Foundation: Un 'framework' de frontend.
Podemos usar Foundation para crear un prototipo basado en los style tiles.
Un templete basico de Foundation.
Un clon de Facebook en 10 minutos
$ gem install foundation
$ foundation new PROJECT_NAME
Bower se va encargar de instalar la mas nueva version (con Sass!)