🏠

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 55 62 11
item-1 7 24 24
item-2 19 1 8
item-3 82 58 6
item-4 69 70 13
item-5 9 42 7
item-6 35 57 2
item-7 19 86 4
item-8 45 56 14
item-9 40 62 19
item-10 63 80 24
item-11 89 79 15
item-12 54 3 23
item-13 86 79 20
item-14 65 51 11
item-15 78 30 0
item-16 36 5 2
item-17 55 1 15
item-18 41 96 23
item-19 60 80 12
index value
0 79
1 29
2 0
3 29
4 87
5 38
6 41
7 70
8 16
9 11
10 60
11 27
12 35
13 93
14 62

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…