slides.oddbird.net/dynamic-css/shiftremote20/

Dynamic CSS: Layouts & Beyond

@ Shift Remote

OddBird Consulting

Custom Apps, Design Systems, Training, & Refactors

It is required that HTML be a common language between all platforms

WWW Project

…This implies no device-specific markup, or anything which requires control over fonts or colors.

WWW Project

1994 (2000)… Cascading Style Sheets

An ordered list (cascade) of style sheets … can be referenced from the same document.

– Håkon Lie

The user/browser specifies initial preferences and hands the remaining influence over to the document [authors].

– Håkon Lie

[Authors] provide hints that the browser may or may not use.

– Håkon Lie

CSS is Dynamic & Responsive

Styling Unknown Content on an Unknown Canvas

Responsive Units

em & % » rem, ch, ex, vw, vh, vmax, vmin

currentColor Variable

Firefox 2006

calc( 16px + 20% )

Combine Relative & Fixed Widths!

Custom Properties

Firefox 2014… Chrome/Safari 2016… Edge 2017

Only One Fallback

var(--my-font, Baskerville, Georgia, serif)

Nested Fallbacks

var(--my-color, var(--other-color, pink))

$my-color: rebeccapurple;
--my-color: rebeccapurple;

Sass Variables Scope Without DOM Awareness

.example { 
$columns: 2;
}
.nested-class {
/* $columns == undefined */
}

Properties Inherit With DOM Awareness!

.example { 
--columns: 2;
}
.nested-class {
/* var(--columns) == 2 */
}

Media-Query Changes

@media (min-width: 30em) {
html {
$columns: 6; /* scope only */
--columns: 6; /* 30em+ in browsers! */
}
}

Keep NSYNC Properties From Variables

$gutter: 1rem;
html { --gutter: #{$gutter}; }
html {
--brand-color: hsl(330, 100%, 45%);
--action: var(--brand-color);
}

a {
color: var(--action);
}

Use :root With Caution

Higher specificity, and some unexpected results…

Reset Inheritance With Explicit Selectors

Declare Locally

.light-theme {
--text: black;
}

.dark-theme {
--text: white;
}

Declare Universally

* {
--grid-area: main;
}

Combine Both

[data-grid] * {
--grid-area: main;
}

Optional args… Leave Undefined

[data-btn] {
background: var(--btn-color, blue);
}

2017… CSS Grid

March 6-9: Firefox 52 & Chrome 57

Item Placement grid-column: <start> / <end>
grid-row: <start> / <end>

grid-template

  'header          header         header' auto
'nav main aside' 1fr
'nav footer aside' auto
/ fit-content(20%) minmax(0, 1fr) 20em

Define the Day

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

Define the Events

<section style="
--event-start: 13,
--event-end: 14
"
>
<div style="--index: {{ loop.index }};">
[style*='--index'] {
animation-delay: calc(var(--index) * 50ms);
}
<div style="--ease: var(--in-out-back);">
[style*='--ease'] {
--in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
List of code dourses, all titled Learn X Language,
except the JavaScript course titled
Intro To JS

Using Vue

<section
class="sprite-demo"
:style="{
'--src': show.sprite.src,
'--columns': show.sprite.columns,
'--rows': show.sprite.rows,
}"
>
...</section>
<div
v-for="action in show.actions"
:key="action.name"
:data-action="action.name"
:style="{
'--row': action.row,
}"

/>