🏠

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 66 9 24
item-1 9 84 3
item-2 11 41 13
item-3 78 65 21
item-4 55 70 21
item-5 61 65 6
item-6 7 67 20
item-7 57 7 5
item-8 34 96 7
item-9 96 1 14
item-10 13 64 2
item-11 92 21 15
item-12 1 12 4
item-13 83 51 18
item-14 66 65 19
item-15 81 43 13
item-16 2 70 20
item-17 23 2 7
item-18 54 31 17
item-19 88 71 3
index value
0 20
1 19
2 84
3 88
4 13
5 42
6 17
7 50
8 95
9 86
10 83
11 82
12 95
13 34
14 98

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…