🏠

Dynamic CSS (Semi) LiveCode!

Miriam Suzanne | @mirisuzanne | @oddbird

OddBird

Dynamic CSS (Semi) LiveCode!

Generate NY — April 25, 2019

Tweet from @halftes6

I ❤ CSS

“Declarative, Resilient, Contextual”

Declarative Syntax

!=

Static Results

Design for an Unknown Canvas

CSS is Dynamic by Design

OddBird Faces

OddBird Full-Stack Agency

Custom Applications | Design Systems | Refactors

Client Day Planner

Screenshot of schedule grid

[SusyCSS by @mirisuzanne | presentation]

[SusyCSS Demo by @mirisuzanne | presentation]

Please Don’t Use It

Client Day Planner

Screenshot of schedule grid

Thanks, Josh Clark

Define the Day

<main style="
  --day-start: 9,
  --day-end: 18
">

Define the Events

<section style="
  --event-start: 13,
  --event-end: 14
">

putting it all together… [permalink / source]

name x value y value size == z value
item-0 85 24 20
item-1 23 69 13
item-2 92 63 17
item-3 29 15 12
item-4 73 72 20
item-5 93 91 5
item-6 38 62 12
item-7 70 42 23
item-8 74 49 15
item-9 3 98 12
item-10 90 60 5
item-11 0 49 3
item-12 22 15 12
item-13 95 90 1
item-14 18 35 4
item-15 25 31 8
item-16 62 66 24
item-17 13 26 24
item-18 13 11 14
item-19 74 87 7
index value
0 31
1 55
2 85
3 16
4 23
5 25
6 49
7 34
8 92
9 2
10 35
11 76
12 20
13 83
14 69

Levitated Toy Factory at Beyond Tellerand

Krystal Campioni Showing animations from Monster Slayer

CSS is Awesome

Inspired by Stacy Kvernmo [permalink / source]

Stay in touch…