Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS day 2018 - Layout Saga in the web application era

270 views

Published on

Collection di tecniche CSS per strutturare layout

Published in: Internet
  • Be the first to comment

  • Be the first to like this

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

×