No pierdas el rumbosobre compass, sass y 960

Juanjo Andrés Prado para Las Palmas on Rails

En busca del Santo Grialmaquetado semántico y fácil de mantener

Frameworks CSS

960.gs

Blueprint

YUI

...

declaraciones predefinidas

sistema de grillas

módulos genéricos

¿Qué? ¿Quiénes?

Pros

Layout - Cross browser

Agiliza el desarrollo

Limpieza simétrica

Cons

Afectan al marcado HTML

Mucho código extra innecesario

de nuevo... afectan al marcado HTML

arde en el infierno: "2-column-square-top-right"

compass

Usa SASS

Open source

Integración con frameworks CSS (960, Blueprint,..)

Fácil integración proyectos RAILS

meta-framework CSS

Sass

Fácil y bonito

DRY

Destaco 3 poderes:

Mixins Variables Imports

syntactically awesome stylesheets

sass css

aka funciones

Reducir errores

Eficiencia

--> DRY

mixins

variables??

Reducir errores

Eficiencia

--> DRY

variables

Hey! Sass sabe

mates

nav.sass

header.sass

colors.sass

reparte el juego

Eficiencia

Reducir errores

DRY

imports

types.sass

menu.sass

colors.sass

“Prefiero mantener 100 archivos de 20 líneas que 1 de 2000”

$ (sudo) gem install compass

compass instálalo como plugin

acción en el controlador --> sass to css

no es necesario Rails, también standalone

title

sidebar- img- p

footer

footer

main

pub_info

title

article

pub_info

comunidad

css3gradientes

menús

Conclusión

lo aprueba

Links y referencias

http://sass-lang.com/ (sass reference)

http://wiki.github.com/chriseppstein/compass/ (compass project page, great video)

http://960.gs/ (960 project page)

http://github.com/imathis/fancy-buttons

http://blog.carbonfive.com/2009/03/html/compass-960-semantics

Juanjo Andrés Prado

juanjo.andres@aentos.es

@juanjoandres

www.aentos.com

apps for mobile devices

web applications

we do