Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Webtraining Zone - Grid CSS

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Boostrap.pptx
Boostrap.pptx
Cargando en…3
×

Eche un vistazo a continuación

1 de 35 Anuncio

Más Contenido Relacionado

Similares a Webtraining Zone - Grid CSS (20)

Anuncio

Más reciente (20)

Webtraining Zone - Grid CSS

  1. 1. Grid CSS
  2. 2. ¿Qué aprenderemos? • Grid CSS – Display grid – Columns / rows – Auto-flow – Sizing, Span, Start / end – Ejemplos con layouts – Responsive Web Design (RWD)
  3. 3. Historia
  4. 4. El problema original
  5. 5. ¿Cómo haciamos las cosas antes? Sin layout • Claro eso funcionó el primer año… http://info.cern.ch/hypertext/WWW/TheProject.html
  6. 6. ¿Cómo haciamos las cosas antes? Tablas • Sin conocimientos avanzados • Table hell !
  7. 7. ¿Cómo mejoró la situación? Divs + Floats • Estructuras más complejas • Compatibles con todos los browsers
  8. 8. ¿Qué opciones “nuevas” tenemos? Flexbox • 1-dimension • Posible re-ordenar items • Excelente para centrado vertical
  9. 9. Un ejemplo de un grid con flexbox Flexbox Grid, Bootstrap 4 http://flexboxgrid.com/ http://getbootstrap.com/
  10. 10. Ejercicio #1 ¿Y mis floats?
  11. 11. Ejercicio #2 Display Grid
  12. 12. Template columns & rows
  13. 13. Ejercicio #3 Template Columns & Rows
  14. 14. Auto flow
  15. 15. Ejercicio #4 Auto flow
  16. 16. Sizing
  17. 17. Ejercicio #5 Sizing
  18. 18. Span
  19. 19. Ejercicio #6 Span
  20. 20. Start / End
  21. 21. Ejercicio #7 Start / End
  22. 22. Responsive Web Design http://alistapart.com/article/responsive-web-design
  23. 23. 3 pilares Grid flexible Media queries Images (auto ajustables) ¿Cómo identificamos RWD?
  24. 24. Ejercicio #8 Responsividad Grid CSS + @media queries
  25. 25. ¿Cómo identificamos RWD?
  26. 26. Line names
  27. 27. Ejercicio #9 Nombrando líneas
  28. 28. Grid areas
  29. 29. Ejercicio #10 Áreas con nombre
  30. 30. Ejercicio #11 Agregando contenido real
  31. 31. @media
  32. 32. ¿Y los Legacy Browsers? Especificación “antigua” https://github.com/codler/Grid-Layout-Polyfill Especificación actual https://github.com/FremyCompany/css-grid-polyfill/ @supports para otros browsers https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017 https://www.youtube.com/watch?v=7kVeCqQCxlk
  33. 33. Más información A Complete Guide to Grid https://css-tricks.com/snippets/css/complete-guide-grid/ Responsive Web Design http://alistapart.com/article/responsive-web-design CSS Grid Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017 https://www.youtube.com/watch?v=7kVeCqQCxlk
  34. 34. Más información Grid by Example https://gridbyexample.com/ Grid "fallbacks" and overrides https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks CSS Grid Layout and Progressive Enhancement https://developer.mozilla.org/en- US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement
  35. 35. ¡Gracias! Alex Arriaga http://webtraining.zone/ @alex_arriaga_m

×