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

  h1 CSS Vars Demo
    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")

  +card("#FF998C", "Themes", "These buttons updates page color, but not card's")
    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")

  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 =>
      `${event.target.value}${event.target.dataset.unit || ''}`

    .forEach(input => input.addEventListener('input', eventHandler));

    .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.