🏠

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 95 21
item-1 92 10 10
item-2 17 27 0
item-3 21 12 23
item-4 83 76 20
item-5 25 68 13
item-6 40 62 12
item-7 49 72 24
item-8 38 84 24
item-9 94 35 22
item-10 38 50 6
item-11 66 0 21
item-12 32 57 20
item-13 48 40 1
item-14 77 78 15
item-15 17 70 8
item-16 99 46 9
item-17 47 30 17
item-18 73 85 14
item-19 59 0 12
index value
0 30
1 33
2 93
3 78
4 51
5 25
6 89
7 75
8 12
9 35
10 42
11 63
12 66
13 86
14 66

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…