Smacss. Organizando css
-
Upload
medio-y-forma -
Category
Design
-
view
161 -
download
0
Transcript of Smacss. Organizando css
![Page 1: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/1.jpg)
Organizando CSS
SMACSS
![Page 2: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/2.jpg)
Soy Iván Mejía. Soy diseñador web. Llevo varios años creando sitios web.
![Page 3: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/3.jpg)
Una época más
sencilla
![Page 4: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/4.jpg)
<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>
![Page 5: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/5.jpg)
<h2 style=“color:red;background:black;”>
This is a red heading with a black background
</h2>
![Page 6: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/6.jpg)
Un mundo complejo
![Page 7: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/7.jpg)
Sitios más complejos 1- Extensión (muchas páginas). 2- CMS. 3- Múltiples plantillas o temas. 4- Trabajo en equipo.
![Page 8: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/8.jpg)
Organicemos
![Page 9: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/9.jpg)
CSS - Predecible - Reusable
- Mantenible - Escalable
![Page 10: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/10.jpg)
CSS y Preprocesadores
(Less, Sass)
![Page 11: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/11.jpg)
SMACSS
Scalable and Modular Architecture for CSS
![Page 13: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/13.jpg)
-Una guía de estilos. -Una colección de patrones de diseño. -No es una librería o framework.
![Page 14: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/14.jpg)
-Base-Layout-Module-State-Theme
![Page 15: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/15.jpg)
Base body, form { margin: 0; padding: 0; }
a { color: #039; }
a:hover { color: #03F; }
![Page 16: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/16.jpg)
Layout#header, #article, #footer { width: 95%; margin: auto; }
#col-sm-3 { border: solid #CCC; border-width: 1px 0 0; }
![Page 17: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/17.jpg)
Module
.search > h2 { padding: 5px; }
.search span { padding: 5px; }
![Page 18: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/18.jpg)
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.
![Page 19: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/19.jpg)
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.
![Page 20: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/20.jpg)
!important
![Page 21: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/21.jpg)
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>
![Page 22: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/22.jpg)
Theme// in module-name.css .mod { border: 1px solid; }
// in theme.css .mod { border-color: blue; }
![Page 23: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/23.jpg)
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
![Page 24: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/24.jpg)
![Page 25: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/25.jpg)
![Page 26: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/26.jpg)
![Page 27: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/27.jpg)
Otros sistemas
![Page 28: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/28.jpg)
BEMBlock, Element and Modifier.
![Page 29: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/29.jpg)
OOCSSObject Oriented CSS.
![Page 30: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/30.jpg)
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/
![Page 31: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/31.jpg)
Preguntas?
![Page 32: Smacss. Organizando css](https://reader034.fdocuments.net/reader034/viewer/2022052418/58f121a31a28abe00e8b45cf/html5/thumbnails/32.jpg)
correo:[email protected] twitter:@Koffer
sitios: medioyforma.info drupalmexico.com
Iván Mejía / Medio y forma estudio