🏠
Dynamic CSS without Slides
Dynamic CSS without Slides
Smashing Conf — April 17, 2019
Homecoming, a film by Beyoncé
Ceci n’est pas une SLIDE DECK
Just a series of links and images and ideas…
Client Day Planner
Stop Using Slides
Hey Vitaly,
Miriam is Cheating
↙
(she’s over there)
AG Grid Nesting Test from OOCSS [permalink / source]
Susy, scribbled out
Please Don’t Use It
2000 | |
---|---|
2001 | |
2002 | |
2003 | |
2004 | |
2005 | |
2006 | |
2007 | |
2008 | |
2009 |
One does not simply “learn” JavaScript
1
2
3
4
5
6
7
8
9
10
name | x value | y value | size == z value |
---|---|---|---|
item-0 | 96 | 99 | 14 |
item-1 | 25 | 44 | 0 |
item-2 | 17 | 11 | 8 |
item-3 | 88 | 29 | 11 |
item-4 | 93 | 51 | 13 |
item-5 | 48 | 4 | 3 |
item-6 | 22 | 78 | 21 |
item-7 | 43 | 9 | 10 |
item-8 | 26 | 98 | 24 |
item-9 | 95 | 98 | 20 |
item-10 | 76 | 81 | 8 |
item-11 | 31 | 34 | 13 |
item-12 | 96 | 46 | 13 |
item-13 | 96 | 76 | 10 |
item-14 | 97 | 38 | 1 |
item-15 | 9 | 18 | 4 |
item-16 | 54 | 69 | 16 |
item-17 | 15 | 46 | 24 |
item-18 | 2 | 76 | 20 |
item-19 | 65 | 78 | 3 |
index | value |
---|---|
0 | 12 |
1 | 3 |
2 | 92 |
3 | 44 |
4 | 19 |
5 | 69 |
6 | 91 |
7 | 57 |
8 | 98 |
9 | 89 |
10 | 21 |
11 | 2 |
12 | 88 |
13 | 45 |
14 | 30 |
Hue is Radial
* {
--complement: calc(var(--h) - 180);
background: hsl(var(--complement), var(--s), var(--l));
}
Lightness is “Clamped”
* {
--threshold: 55;
--contrast: calc((var(--l) - var(--threshold)) * -100%);
color: hsl(var(--h), var(--s), var(--contrast));
}
Complement
Inspired by Facundo Corradini [permalink / source]
Levitated Toy Factory at Beyond Tellerand
Animated sprites from Monster Slayer by Krystal Campioni [permalink / source]
A box with text inside that says ‘InDesign is’ and then has a small + icon to indicate overset text
¯\_(ツ)_/¯ what were you hoping for?
Declarative Syntax
!=
Static Results
CSS is Awesome
Inspired by Stacy Kvernmo [permalink / source]