🏠

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 24 17 23
item-1 82 27 15
item-2 91 91 23
item-3 78 68 2
item-4 94 24 4
item-5 90 83 10
item-6 33 39 12
item-7 75 21 10
item-8 18 51 22
item-9 16 72 15
item-10 23 22 24
item-11 58 36 22
item-12 82 20 1
item-13 19 49 17
item-14 10 48 24
item-15 54 22 12
item-16 94 12 3
item-17 51 25 3
item-18 82 42 21
item-19 37 87 21
index value
0 6
1 80
2 67
3 22
4 20
5 32
6 74
7 91
8 20
9 29
10 77
11 57
12 50
13 10
14 55

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…