Enviar búsqueda
Cargar
Compass, Sass y frameworks CSS para maquetación semántica y mantenible
•
1 recomendación
•
563 vistas
Título mejorado por IA
Juanjo Andres Prado
Seguir
Presentación para Las Palmas on Rails
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 19
Descargar ahora
Descargar para leer sin conexión
Recomendados
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Paradigma Digital
Sass y compass
Sass y compass
Medio y forma
Sass - Preprocesador de CSS
Sass - Preprocesador de CSS
Javier Herrera
CSS Preprocessors - Sass
CSS Preprocessors - Sass
Lourdes Montano
Front end basics - Sass
Front end basics - Sass
Nadal Soler
Pre-procesadores CSS. SASS
Pre-procesadores CSS. SASS
MarionaCruz
Frameworks CSS
Frameworks CSS
betabeers
Introducción a los Frameworks CSS
Introducción a los Frameworks CSS
Luis Miguel Martín
Recomendados
Adaptando CSS a los programadores: SASS y Compass
Adaptando CSS a los programadores: SASS y Compass
Paradigma Digital
Sass y compass
Sass y compass
Medio y forma
Sass - Preprocesador de CSS
Sass - Preprocesador de CSS
Javier Herrera
CSS Preprocessors - Sass
CSS Preprocessors - Sass
Lourdes Montano
Front end basics - Sass
Front end basics - Sass
Nadal Soler
Pre-procesadores CSS. SASS
Pre-procesadores CSS. SASS
MarionaCruz
Frameworks CSS
Frameworks CSS
betabeers
Introducción a los Frameworks CSS
Introducción a los Frameworks CSS
Luis Miguel Martín
"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo
webcat
Sass: CSS con Superpoderes
Sass: CSS con Superpoderes
Edgar Parada
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHP Vigo
OOCSS - Versión anotada - @janogarcia
OOCSS - Versión anotada - @janogarcia
Jano Garcia
OOCSS - @janogarcia
OOCSS - @janogarcia
Jano Garcia
06_Nuevas reglas.pptx
06_Nuevas reglas.pptx
yendrao
Responsive Web Design
Responsive Web Design
Fernando Esteban Pasik
Arquitectura frontend para proyectos con preprocesadores CSS
Arquitectura frontend para proyectos con preprocesadores CSS
Alberto Portolés Coscojuela
Front end basics - Responsive Web Design
Front end basics - Responsive Web Design
Nadal Soler
Maquetar pagina html con css
Maquetar pagina html con css
rmonagol
Front-end Basics for Developers
Front-end Basics for Developers
Nadal Soler
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
rodboc
Variables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPress
WordPress Tarragona
¿Rails no escala?
¿Rails no escala?
Fernando Calatayud
Presentación css
Presentación css
Andres Giovanni Lara Collazos
Assetic: Integrar SASS, Compass y Foundation
Assetic: Integrar SASS, Compass y Foundation
Rafael Matito Matito
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Manuel Razzari
Sngular - Sass: Vitamina tu CSS
Sngular - Sass: Vitamina tu CSS
Maria del Carmen Garcia
Sesion01
Sesion01
UB Art
De Mashzone legacy a Aris aware
De Mashzone legacy a Aris aware
Sistemas Integrados de Gestión
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
241521559
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
ssuserf18419
Más contenido relacionado
Similar a Compass, Sass y frameworks CSS para maquetación semántica y mantenible
"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo
webcat
Sass: CSS con Superpoderes
Sass: CSS con Superpoderes
Edgar Parada
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHP Vigo
OOCSS - Versión anotada - @janogarcia
OOCSS - Versión anotada - @janogarcia
Jano Garcia
OOCSS - @janogarcia
OOCSS - @janogarcia
Jano Garcia
06_Nuevas reglas.pptx
06_Nuevas reglas.pptx
yendrao
Responsive Web Design
Responsive Web Design
Fernando Esteban Pasik
Arquitectura frontend para proyectos con preprocesadores CSS
Arquitectura frontend para proyectos con preprocesadores CSS
Alberto Portolés Coscojuela
Front end basics - Responsive Web Design
Front end basics - Responsive Web Design
Nadal Soler
Maquetar pagina html con css
Maquetar pagina html con css
rmonagol
Front-end Basics for Developers
Front-end Basics for Developers
Nadal Soler
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
rodboc
Variables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPress
WordPress Tarragona
¿Rails no escala?
¿Rails no escala?
Fernando Calatayud
Presentación css
Presentación css
Andres Giovanni Lara Collazos
Assetic: Integrar SASS, Compass y Foundation
Assetic: Integrar SASS, Compass y Foundation
Rafael Matito Matito
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Manuel Razzari
Sngular - Sass: Vitamina tu CSS
Sngular - Sass: Vitamina tu CSS
Maria del Carmen Garcia
Sesion01
Sesion01
UB Art
De Mashzone legacy a Aris aware
De Mashzone legacy a Aris aware
Sistemas Integrados de Gestión
Similar a Compass, Sass y frameworks CSS para maquetación semántica y mantenible
(20)
"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo
Sass: CSS con Superpoderes
Sass: CSS con Superpoderes
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
PHPVigo #09: Preprocesadores CSS/SASS por Sergio Carracedo
OOCSS - Versión anotada - @janogarcia
OOCSS - Versión anotada - @janogarcia
OOCSS - @janogarcia
OOCSS - @janogarcia
06_Nuevas reglas.pptx
06_Nuevas reglas.pptx
Responsive Web Design
Responsive Web Design
Arquitectura frontend para proyectos con preprocesadores CSS
Arquitectura frontend para proyectos con preprocesadores CSS
Front end basics - Responsive Web Design
Front end basics - Responsive Web Design
Maquetar pagina html con css
Maquetar pagina html con css
Front-end Basics for Developers
Front-end Basics for Developers
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
Variables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPress
¿Rails no escala?
¿Rails no escala?
Presentación css
Presentación css
Assetic: Integrar SASS, Compass y Foundation
Assetic: Integrar SASS, Compass y Foundation
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Accesibilidad práctica con HTML5, CSS3 y WAI-ARIA
Sngular - Sass: Vitamina tu CSS
Sngular - Sass: Vitamina tu CSS
Sesion01
Sesion01
De Mashzone legacy a Aris aware
De Mashzone legacy a Aris aware
Último
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
241521559
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
ssuserf18419
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
GDGSucre
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
silviayucra2
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
soporteupcology
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
LolaBunny11
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
AndreaHuertas24
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
WilbisVega
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
Maricarmen Sánchez Ruiz
Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptx
RogerPrieto3
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
BRAYANJOSEPHPEREZGOM
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
IsabellaMontaomurill
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Keyla Dolores Méndez
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
Fundación YOD YOD
Último
(15)
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptx
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
Compass, Sass y frameworks CSS para maquetación semántica y mantenible
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"
6.
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
13.
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
Descargar ahora