mixin card(color, title, text)
  article.card(style="--card-header-color:" + color)
    h2= title
    p= text
      block

header
  h1 CSS Vars Demo
  .controls
    label Columns
      input(type="range" data-prop="--main-columns" min="1" max="3" value="3")
    label Font size
      input(type="range" data-prop="--main-font-size" data-unit="px" min="8" max="16" value="12")

main
  +card("#FF998C", "Themes", "These buttons updates page color, but not card's")
    br
    button.theme(data-prop="--root-background-color" value="#ccc") Light
    button.theme(data-prop="--root-background-color" value="#444") Dark
  +card("#FFEFE5", "Did you know?", "The markup was done using pug, which is a rich template engine for Node.js.")
  +card("#FFE16D", "Columns", "Change columns slider to change cards size ๐Ÿ“")
  +card("#D7FFAA", "Did you know?", "Every valid CSS stylesheet is a valid SCSS file with the same meaning.")
  +card("#9FE0FF", "Font size", "This other slider updates the font size of these cards ๐“")
  +card("#A49EFF", "Did you know?", "ECMAScript is the โ€œproperโ€ name for the language commonly referred to as JavaScript")

footer
  p Copyright © 2018
View Compiled
:root {
  --root-background-color: #ccc;
  --main-columns: 3;
  --main-font-size: 12px;
  --card-header-color: white;
  --card-body-color: white;
  --gutter: 8px;
}

body {
  background-color: var(--root-background-color);
}

header, footer {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) var(--root-background-color);
  min-height: 60px;
  align-items: center;
  color: white;
  text-shadow: 1px 1px rgba(0,0,0,0.5), -1px 1px rgba(0,0,0,0.5), 1px -1px rgba(0,0,0,0.5), -1px -1px rgba(0,0,0,0.5);
}

header {
  padding: var(--gutter) calc(var(--gutter) * 4);
  
  h1 {
    display: inline-block;
  }
}

.controls {
  float: right;
  display: inline-block;
  padding-top: 18px;
  
  label {
    display: block;
  }
}

footer {
  display: flex;
  
  p {
    margin: 0 auto;
  }
}

main {
  columns: var(--main-columns);
  font-size: var(--main-font-size);
  padding: var(--gutter) 0;
}

.card {
  background-color: var(--card-body-color);
  min-height: 120px;
  margin-bottom: var(--gutter);
  
  h2 {
    background-color: var(--card-header-color);
    margin: 0;
  }
  
  h2, p {
    padding: var(--gutter) calc(var(--gutter) * 2);
  }
}
View Compiled
app = () => {
  const eventHandler = event =>
    document.documentElement.style.setProperty(
      event.target.dataset.prop,
      `${event.target.value}${event.target.dataset.unit || ''}`
    );

  document
    .querySelectorAll('input[type="range"]')
    .forEach(input => input.addEventListener('input', eventHandler));

  document
    .querySelectorAll('button.theme')
    .forEach(input => input.addEventListener('click', eventHandler));
};

window.addEventListener('load', app);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.