A presentation at Talk for Arts University Bournemouth by Rachel Andrew
Learning CSS. Rachel Andrew Slides & resources https://noti.st/rachelandrew
Doing things on the web since 1996 Co-founder Perch CMS & Notist. Writer of many books. CSS Working Group Member. Spec editor Multicol and Page Floats. MDN tech writer. Slides & resources https://noti.st/rachelandrew
I learn a thing. I write it down. I share it. Slides & resources https://noti.st/rachelandrew
I thought that I had teaching CSS layout all figured out Slides & resources https://noti.st/rachelandrew
Talking about CSS as a layout system Slides & resources https://noti.st/rachelandrew
Talking about CSS as a layout system Slides & resources https://noti.st/rachelandrew
As students today you have a massive advantage. Slides & resources https://noti.st/rachelandrew
You can learn CSS in the same structured way as you learn any other language. Slides & resources https://noti.st/rachelandrew
• • • • • • • • • Flow Layout Changing the value of display Out of flow elements Block Formatting Contexts Writing Modes Logical, flow-relative properties and values Alignment Sizing Media & Feature Queries Slides & resources https://noti.st/rachelandrew
Understanding display Slides & resources https://noti.st/rachelandrew
Normal Flow Block and Inline Layout Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
CSS is doing work for us, before we write any CSS. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.example { display: flex; } Slides & resources https://noti.st/rachelandrew
.example { display: grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew
Changing the value of display changes that element and its direct children. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
Busting out of flow Slides & resources https://noti.st/rachelandrew
position Slides & resources https://noti.st/rachelandrew
.position { position: absolute; } Slides & resources https://noti.st/rachelandrew
float Slides & resources https://noti.st/rachelandrew
.box { background-color: rgb(43,91,128); } Slides & resources https://noti.st/rachelandrew
display: flow-root Slides & resources https://noti.st/rachelandrew
Creating a new Block Formatting Context Slides & resources https://noti.st/rachelandrew
.box { background-color: rgb(43,91,128); display: flow-root; } Slides & resources https://noti.st/rachelandrew
Writing Modes Slides & resources https://noti.st/rachelandrew
writing-mode: horizontal-tb; Inline Dimension Block Dimension Slides & resources https://noti.st/rachelandrew
writing-mode: vertical-rl; Block Dimension Inline Dimension Slides & resources https://noti.st/rachelandrew
Block Start Block Start Block End Block End Slides & resources https://noti.st/rachelandrew
Inline Start Inline End Inline Start Inline End Slides & resources https://noti.st/rachelandrew
Web layout was tied to physical dimensions We think in top, right, bottom, left. Or width & height. Slides & resources https://noti.st/rachelandrew
.example { width: 600px; height: 300px; } Slides & resources https://noti.st/rachelandrew
Logical Properties & Values Slides & resources https://noti.st/rachelandrew
.example { inline-size: 600px; block-size: 300px; } Slides & resources https://noti.st/rachelandrew
inline-size = width block-size = height Slides & resources https://noti.st/rachelandrew
block-size = width inline-size = height Slides & resources https://noti.st/rachelandrew
Physical v. Logical .example { padding-top: 10px; padding-right: 2em; margin-bottom: 2em; } .example { padding-block-start: 10px; padding-inline-end: 2em; margin-block-end: 2em; margin-inline: 1em; } Slides & resources https://noti.st/rachelandrew
.example { border-start-start-radius: 20px; border-start-end-radius: 3em; border-end-start-radius: 2em 4em; border-end-end-radius: 5px; } Slides & resources https://noti.st/rachelandrew
Understand this flow-relative, logical world. Slides & resources https://noti.st/rachelandrew
Box Alignment https://drafts.csswg.org/css-align/ Slides & resources https://noti.st/rachelandrew
Aligning things in the block and inline dimensions. Slides & resources https://noti.st/rachelandrew
Distribution of space and alignment of items within their space. Slides & resources https://noti.st/rachelandrew
Block Start Inline Start Slides & resources https://noti.st/rachelandrew
justify-content In Grid, inline dimension space distribution between tracks Slides & resources https://noti.st/rachelandrew
.example { justify-content: space-between; } Slides & resources https://noti.st/rachelandrew
align-content In Grid, block dimension space distribution between tracks Slides & resources https://noti.st/rachelandrew
.example { align-content: end; } Slides & resources https://noti.st/rachelandrew
In flexbox, we justify on the main axis and align on the cross axis Slides & resources https://noti.st/rachelandrew
justify-content In Flex, main axis space distribution between flex items Slides & resources https://noti.st/rachelandrew
.example { justify-content: flex-end; } Slides & resources https://noti.st/rachelandrew
align-content In Flex, cross axis space distribution between flex lines Slides & resources https://noti.st/rachelandrew
.example { align-content: space-around; } Slides & resources https://noti.st/rachelandrew
For –content properties to do anything, you must have spare space to distribute! Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.item { justify-self: end; align-self: end; } Slides & resources https://noti.st/rachelandrew
.example { justify-items: end; align-items: end; } Slides & resources https://noti.st/rachelandrew
“[justify-content] does not apply to flex items, because there is more than one item in the main axis.” Slides & resources https://noti.st/rachelandrew
.item { align-self: center; } Slides & resources https://noti.st/rachelandrew
“Prior to alignment via justifycontent and align-self, any positive free space is distributed to auto margins in that dimension.” Slides & resources https://noti.st/rachelandrew
.example div:last-child { margin-left: auto; } Slides & resources https://noti.st/rachelandrew
Let’s stop calling stuff that is in the spec a CSS ‘hack’ Slides & resources https://noti.st/rachelandrew
Safe and Unsafe alignment Avoiding CSS data loss Slides & resources https://noti.st/rachelandrew
.example { display: flex; flex-direction: column; align-items: center; } Slides & resources https://noti.st/rachelandrew
.example { display: flex; flex-direction: column; align-items: safe center; } Slides & resources https://noti.st/rachelandrew
Box Sizing https://drafts.csswg.org/css-sizing-3/ Slides & resources https://noti.st/rachelandrew
What about the Box Model? Slides & resources https://noti.st/rachelandrew
When we had to control the size of each item in a layout, the Box Model was key. Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
500px Slides & resources https://noti.st/rachelandrew
30px + 500px + 30px Slides & resources https://noti.st/rachelandrew
5px + 30px + 500px + 30px + 5px Slides & resources https://noti.st/rachelandrew
40px + 5px + 30px + 500px + 30px + 5px + 40px Slides & resources https://noti.st/rachelandrew
What is the inline-size or width of the box? By default, the content-box Slides & resources https://noti.st/rachelandrew
If you want the specified width to include padding and border Set the box-sizing property to border-box. Slides & resources https://noti.st/rachelandrew
.example { box-sizing: border-box; } Slides & resources https://noti.st/rachelandrew
How big is that box? Slides & resources https://noti.st/rachelandrew
In the past everything was a length or a percentage. Slides & resources https://noti.st/rachelandrew
What is the minimum and maximum size of this thing? Slides & resources https://noti.st/rachelandrew
.example { grid-template-columns: min-content max-content; } Slides & resources https://noti.st/rachelandrew
Any content-based sizing is worked out based on these min and max content sizes. Slides & resources https://noti.st/rachelandrew
.example { display: flex; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: auto; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: auto; } Slides & resources https://noti.st/rachelandrew
.example > * { flex: 1; } Slides & resources https://noti.st/rachelandrew
Old browsers. They exist. Slides & resources https://noti.st/rachelandrew
We have a specification. Some of it isn’t implemented yet. Slides & resources https://noti.st/rachelandrew
Lack of support is very different to the buggy support of the past. Slides & resources https://noti.st/rachelandrew
Media & Feature Queries How big is my viewport? Is this a touchscreen? Does this browser support Grid? Respond based on the answers. Slides & resources https://noti.st/rachelandrew
Avoid resources describing CSS as a weird and quirky thing. Slides & resources https://noti.st/rachelandrew
CSS is unlike other languages because it serves environments like no other. Slides & resources https://noti.st/rachelandrew
Learn CSS as it is today. Slides & resources https://noti.st/rachelandrew
Thank you! @rachelandrew Slides & resources https://noti.st/rachelandrew
Rachel Andrew has been writing CSS for over 20 years, and teaching people the things she has learned for almost as long. Since the early days of CSS, and certainly since “CSS for Layout” became a thing, we’ve been teaching CSS in pretty much the same way. Here is a block thing, here is an inline thing, this is the Box Model … and here is this weird jumping through hoops that makes a layout. It’s time for a change.
In this talk Rachel will set out how we should be learning CSS in 2020. Explaining how many resources stll reference the quirks and hacks of the past, and how to build for yourself a plan to learn CSS as it is today rather than how it was yesterday.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
