🏠

Dynamic CSS Layouts & Beyond

Miriam Suzanne | @mirisuzanne | @oddbird

OddBird

Dynamic CSS Layouts & Beyond

Develop Denver — August 15, 2019

OddBird Faces

OddBird Web Consulting

Custom Apps, Design Systems, Refactors – since 2008

OddBird siblings (Jonny, Carl, and Miriam) in 1994

1989: HTML

Markup Language

It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors.

—Sir Tim

CERN first website, with line-mode browser simulation

1996 2000: Cascading Style Sheets

CSS is Awesome (The End)

Declarative Syntax

!=

Static Results

Design for an Unknown Canvas

CSS is Dynamic & Resilient by Design

2011: calc()

Firefox 4 – function

calc( 16px + 20% )

Combine Relative & Fixed Widths!

2014: CSS Variables

Firefox 31 (unless you count currentColor)

--aka: 'custom properties';

-<empty>-browser-prefix

var( --property-name , fallback)

Article on Smashing Magazine

[SusyCSS by @mirisuzanne | presentation]

[SusyCSS Demo by @mirisuzanne | presentation]

Please Don’t Use It

Manipulate hsl() Values

* {
  --h: 330;
  --s: 100%;
  --l: 34%;
  background: hsl(var(--h), var(--s), var(--l));
}

Hue is Radial

* {
  --complement: calc(var(--h) - 180);
  background: hsl(var(--complement), var(--s), var(--l));
}

Lightness is “Clamped

* {
  --threshold: 55;
  --contrast: calc((var(--l) - var(--threshold)) * -100%);
  color: hsl(var(--h), var(--s), var(--contrast));
}

Complement

html {
  --os-mode: 1;

  @media (prefers-color-scheme: dark) {
    --os-mode: -1;
  }

  @media (prefers-color-scheme: light) {
    --os-mode: 1;
  }
}
[data-colors='light'] {
  --html-mode: 1;
}

[data-colors='dark'] {
  --html-mode: -1;
}

[data-colors] {
  --given-mode: var(--user-mode, var(--html-mode, var(--os-mode, 1)));
  --mode: var(--given-mode, 1);
}

2017: CSS Grid

Firefox 52 & Chrome 57 & Safari 10

Grid lines 1-indexed and -1 in reverse (see dev tools) [permalink / source]

Lines & Spans

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.example {
  grid-column: 1 / 4;
  grid-row: 2 / span 2;
}

Named Areas

body {
  grid-template-areas: 'header header'
                       'nav main'
                       'nav footer';
}

h1 { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }

Single Source of Truth

@media (max-width: 50em) {
  body {
    grid-template: 'header'
                   'nav'
                   'main'
                   'footer';
  }
}

Resize window to see media-query in action… [permalink / source]

2018: Intrinsic Web Design

Jen Simmons

  1. Fluid & Fixed
  2. Stages of Squishiness
  3. Truly Two-Dimensional Layouts
  4. Nested Contexts
  5. Expand & Contract Content
  6. Media Queries, As Needed

px/em/% => fixed

fr => fluid

minmax() => fluid until fixed

auto => flow

% => relative to parent width

vw => relative to the viewport

fr => relative to available space

1fr == minmax(auto, 1fr)

use minmax(0, 1fr) to allow shrinking

Client Day Planner

Screenshot of schedule grid

Define the Day

<main style="
  --day-start: 9,
  --day-end: 18
">

Define the Events

<section style="
  --event-start: 13,
  --event-end: 14
">
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009

Dynamic CSS

Styles Generated Dynamically from Content

putting it all together… [permalink / source]

Levitated Toy Factory at Beyond Tellerand

name x value y value size == z value
item-0 79 28 22
item-1 84 14 10
item-2 60 50 3
item-3 25 29 23
item-4 97 20 13
item-5 96 21 13
item-6 3 36 16
item-7 53 32 21
item-8 70 34 15
item-9 89 54 1
item-10 64 17 9
item-11 92 53 15
item-12 49 31 18
item-13 74 46 18
item-14 8 27 24
item-15 64 85 12
item-16 73 36 14
item-17 30 32 12
item-18 44 83 11
item-19 25 35 22
index value
0 38
1 71
2 15
3 4
4 36
5 67
6 8
7 63
8 40
9 31
10 64
11 50
12 11
13 10
14 15

Animated sprites from Monster Slayer by Krystal Campioni [permalink / source]

Rachel Andrew | @rachelandrew

gridbyexample.com

examples, templates, and fallbacks

CSS is Awesome

Inspired by Stacy Kvernmo [permalink / source]

Stay in touch…