🏠

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 71 78 19
item-1 75 20 20
item-2 13 90 1
item-3 39 66 11
item-4 66 12 3
item-5 39 17 9
item-6 81 59 12
item-7 88 73 1
item-8 71 14 9
item-9 44 2 19
item-10 57 32 19
item-11 1 19 21
item-12 83 30 16
item-13 62 3 23
item-14 45 45 12
item-15 12 78 14
item-16 84 33 5
item-17 19 12 11
item-18 87 22 9
item-19 94 28 18
index value
0 57
1 0
2 41
3 19
4 64
5 79
6 53
7 0
8 80
9 36
10 88
11 17
12 71
13 60
14 49

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…