🏠

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 1 64 19
item-1 93 95 3
item-2 40 67 0
item-3 68 18 7
item-4 67 40 10
item-5 30 52 8
item-6 8 53 24
item-7 30 76 10
item-8 81 19 11
item-9 28 38 21
item-10 76 42 5
item-11 76 39 11
item-12 59 64 22
item-13 43 53 21
item-14 46 91 4
item-15 31 22 21
item-16 49 43 10
item-17 52 59 8
item-18 25 35 19
item-19 38 24 16
index value
0 18
1 86
2 95
3 57
4 11
5 7
6 22
7 83
8 58
9 13
10 68
11 9
12 78
13 77
14 3

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…