Vars in CSS!
Define them:
--primary-color: blue;
Use them:
color: var(--primary-color);
Slide 83
Slide 83 text
Var scoping
Vars are global and local
global
:root {
--primary-color: blue;
}
local
.btn {
--primary-color: red;
}
Slide 84
Slide 84 text
Can I use?
Slide 85
Slide 85 text
Beyond #2
CSS Grid
Slide 86
Slide 86 text
CSS Grid
• Tables, divs, floats are the old way
• Flex is 1-dimensional (meant for smaller things)
• Grid is 2-dimensional! Specifically made for
layout!
Slide 87
Slide 87 text
Grid vs. Flex
• Grid: Larger scale layout (page)
• Flex: within a component (nav)
Slide 88
Slide 88 text
CSS Grid + Flex = ❤
Slide 89
Slide 89 text
Further reading:
https://css-tricks.com/snippets/css/complete-
guide-grid/
https://cssgridgarden.com
Slide 90
Slide 90 text
Beyond #3
CSS Houdini
Slide 91
Slide 91 text
“Extend CSS at
CSS speeds”
http://houdini.glitch.me/
Slide 92
Slide 92 text
“Much like Service Workers are
a low-level JavaScript API for
the browser's cache, Houdini
introduces low-level JavaScript
APIs for the browser's render
engines”
http://houdini.glitch.me/
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
Further reading:
houdini.glitch.me
css-houdini.rocks
github.com/GoogleChromeLabs/houdini-samples
Slide 96
Slide 96 text
We don’t make mistakes,
just happy little accidents