🏠

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