View
159
Download
0
Category
Preview:
Citation preview
Organizando CSS
SMACSS
Soy Iván Mejía. Soy diseñador web. Llevo varios años creando sitios web.
Una época más
sencilla
<html> <head> <style type="text/css"> .title { color: blue; text-decoration: bold; text-size: 1em; }
.author { color: gray; } </style> </head> <body> <p> <span class=“title">Que bonita pagina</span> <span class=“author">que vida tan buena aca</span> </p> </body> </html>
<h2 style=“color:red;background:black;”>
This is a red heading with a black background
</h2>
Un mundo complejo
Sitios más complejos 1- Extensión (muchas páginas). 2- CMS. 3- Múltiples plantillas o temas. 4- Trabajo en equipo.
Organicemos
CSS - Predecible - Reusable
- Mantenible - Escalable
CSS y Preprocesadores
(Less, Sass)
SMACSS
Scalable and Modular Architecture for CSS
-Una guía de estilos. -Una colección de patrones de diseño. -No es una librería o framework.
-Base-Layout-Module-State-Theme
Base body, form { margin: 0; padding: 0; }
a { color: #039; }
a:hover { color: #03F; }
Layout#header, #article, #footer { width: 95%; margin: auto; }
#col-sm-3 { border: solid #CCC; border-width: 1px 0 0; }
Module
.search > h2 { padding: 5px; }
.search span { padding: 5px; }
StateUn estado es algo que aumenta y prevalece sobre todos los demás estilos. Por ejemplo, una sección de acordeón puede estar en un estado colapsado o desplegado. Un mensaje puede estar en un estado de éxito o error.
State-Los estilos de State se pueden aplicar a layout y/o a los estilos de module.-Los estilos de State indican y una dependencia en JavaScript.
!important
State<div id="header" class="is-collapsed"> <form> <div class="msg is-error"> There is an error! </div> <label for="searchbox" class="is-hidden">Search</label> <input type="search" id="searchbox"> </form> </div>
Theme// in module-name.css .mod { border: 1px solid; }
// in theme.css .mod { border-color: blue; }
scss/|- _base/ | |- _config.scss | |- _presets.scss | |- _headings.scss | |- ... |- _layouts/ | |- _l-base.scss | |- _l-grid.scss |- _modules/ | |- _m-buttons.scss | |- _m-tabs.scss |- _states/ | |- _s-buttons.scss | |- _s-tabs.scss |- application.scss stylesheets/|- application.css
Otros sistemas
BEMBlock, Element and Modifier.
OOCSSObject Oriented CSS.
Ligas https://smacss.com
https://github.com/jonathanpath/SASS-SMACSS
http://slidedeck.io/elHornair/smacss-presentation
http://timhartmann.net/frontend-development/scss-styleguide-with-bem-oocss-smacss/
Preguntas?
correo:ivan@medioyforma.info twitter:@Koffer
sitios: medioyforma.info drupalmexico.com
Iván Mejía / Medio y forma estudio
Recommended