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

Dynamic CSS: Layouts & Beyond

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

@ Shift Remote

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,
  }"
/>