🏠

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 15 99 11
item-1 86 42 0
item-2 21 81 18
item-3 19 16 15
item-4 73 30 21
item-5 98 21 17
item-6 50 84 6
item-7 56 45 4
item-8 80 3 22
item-9 79 74 19
item-10 1 69 2
item-11 17 7 16
item-12 47 60 8
item-13 98 63 19
item-14 62 93 15
item-15 19 13 16
item-16 91 36 0
item-17 14 59 0
item-18 56 15 15
item-19 14 39 11
index value
0 12
1 54
2 38
3 19
4 57
5 94
6 21
7 9
8 79
9 43
10 53
11 92
12 13
13 53
14 48

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…