🏠

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 33 2 17
item-1 81 33 17
item-2 28 85 18
item-3 62 26 6
item-4 81 62 10
item-5 32 74 17
item-6 77 93 3
item-7 49 32 14
item-8 17 87 8
item-9 88 2 8
item-10 6 3 14
item-11 94 53 13
item-12 58 34 20
item-13 84 78 19
item-14 17 62 20
item-15 63 41 4
item-16 19 68 9
item-17 79 43 6
item-18 36 92 3
item-19 21 81 23
index value
0 79
1 22
2 11
3 55
4 39
5 99
6 43
7 5
8 49
9 79
10 21
11 90
12 52
13 71
14 34

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…