🏠

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 57 56 24
item-1 97 18 11
item-2 44 28 12
item-3 58 32 8
item-4 53 93 2
item-5 85 96 3
item-6 9 83 23
item-7 69 27 12
item-8 48 87 22
item-9 74 79 20
item-10 36 84 7
item-11 36 46 5
item-12 72 64 23
item-13 11 29 24
item-14 81 82 1
item-15 58 57 17
item-16 83 84 23
item-17 25 55 1
item-18 57 94 0
item-19 95 3 21
index value
0 19
1 98
2 52
3 63
4 27
5 45
6 29
7 54
8 57
9 81
10 30
11 69
12 7
13 43
14 15

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…