Soumettre la recherche
Mettre en ligne
Compass, Sass y frameworks CSS para maquetación semántica y mantenible
•
1 j'aime
•
563 vues
Titre amélioré par l'IA
Juanjo Andres Prado
Suivre
Presentación para Las Palmas on Rails
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 19
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Recommandé
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
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
BRAYANJOSEPHPEREZGOM
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
Contenu connexe
Similaire à 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
Similaire à 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
Dernier
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
BRAYANJOSEPHPEREZGOM
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
Fundación YOD YOD
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
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
AndreaHuertas24
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
241521559
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
soporteupcology
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
GDGSucre
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
WilbisVega
Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptx
RogerPrieto3
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
LolaBunny11
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
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
Maricarmen Sánchez Ruiz
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
IsabellaMontaomurill
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
ssuserf18419
Dernier
(15)
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
Herramientas de corte de alta velocidad.pptx
Herramientas de corte de alta velocidad.pptx
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
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...
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
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
Télécharger maintenant