🏠

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 9 43 8
item-1 12 76 13
item-2 50 47 18
item-3 98 77 9
item-4 41 73 1
item-5 11 65 20
item-6 48 81 4
item-7 53 66 20
item-8 30 89 6
item-9 52 97 5
item-10 50 55 9
item-11 25 76 22
item-12 95 13 23
item-13 73 42 21
item-14 9 59 11
item-15 29 94 22
item-16 38 0 18
item-17 94 81 10
item-18 79 14 10
item-19 96 48 21
index value
0 40
1 85
2 52
3 66
4 49
5 37
6 20
7 34
8 73
9 58
10 72
11 28
12 23
13 61
14 57

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…