TIL about -starting -blocks

Logical vs. physical properties, values and units in CSS; encore: Trajan
Links to resources and codepens at https://noti.st/gunnarbittersmann/DQUUos/til-about-starting-blocks

Transcript

1. TIL about
   -
   starting
   -
   blocks
   photo by Braden Collum on Unsplash
   

   View Slide

2. justify-content: left
   justify-content: right justify-content: end
   justify-content: start
   physical values logical values
   

   View Slide

3. padding-block-start
   padding-block-end
   padding
   

   -inline
   

   -start
   padding
   

   -inline
   

   -end
   ➡︎
   inline direction
   ➡︎
   block direction
   citius, altius, fortius
   padding-block-start
   padding-block-end
   padding
   

   -inline
   

   -end
   padding
   

   -inline
   

   -start
   direction: rtl ىوقأ ,ىلعأ ,عرسأ
   direction: ltr
   

   View Slide

4. padding-inline-start
   padding-inline-end
   padding-block-end
   padding-block-start
   Α
   Γ
   ଎
   ͘
   Α
   Γ
   ߴ
   ͘
   Α
   Γ
   ڧ
   ͘
   padding-block-start
   padding-block-end
   padding-inline-start
   padding-inline-end
   ʮΑΓ଎͘ɺΑΓߴ
   ͘ɺΑΓڧ͘ʯ
   writing-mode: horizontal-tb writing-mode: vertical-rl
   ➡︎
   inline direction
   ➡︎
   block direction
   

   View Slide

5. writing-mode: vertical-lr
   

   View Slide

6. padding-left
   
   
   padding-right
   
   
   padding-top
   
   
   padding-bottom
   
   
   padding
   
   
   margin-…
   
   
   border-…
   
   
   padding-inline-start
   
   
   padding-inline-end
   
   
   padding-block-start
   
   
   padding-block-end
   
   
   padding-inline
   
   
   padding-block
   
   
   margin-…
   
   
   border-…
   
   
   physical properties logical properties
   

   View Slide

7. left
   
   
   right
   
   
   top
   
   
   bottom
   
   
   inset
   
   
   width
   
   
   height
   inset-inline-start
   
   
   inset-inline-end
   
   
   inset-block-start
   
   
   inset-block-end
   
   
   inset-inline
   
   
   inset-block
   
   
   inline-size
   
   
   block-size
   physical properties logical properties
   

   View Slide

8. vw, vh
   
   
   lvw, lvh
   
   
   svw, svh
   
   
   dvw, dvh
   
   
   cqw, cqh
   vi, vb
   
   
   lvi, lvb
   
   
   svi, svb
   
   
   dvi, dvb
   
   
   cqi, cqb
   physical units logical units
   

   View Slide

9. taken from The Large, Small, and Dynamic Viewports by Bramus
   

   View Slide

10. photo by Adi Goldstein on Unsplash
    The
    -
    end
    

    View Slide

11. citius, altius, fortius
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. photo by Adi Goldstein on Unsplash
    the end
    

    View Slide