CSS - Arquitectura Escalable y Modular

  • 2,071 views
Uploaded on

Arquitectura de CSS para grupos de trabajo, escalable y modular.

Arquitectura de CSS para grupos de trabajo, escalable y modular.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,071
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
23
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSSEscalable & Modular Buenas  prácticas
  • 2. GRANDES GRUPOS DE TRABAJO CSS Entrega X CSS Desarrolla Desordenado Caos
  • 3. Entonces ...¿Cómo nos ordenamos?
  • 4. CSS: escalables y modulares Estructura Metodología común
  • 5. CSS: escalables y modulares Escalable y Modular = Frameworks CSS
  • 6. CATEGORIZAR
  • 7. 4 REGLAS DE ORO
  • 8. Base Layout Módulos Estados
  • 9. BASE
  • 10. Base• Core• Olvidar clases e ID’s.• Sólo tag’s esenciales.• CSS Reset
  • 11. EJEMPLO CSS Base body { ! line-height: 1.5; font-family: Arial, Verdana; } table { ! border-collapse: separate; ! border-spacing: 0; } caption, th, td { ! text-align: left; ! font-weight: normal; } a { text-decoration: none; font-weight: bold; }
  • 12. LAYOUT
  • 13. lAYOUT• Contenedores• Clases e ID’s• Nomenclatura
  • 14. EJEMPLOCSS HTML#cabecera, #pie, #contenido { <div id=”cabecera”></div> width: 960px; <div id=”contenido”></div> margin: auto; <div id=”pie”></div>}#contenido { border: solid #CCC; border-width: 1px 0 0;}
  • 15. VISUALIZACIÓN #cabecera #contenido #pie
  • 16. FLUIDO CSS Layout HTML FLUIDO #contenido { <div id=”contenido”> width: 80%; </div> float: left; } <div id=”sidebar”> </div> #sidebar { width: 20%; float: right; }
  • 17. VISUALIZACIÓN FLUIDO#contenido #sidebar 100%
  • 18. FIJO CSS Layout HTML FIJO #contenido { <div id=”contenido” width: 80%; class=”lay-fijo”> float: left; </div> } <div id=”sidebar” #sidebar { class=”lay-fijo” > width: 20%; </div> float: right; } .lay-fijo #contenido { width: 600px; } .lay-fijo #sidebar { width: 200px; }
  • 19. VISUALIZACIÓN FIJO#contenido #sidebar 800px
  • 20. Definiendo LAYOUT
  • 21. Definiendo LAYOUT#CABECERA#SIDEBAR-L #SLIDER #SIDEBAR-R
  • 22. MÓDULOS
  • 23. Módulos• Re-usables• Solamente clases• Nomenclatura• La mayor parte del código
  • 24. EJEMPLO CSS Módulos HTML .mod-not h2 { <div id=”sidebar”> padding: 5px; <div class=”mod-not”> border-color: blue; <h2>Charlas background: white; <span>17</span></h2> font-size: 2em; </div> color: #000; </div> } .mod-not h2 span { padding: 5px; }
  • 25. VISUALIZACIÓN FLUIDO Charlas 17 .mod-not #sidebar
  • 26. Grupos de propiedadesCaja Bordes Fondo Textos Otros
  • 27. estados
  • 28. ESTADOS• Condiciones• Estados de Links• Estados de acción• Errores• Nomenclatura
  • 29. EJEMPLO CSS Estados .est-cont { background: white; } .est-exp { background: black; }
  • 30. THEMES y Tipografías
  • 31. OPTIMIZACIÓN
  • 32. Vídeo
  • 33. Vídeo
  • 34. BUENAS PRÁCTICAS• Minify css• Google Page Speed test• Less
  • 35. rodrigo acevedO hola@rodrigo-acevedo.com @rodboc