CSS day 2018 - Layout Saga in the web application era
1 like1,046 views
The document discusses layout techniques for web applications including position: fixed, position: absolute, display: flex, display: grid, and table-based layouts. It provides code examples and links to video demonstrations of each technique. It emphasizes choosing layout strategies based on semantics, responsiveness, and code cleanliness rather than frameworks.
CSS day 2018 - Layout Saga in the web application era
- 1. in the web application era Layout Saga 1
- 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. #CSSDAY - Faenza 2018 @Violo - extrategy Layout 3
- 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. #CSSDAY - Faenza 2018 @Violo - extrategy Web Application 5
- 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. #CSSDAY - Faenza 2018 @Violo - extrategy Web Application has functionality similar to desktop software or mobile application 7 wikipedia
- 8. #CSSDAY - Faenza 2018 @Violo - extrategy8
- 9. #CSSDAY - Faenza 2018 @Violo - extrategy single page application multiple DOM tree shadow DOM view encapsulation scrolling content 9
- 10. #CSSDAY - Faenza 2018 @Violo - extrategy10
- 11. #CSSDAY - Faenza 2018 @Violo - extrategy11 Page flow
- 12. #CSSDAY - Faenza 2018 @Violo - extrategy12
- 13. #CSSDAY - Faenza 2018 @Violo - extrategy13 Scrolling content
- 14. #CSSDAY - Faenza 2018 @Violo - extrategy Saga 14
- 15. #CSSDAY - Faenza 2018 @Violo - extrategy15
- 16. #CSSDAY - Faenza 2018 @Violo - extrategy position: fixed; 16 914 16 26 13 6 old browser compatibility use of “calc” value for operation
- 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. #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. #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. #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. #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. #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. #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. #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. #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. #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. #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. #CSSDAY - Faenza 2018 @Violo - extrategy table 28 18 26 6 nestable layout all the rest 13
- 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. #CSSDAY - Faenza 2018 @Violo - extrategy30 Avoid framework dependencies
- 31. #CSSDAY - Faenza 2018 @Violo - extrategy31 Layout as a pattern
- 32. #CSSDAY - Faenza 2018 @Violo - extrategy code is less important than the why we write code 32
- 33. #CSSDAY - Faenza 2018 @Violo - extrategy Thanks! 33 @Violo github.com/Violo extrategy.net/it/alessandro-violini https://joind.in/event/cssday-2018