Collection di tecniche CSS per strutturare layout

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