🏠

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 73 96 1
item-1 16 95 21
item-2 49 3 21
item-3 14 7 8
item-4 33 5 6
item-5 2 74 8
item-6 74 38 20
item-7 34 43 6
item-8 24 63 19
item-9 39 71 2
item-10 61 81 24
item-11 47 70 8
item-12 77 69 24
item-13 90 76 8
item-14 66 46 6
item-15 65 62 15
item-16 4 48 15
item-17 90 84 14
item-18 13 36 4
item-19 1 78 7
index value
0 37
1 47
2 42
3 36
4 73
5 11
6 59
7 17
8 95
9 12
10 43
11 32
12 56
13 76
14 65

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…