CSS speed dating for JavaScript people

A lot of people dislike CSS for no reason, either one did not take the time to learn the fundamentals as they did with JavaScript, or sometimes one just doesn't know about specific superpowers of CSS. Let's take 30 minutes to quickly go through crucial CSS fundamentals and dive into some nifty techniques for your next front-end adventures.

Transcript

1. CSS speed dating for JavaScript people
2. Hey, my name is Nico. I like CSS, hand ground coffee and I organize FrankenJS in Nuremberg. twitter: @theNicoKoenig
3. The essence of traditional german words. Bring Kraut and Autobahn into your code.
4. Two-day workshop for people who would like to start in tech. https://newdevs.org
5. I once really (yes, really) sucked at CSS.
6. But I wasn’t alone CSS was just an obstacle in our codebase and copy and pasting from stack overflow was our super power.
7. The expert In the land of the blind, the one-eyed man is king - so I accidentally became the wizard. And somehow a trainer.
8. The box model is the blueprint of layout on the web. Each element is made out of the box’s content, padding, border, and margin.
9. box model
10. Question: what are the dimensions of the div? div { margin: 10px; border-width: 10px; padding: 10px; width: 400px; }
11. The box-sizing property defines how the total width and height of an element is calculated.
12. box-sizing: content-box Width and height only set the size of the elements content-box. The values for padding and border are added to the total dimensions. This is the default behavior.
13. box-sizing: border-box Width and height properties define the dimensions of the element including values for padding and border.
14. global box-sizing FTW html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
15. The display property defines how an element participates in the layout process.
16. Question: what are the widths of the elements? div { width: 200px; } button { width: 200px; } span { width: 200px; }
17. display: block • create a newline before and after • takes up the full width of the parent element by default • adjusts to content height by default • width and height can be set • can contain any elements
18. display: inline • width and height properties are ignored • as big as the elements content • overflows to a new line • creates no new lines • can only contain other inline elements or data
19. display: inline-block • behaves like display: inline, but also accepts width and height properties
20. In the normal document flow, all elements are laid out according to their appearance in the document respecting the individual display type and direction.
21. Normal document flow with direction: LTR <main> <p></p> <span></span> <p></p> <span></span> <span></span> <span></span> <button></button> </main>
22. Normal document flow with direction: RTL <main> <p></p> <span></span> <p></p> <span></span> <span></span> <span></span> <button></button> </main>
23. The position property defines how an element is positioned. The top, bottom, left and right properties define the final location of positioned elements.
24. position: static • is not positioned • default position of all elements in the normal document flow • top, right, bottom and left properties are ignored
25. position: relative • is positioned • still takes up the original space in the normal document flow • top or bottom set vertical offset • left or right set horizontal offset
26. position: relative If left and right property have a value other than auto, the logical starting property for the current direction wins. Left for LTR and right for RTL.
27. position: absolute can be slightly tricky, because it depends on the containing block and if top, bottom, left or right properties are set. P.S: it’s positioned
28. The containing block for absolute positioned elements is the nearest positioned parent element* * close, but there are some exceptions.
29. position: absolute without top, bottom, left or right values
30. position: absolute with top: 0px and left: 0px
31. position: absolute with top: 0px, bottom: 0px, left: 0px, right: 0px
32. position: absolute • removed from the normal document flow • block elements shrink to it’s content size if no width or height property is set • stays in the normal document flow position if no offset properties are set • if offset properties are set, it’s positioned according to the offsets within the padding box of the containing block
33. Link to codepen