🏠

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 77 31 2
item-1 47 0 9
item-2 98 65 15
item-3 16 18 21
item-4 73 40 3
item-5 88 70 12
item-6 98 43 22
item-7 64 34 7
item-8 4 10 23
item-9 70 22 12
item-10 29 72 6
item-11 51 18 0
item-12 76 51 8
item-13 10 56 7
item-14 88 27 14
item-15 63 91 15
item-16 17 91 6
item-17 28 21 8
item-18 75 25 10
item-19 59 16 3
index value
0 84
1 61
2 3
3 96
4 29
5 75
6 26
7 80
8 64
9 13
10 46
11 57
12 33
13 38
14 84

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…