🏠

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 16 11 17
item-1 58 66 19
item-2 81 20 19
item-3 31 54 21
item-4 48 64 13
item-5 27 14 12
item-6 84 47 15
item-7 64 79 5
item-8 36 30 16
item-9 80 56 20
item-10 79 73 11
item-11 16 94 14
item-12 18 37 12
item-13 70 30 22
item-14 39 21 20
item-15 72 9 10
item-16 2 69 2
item-17 7 31 11
item-18 15 21 8
item-19 88 60 1
index value
0 83
1 8
2 15
3 7
4 53
5 83
6 68
7 95
8 82
9 31
10 50
11 80
12 64
13 63
14 2

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…