🏠

Dynamic CSS without Slides

Miriam Suzanne | @mirisuzanne | @oddbird

OddBird

Dynamic CSS without Slides

Smashing Conf — April 17, 2019

Just a series of links and images and ideas…

OddBird Faces

OddBird Full-Stack Agency

Custom Applications | Design Systems | Refactors

Client Day Planner

Screenshot of schedule grid

Stop Using Slides

Hey Vitaly,

Miriam is Cheating

↙

(she’s over there)

Please Don’t Use It

2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
1
2
3
4
5
6
7
8
9
10

This one is for Maria [permalink / source]

putting it all together… [permalink / source]

name x value y value size == z value
item-0 23 33 16
item-1 10 32 11
item-2 96 16 23
item-3 45 57 3
item-4 40 21 22
item-5 6 35 3
item-6 57 30 4
item-7 38 3 14
item-8 12 39 10
item-9 19 5 1
item-10 64 67 6
item-11 73 97 14
item-12 1 98 21
item-13 9 85 6
item-14 48 34 4
item-15 37 30 9
item-16 65 32 17
item-17 40 24 2
item-18 79 46 11
item-19 51 20 0
index value
0 66
1 98
2 41
3 88
4 42
5 49
6 76
7 46
8 91
9 33
10 20
11 1
12 9
13 3
14 75

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

Levitated Toy Factory at Beyond Tellerand

Animated sprites from Monster Slayer by Krystal Campioni [permalink / source]

Rachel Andrew | @rachelandrew

gridbyexample.com

examples, templates, and fallbacks

CSS is Awesome (overflow meme)

¯\_(ツ)_/¯ what were you hoping for?

Declarative Syntax

!=

Static Results

CSS is Awesome

Inspired by Stacy Kvernmo [permalink / source]

Stay in touch…