🏠

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 36 41 14
item-1 9 40 7
item-2 88 24 16
item-3 59 80 0
item-4 16 51 10
item-5 35 30 23
item-6 16 29 14
item-7 31 77 0
item-8 93 98 8
item-9 16 8 6
item-10 22 58 6
item-11 31 70 1
item-12 45 65 10
item-13 75 92 17
item-14 38 50 18
item-15 46 11 24
item-16 59 10 18
item-17 3 1 10
item-18 87 52 3
item-19 38 53 12
index value
0 24
1 72
2 7
3 37
4 95
5 72
6 44
7 78
8 25
9 8
10 22
11 58
12 99
13 14
14 90

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…