🏠

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 84 74 12
item-1 47 40 19
item-2 98 8 19
item-3 20 98 10
item-4 28 7 20
item-5 12 24 9
item-6 23 1 15
item-7 37 24 16
item-8 42 20 18
item-9 23 33 2
item-10 98 87 8
item-11 83 70 22
item-12 12 39 4
item-13 3 50 12
item-14 69 34 6
item-15 6 18 9
item-16 27 63 12
item-17 90 91 6
item-18 83 79 22
item-19 82 16 16
index value
0 79
1 32
2 52
3 3
4 10
5 4
6 37
7 90
8 0
9 25
10 50
11 94
12 24
13 23
14 82

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…