🏠

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 53 95 24
item-1 82 63 4
item-2 97 42 1
item-3 39 48 24
item-4 0 62 6
item-5 57 0 12
item-6 87 60 19
item-7 63 72 0
item-8 26 68 22
item-9 1 66 8
item-10 95 59 13
item-11 86 98 14
item-12 0 49 3
item-13 26 36 11
item-14 60 2 8
item-15 11 65 7
item-16 47 3 22
item-17 74 52 10
item-18 25 36 0
item-19 63 97 21
index value
0 21
1 15
2 55
3 17
4 52
5 20
6 7
7 67
8 0
9 2
10 65
11 48
12 23
13 42
14 37

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…