🏠

Dynamic CSS (Semi) LiveCode!

Miriam Suzanne | @mirisuzanne | @oddbird

OddBird

Dynamic CSS (Semi) LiveCode!

Generate NY — 2019-04-25

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

See the Pen SusyCSS by Miram Suzanne (@mirisuzanne) on CodePen.

[SusyCSS by @mirisuzanne | presentation]

See the Pen SusyCSS Demo by Miram Suzanne (@mirisuzanne) on CodePen.

[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-undefined 55 21 22
item-undefined 51 10 12
item-undefined 92 11 15
item-undefined 4 94 6
item-undefined 19 6 8
item-undefined 59 84 1
item-undefined 88 69 18
item-undefined 71 20 11
item-undefined 64 78 14
item-undefined 52 6 19
item-undefined 4 93 15
item-undefined 87 45 13
item-undefined 10 97 16
item-undefined 24 4 14
item-undefined 21 26 15
item-undefined 26 88 5
item-undefined 31 45 14
item-undefined 1 45 5
item-undefined 93 56 6
item-undefined 81 68 1
index value
0 21
1 45
2 66
3 44
4 61
5 39
6 99
7 14
8 97
9 12
10 24
11 5
12 58
13 68
14 30

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…