Presentación para Las Palmas on Rails

1. No pierdas el rumbo
sobre compass, sass y 960
Juanjo Andrés Prado para Las Palmas on Rails

2. En busca del Santo Grial
maquetado semántico y fácil de mantener

3. Frameworks CSS
¿Qué? ¿Quiénes?
declaraciones predefinidas 960.gs
sistema de grillas Blueprint
módulos genéricos YUI
...

4. Pros
Layout - Cross browser
Agiliza el desarrollo
Limpieza simétrica

5. 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"

7. compass meta-framework CSS
Usa SASS
Open source
Integración con frameworks CSS (960, Blueprint,..)
Fácil integración proyectos RAILS

8. syntactically awesome
Sass stylesheets
Fácil y bonito
DRY
Destaco 3 poderes: sass css
Mixins Variables Imports

9. mixins aka funciones
Reducir errores
Eficiencia
--> DRY

10. variables variables??
Reducir errores
Eficiencia
Hey!
Sass sabe
--> DRY mates

11. imports reparte el juego
nav.sass
Eficiencia colors.sass header.sass
Reducir errores colors.sass
types.sass
DRY menu.sass
“Prefiero mantener 100 archivos de 20 líneas que 1 de 2000”

12. compass instálalo como plugin
$ (sudo) gem install compass
acción en el controlador --> sass to css
no es necesario Rails,
también standalone

14. title
pub_info
sidebar
- img
-p
main
footer
footer

15. title
pub_info
article

16. gradientes
css3
comunidad
menús

17. Conclusión
lo aprueba

18. 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

19. Juanjo Andrés Prado
juanjo.andres@aentos.es
@juanjoandres
www.aentos.com
we do
web applications apps for mobile
devices