🏠

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 71 63 21
item-1 82 61 14
item-2 5 8 24
item-3 82 97 20
item-4 72 26 9
item-5 14 17 2
item-6 51 99 9
item-7 76 68 2
item-8 64 60 6
item-9 19 91 21
item-10 89 55 23
item-11 87 37 20
item-12 65 87 20
item-13 45 21 24
item-14 32 87 22
item-15 54 1 18
item-16 56 8 2
item-17 98 38 4
item-18 56 22 11
item-19 7 49 22
index value
0 68
1 79
2 32
3 66
4 56
5 91
6 54
7 81
8 79
9 58
10 70
11 55
12 31
13 42
14 37

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…