Smacss. Organizando css
0 recomendaciones1,057 vistas
SMACSS (Scalable and Modular Architecture for CSS) es una guía de estilos para organizar el CSS de manera predecible, reutilizable, mantenible y escalable. Se divide el CSS en 5 categorías: Base, Layout, Module, State y Theme. Esto ayuda a mantener un CSS ordenado y fácil de mantener a medida que crecen los sitios web.
Smacss. Organizando css
- 2. Soy Iván Mejía. Soy diseñador web. Llevo varios años creando sitios web.
- 4. <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>
- 5. <h2 style=“color:red;background:black;”> This is a red heading with a black background </h2>
- 7. Sitios más complejos 1- Extensión (muchas páginas). 2- CMS. 3- Múltiples plantillas o temas. 4- Trabajo en equipo.
- 8. Organicemos
- 9. CSS - Predecible - Reusable - Mantenible - Escalable
- 11. SMACSS Scalable and Modular Architecture for CSS
- 12. SMACSS fue creado por Jonathan Snook https://smacss.com
- 13. -Una guía de estilos. -Una colección de patrones de diseño. -No es una librería o framework.
- 15. Base body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
- 16. Layout #header, #article, #footer { width: 95%; margin: auto; } #col-sm-3 { border: solid #CCC; border-width: 1px 0 0; }
- 17. Module .search > h2 { padding: 5px; } .search span { padding: 5px; }
- 18. State Un 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.
- 19. 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.
- 20. !important
- 21. 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>
- 22. Theme // in module-name.css .mod { border: 1px solid; } // in theme.css .mod { border-color: blue; }
- 23. 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
- 27. Otros sistemas
- 28. BEM Block, Element and Modifier.
- 31. Preguntas?
- 32. correo:ivan@medioyforma.info twitter:@Koffer sitios: medioyforma.info drupalmexico.com Iván Mejía / Medio y forma estudio