🏠

Dynamic CSS Live Code!

Miriam Suzanne | @mirisuzanne | @oddbird

OddBird

Dynamic CSS Live Code!

Design 4 Drupal — June 27, 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

Intrinsic Design

truly fluid, meaningful, mixed-approach

Dynamic CSS

styles based on dynamic parameters

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 71 64 14
item-1 92 72 0
item-2 45 43 10
item-3 18 48 3
item-4 96 24 1
item-5 81 68 12
item-6 30 58 6
item-7 29 12 15
item-8 10 95 5
item-9 43 51 22
item-10 11 49 11
item-11 4 9 5
item-12 12 47 11
item-13 38 66 24
item-14 73 24 4
item-15 70 0 5
item-16 33 12 3
item-17 20 97 0
item-18 90 31 13
item-19 15 68 17
index value
0 56
1 37
2 43
3 88
4 88
5 21
6 70
7 44
8 70
9 27
10 86
11 94
12 99
13 80
14 24

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…