🏠

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 64 66 17
item-1 7 76 2
item-2 59 61 16
item-3 95 72 1
item-4 32 97 8
item-5 82 15 24
item-6 93 88 14
item-7 17 0 23
item-8 32 54 23
item-9 8 84 3
item-10 5 31 2
item-11 74 37 8
item-12 46 85 3
item-13 76 3 15
item-14 40 51 6
item-15 31 13 24
item-16 67 37 23
item-17 83 91 15
item-18 74 16 13
item-19 49 91 10
index value
0 35
1 29
2 86
3 28
4 64
5 7
6 86
7 27
8 87
9 67
10 34
11 4
12 98
13 99
14 4

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…