🏠

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 92 18 22
item-1 97 79 23
item-2 75 37 24
item-3 31 85 7
item-4 7 42 4
item-5 29 71 12
item-6 73 49 19
item-7 26 31 16
item-8 91 85 7
item-9 54 15 9
item-10 29 5 23
item-11 91 61 18
item-12 74 13 6
item-13 72 41 1
item-14 89 11 24
item-15 9 55 5
item-16 11 86 16
item-17 26 22 2
item-18 50 1 1
item-19 11 47 6
index value
0 61
1 37
2 11
3 71
4 60
5 94
6 0
7 69
8 75
9 60
10 61
11 72
12 23
13 20
14 64

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…