🏠

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 84 34 5
item-1 26 98 19
item-2 61 89 17
item-3 53 22 21
item-4 81 17 22
item-5 77 81 9
item-6 80 80 11
item-7 61 70 23
item-8 98 77 9
item-9 43 82 6
item-10 8 69 0
item-11 40 25 21
item-12 66 47 16
item-13 19 32 3
item-14 71 30 6
item-15 41 6 24
item-16 39 2 3
item-17 4 79 18
item-18 23 43 11
item-19 87 32 18
index value
0 59
1 51
2 22
3 87
4 98
5 43
6 10
7 63
8 99
9 81
10 78
11 95
12 80
13 16
14 24

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…