🏠

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 29 24 22
item-1 14 19 20
item-2 35 52 8
item-3 7 55 9
item-4 2 56 18
item-5 8 50 5
item-6 77 18 16
item-7 90 77 18
item-8 7 16 1
item-9 37 86 8
item-10 57 74 17
item-11 2 68 18
item-12 89 59 0
item-13 36 63 21
item-14 91 11 14
item-15 83 26 14
item-16 38 17 4
item-17 0 61 14
item-18 31 88 8
item-19 7 49 16
index value
0 45
1 83
2 88
3 24
4 89
5 22
6 4
7 88
8 5
9 87
10 20
11 33
12 65
13 24
14 29

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…