🏠

Dynamic CSS without Slides

Miriam Suzanne | @mirisuzanne | @oddbird

OddBird

Dynamic CSS without Slides

Smashing Conf — 2019-04-17

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-undefined 14 28 19
item-undefined 34 74 0
item-undefined 30 59 11
item-undefined 77 38 12
item-undefined 46 52 24
item-undefined 11 73 24
item-undefined 59 92 3
item-undefined 42 45 8
item-undefined 60 0 3
item-undefined 5 22 6
item-undefined 33 90 22
item-undefined 94 61 22
item-undefined 51 52 23
item-undefined 3 55 16
item-undefined 76 0 8
item-undefined 28 33 22
item-undefined 58 6 19
item-undefined 4 46 20
item-undefined 51 64 9
item-undefined 86 32 3
index value
0 1
1 94
2 85
3 57
4 8
5 97
6 21
7 92
8 98
9 38
10 69
11 47
12 86
13 50
14 32

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…