Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

CSS day 2018 - Layout Saga in the web application era

327 visualizaciones

Publicado el

Collection di tecniche CSS per strutturare layout

Publicado en: Internet
  • Sé el primero en comentar

CSS day 2018 - Layout Saga in the web application era

  1. 1. in the web application era Layout Saga 1
  2. 2. #CSSDAY - Faenza 2018 @Violo - extrategy Alessandro Violini coding to work out Interface Developer Interaction Designer Retro Computer Collector Drummer 22 https://joind.in/event/cssday-2018
  3. 3. #CSSDAY - Faenza 2018 @Violo - extrategy Layout 3
  4. 4. #CSSDAY - Faenza 2018 @Violo - extrategy Layout: is the part of graphic design that deals in the arrangement of visual elements on a page 4 wikipedia
  5. 5. #CSSDAY - Faenza 2018 @Violo - extrategy Web Application 5
  6. 6. #CSSDAY - Faenza 2018 @Violo - extrategy Web Application: is a client-server computer program in which the client, including the user interface and client-side logic, runs in a web browser 6 wikipedia
  7. 7. #CSSDAY - Faenza 2018 @Violo - extrategy Web Application has functionality similar to desktop software or mobile application 7 wikipedia
  8. 8. #CSSDAY - Faenza 2018 @Violo - extrategy8
  9. 9. #CSSDAY - Faenza 2018 @Violo - extrategy single page application multiple DOM tree shadow DOM view encapsulation scrolling content 9
  10. 10. #CSSDAY - Faenza 2018 @Violo - extrategy10
  11. 11. #CSSDAY - Faenza 2018 @Violo - extrategy11 Page flow
  12. 12. #CSSDAY - Faenza 2018 @Violo - extrategy12
  13. 13. #CSSDAY - Faenza 2018 @Violo - extrategy13 Scrolling content
  14. 14. #CSSDAY - Faenza 2018 @Violo - extrategy Saga 14
  15. 15. #CSSDAY - Faenza 2018 @Violo - extrategy15
  16. 16. #CSSDAY - Faenza 2018 @Violo - extrategy position: fixed; 16 914 16 26 13 6 old browser compatibility use of “calc” value for operation
  17. 17. #CSSDAY - Faenza 2018 @Violo - extrategy17 position: fixed; Qui era presente uno screen recording in cui veniva mostrato il layout e lo stile. Il video lo trovi su youtube all’indirizzo: https://youtu.be/2RXMFevwzYE O su GitHub:
 https://github.com/Violo/layout-saga
  18. 18. #CSSDAY - Faenza 2018 @Violo - extrategy position: fixed; 18 814 29 15 13 6 old browser compatibility IE8 included no need of “calc” IE 8 needs modernize for HTMLH 5 tag awkward system with “padding” wrapper
  19. 19. #CSSDAY - Faenza 2018 @Violo - extrategy19 position: fixed; Qui era presente uno screen recording in cui veniva mostrato il layout e lo stile. Il video lo trovi su youtube all’indirizzo: https://youtu.be/u0QnFa5Q04o O su GitHub:
 https://github.com/Violo/layout-saga
  20. 20. #CSSDAY - Faenza 2018 @Violo - extrategy position: absolute; 20 914 16 26 13 6 nestable layout automatic scrolling content use of both “top” & “bottom” use of “~” for scroll detection
  21. 21. #CSSDAY - Faenza 2018 @Violo - extrategy21 position: absolute; Qui era presente uno screen recording in cui veniva mostrato il layout e lo stile. Il video lo trovi su youtube all’indirizzo: https://youtu.be/wyqcMvDwSMw O su GitHub:
 https://github.com/Violo/layout-saga
  22. 22. #CSSDAY - Faenza 2018 @Violo - extrategy position: absolute; 22 914 29 29 22 8 nestable layout automatic scrolling content use of both “top” & “bottom” use of “~” for scroll detection use of “vw" & “vh” with viewport relative units
  23. 23. #CSSDAY - Faenza 2018 @Violo - extrategy position: absolute; 23 914 29 29 22 8 nestable layout automatic scrolling content float behavior for responsiveness use of both “top” & “bottom” use of “~” for scroll detection use of “vw" & “vh” with float
  24. 24. #CSSDAY - Faenza 2018 @Violo - extrategy display: flex; 24 1116 58 51 22 9 light and clean code (30% lighter!) easy responsive set up no need to manage scrolling content browser compatibility flex-direction: column
  25. 25. #CSSDAY - Faenza 2018 @Violo - extrategy25 display: flex; Qui era presente uno screen recording in cui veniva mostrato il layout e lo stile. Il video lo trovi su youtube all’indirizzo: https://youtu.be/9-Dn4A-PmbM O su GitHub:
 https://github.com/Violo/layout-saga
  26. 26. #CSSDAY - Faenza 2018 @Violo - extrategy display: grid; 26 11*16 58 62 11 light and clean code (50% lighter!) easy responsive set up no need to manage scrolling content very clean and semantic html browser compatibility
  27. 27. #CSSDAY - Faenza 2018 @Violo - extrategy27 display: grid; Qui era presente uno screen recording in cui veniva mostrato il layout e lo stile. Il video lo trovi su youtube all’indirizzo: https://youtu.be/HwksycRdEmg O su GitHub:
 https://github.com/Violo/layout-saga
  28. 28. #CSSDAY - Faenza 2018 @Violo - extrategy table 28 18 26 6 nestable layout all the rest 13
  29. 29. #CSSDAY - Faenza 2018 @Violo - extrategy29 table Qui era presente uno screen recording in cui veniva mostrato il layout e lo stile. Il video lo trovi su youtube all’indirizzo: https://youtu.be/GIC3cjJe6xA O su GitHub:
 https://github.com/Violo/layout-saga
  30. 30. #CSSDAY - Faenza 2018 @Violo - extrategy30 Avoid framework dependencies
  31. 31. #CSSDAY - Faenza 2018 @Violo - extrategy31 Layout as a pattern
  32. 32. #CSSDAY - Faenza 2018 @Violo - extrategy code is less important than the why we write code 32
  33. 33. #CSSDAY - Faenza 2018 @Violo - extrategy Thanks! 33 @Violo github.com/Violo extrategy.net/it/alessandro-violini https://joind.in/event/cssday-2018

×