🏠

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 21 7 13
item-1 26 24 7
item-2 93 35 15
item-3 98 22 9
item-4 19 22 11
item-5 63 40 18
item-6 90 68 5
item-7 65 72 6
item-8 25 0 7
item-9 15 37 1
item-10 95 2 20
item-11 49 83 10
item-12 51 72 17
item-13 24 10 0
item-14 41 44 17
item-15 51 33 20
item-16 84 68 19
item-17 60 62 23
item-18 42 2 2
item-19 28 8 2
index value
0 84
1 55
2 85
3 61
4 4
5 52
6 12
7 47
8 61
9 43
10 90
11 89
12 62
13 16
14 36

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…