No pierdas el rumbo
sobre compass, sass y 960




Juanjo Andrés Prado para Las Palmas on Rails
En busca del Santo Grial
maquetado semántico y fácil de mantener
Frameworks CSS

¿Qué?                         ¿Quiénes?
  declaraciones predefinidas    960.gs

  sistema de grillas       ...
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




...
compass              meta-framework CSS




 Usa SASS
 Open source
 Integración con frameworks CSS (960, Blueprint,..)
 Fá...
syntactically awesome
            Sass        stylesheets




Fácil y bonito
DRY
Destaco 3 poderes:               sass    ...
mixins   aka funciones




Reducir errores
Eficiencia
--> DRY
variables   variables??




Reducir errores
Eficiencia
                                       Hey!
                        ...
imports               reparte el juego




                                                  nav.sass
Eficiencia           ...
compass                instálalo como plugin


$ (sudo) gem install compass


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


 ...
title
pub_info


           sidebar
           - img
           -p
 main



footer


              footer
title
pub_info




article
gradientes
css3

  comunidad
       menús
Conclusión




        lo aprueba
Links y referencias
 http://sass-lang.com/ (sass reference)
 http://wiki.github.com/chriseppstein/compass/
 (compass proje...
Juanjo Andrés Prado
                                juanjo.andres@aentos.es

                                         @jua...
sobre compass
sobre compass
Upcoming SlideShare
Loading in …5
×

sobre compass

1,382 views

Published on

Presentación para Las Palmas on Rails

Published in: Technology
  • Be the first to comment

sobre compass

  1. 1. No pierdas el rumbo sobre compass, sass y 960 Juanjo Andrés Prado para Las Palmas on Rails
  2. 2. En busca del Santo Grial maquetado semántico y fácil de mantener
  3. 3. Frameworks CSS ¿Qué? ¿Quiénes? declaraciones predefinidas 960.gs sistema de grillas Blueprint módulos genéricos YUI ...
  4. 4. Pros Layout - Cross browser Agiliza el desarrollo Limpieza simétrica
  5. 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"
  6. 6. compass meta-framework CSS Usa SASS Open source Integración con frameworks CSS (960, Blueprint,..) Fácil integración proyectos RAILS
  7. 7. syntactically awesome Sass stylesheets Fácil y bonito DRY Destaco 3 poderes: sass css Mixins Variables Imports
  8. 8. mixins aka funciones Reducir errores Eficiencia --> DRY
  9. 9. variables variables?? Reducir errores Eficiencia Hey! Sass sabe --> DRY mates
  10. 10. 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”
  11. 11. compass instálalo como plugin $ (sudo) gem install compass acción en el controlador --> sass to css no es necesario Rails, también standalone
  12. 12. title pub_info sidebar - img -p main footer footer
  13. 13. title pub_info article
  14. 14. gradientes css3 comunidad menús
  15. 15. Conclusión lo aprueba
  16. 16. 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
  17. 17. Juanjo Andrés Prado juanjo.andres@aentos.es @juanjoandres www.aentos.com we do web applications apps for mobile devices

×