🏠
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 | 62 | 89 | 13 |
item-1 | 11 | 61 | 2 |
item-2 | 17 | 48 | 6 |
item-3 | 58 | 67 | 11 |
item-4 | 8 | 50 | 9 |
item-5 | 56 | 98 | 14 |
item-6 | 8 | 39 | 15 |
item-7 | 25 | 18 | 16 |
item-8 | 56 | 68 | 21 |
item-9 | 28 | 98 | 15 |
item-10 | 97 | 62 | 21 |
item-11 | 59 | 9 | 12 |
item-12 | 85 | 61 | 13 |
item-13 | 22 | 40 | 2 |
item-14 | 75 | 79 | 20 |
item-15 | 57 | 29 | 4 |
item-16 | 23 | 6 | 23 |
item-17 | 43 | 63 | 10 |
item-18 | 87 | 30 | 18 |
item-19 | 88 | 98 | 9 |
index | value |
---|---|
0 | 19 |
1 | 2 |
2 | 98 |
3 | 59 |
4 | 94 |
5 | 29 |
6 | 55 |
7 | 59 |
8 | 71 |
9 | 0 |
10 | 56 |
11 | 6 |
12 | 95 |
13 | 98 |
14 | 64 |
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]