Add grid interactions

docs/_javascript/playground.js

@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const $grid = document.getElementById("grid");
+  const $columns = document.querySelectorAll(".jsColumns");
+
+  $columns.forEach(($) =>
+    $.addEventListener(
+      "input",
+      (event) => {
+        const count = event.target.valueAsNumber;
+        const suffix = event.target.dataset.suffix;
+        console.log("Column count", count);
+        $grid.className = `grid has-${count}-cols${suffix}`;
+        const $columnsCount = getAll("strong", $.parentNode);
+        $columnsCount.innerHTML = count;
+      },
+      false
+    )
+  );
+
+  function getAll(selector, parent = document) {
+    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
+  }
+});

docs/cyp/grid/grid.html

@@ -0,0 +1,70 @@
+---
+layout: cypress
+title: Grid/Grid
+breakpoints:
+- name: mobile
+  visibility: mobile
+  count: 2
+  suffix: '-mobile'
+- name: tablet
+  visibility: tablet-only
+  count: 4
+  suffix: '-tablet'
+- name: desktop
+  visibility: desktop-only
+  count: 8
+  suffix: '-desktop'
+- name: widescreen
+  visibility: widescreen-only
+  count: 12
+  suffix: '-widescreen'
+- name: fullhd
+  visibility: fullhd
+  count: 16
+  suffix: '-fullhd'
+---
+
+<script src="{{ site.url }}/lib/playground.js"></script>
+
+<section style="padding: 3rem;">
+  {% for breakpoint in page.breakpoints %}
+    <p style="display: none;" class="block is-block-{{ breakpoint.visibility }}">
+      Current breakpoint: <strong>{{ breakpoint.name }}</strong>
+    </p>
+  {% endfor %}
+
+  <div style="display: flex; flex-wrap: wrap;">
+    {% for breakpoint in page.breakpoints %}
+      <div style="margin: 0 1.5em 1.5em 0; position: relative; width: 180px;">
+        <p style="border: 2px solid hsl(153, 53%,  53%); border-radius: 1em; pointer-events: none; display: none; position: absolute; left: -1em; right: -1em; top: -1em; bottom: -1em;" class="has-background-success-light is-block-{{ breakpoint.visibility }}"></p>
+        <div style="position: relative;">
+          <p style="font-size: 0.75em"><strong>{{ breakpoint.count }}</strong> columns on {{ breakpoint.name }}</p>
+          <input id="columns" class="jsColumns" type="range" min="1" max="16" value="{{ breakpoint.count }}" data-suffix="{{ breakpoint.suffix }}">
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+
+  <div id="grid" class="grid">
+    <div class="cell">#1</div>
+    <div class="cell">#2</div>
+    <div class="cell">#3</div>
+    <div class="cell">#4</div>
+    <div class="cell">#5</div>
+    <div class="cell">#6</div>
+    <div class="cell">#7</div>
+    <div class="cell">#8</div>
+    <div class="cell">#9</div>
+    <div class="cell">#10</div>
+    <div class="cell">#11</div>
+    <div class="cell">#12</div>
+    <div class="cell">#13</div>
+    <div class="cell">#14</div>
+    <div class="cell">#15</div>
+    <div class="cell">#16</div>
+    <div class="cell">#17</div>
+    <div class="cell">#18</div>
+    <div class="cell">#19</div>
+    <div class="cell">#20</div>
+  </div>
+</section>

docs/lib/playground.js

@@ -0,0 +1,23 @@
+"use strict";
+
+document.addEventListener("DOMContentLoaded", function () {
+  var $grid = document.getElementById("grid");
+  var $columns = document.querySelectorAll(".jsColumns");
+
+  $columns.forEach(function ($) {
+    return $.addEventListener("input", function (event) {
+      var count = event.target.valueAsNumber;
+      var suffix = event.target.dataset.suffix;
+      console.log("Column count", count);
+      $grid.className = "grid has-" + count + "-cols" + suffix;
+      var $columnsCount = getAll("strong", $.parentNode);
+      $columnsCount.innerHTML = count;
+    }, false);
+  });
+
+  function getAll(selector) {
+    var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
+
+    return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
+  }
+});

sass/grid/_all.sass

@@ -2,4 +2,5 @@
 @charset "utf-8"
 
 @import "columns"
+@import "grid"
 @import "tiles"

sass/grid/grid.sass

@@ -0,0 +1,105 @@
+$max-column-count: 16
+
+.grid
+  --grid-gap: 1.5rem
+  --column-count: 12
+  --grid-gap-count: calc(var(--column-count) - 1)
+  --grid-column-min: calc(calc(100% / var(--column-count)) - calc(var(--grid-gap-count) / var(--column-count) * var(--grid-column-gap, var(--grid-gap))))
+  --cell-column-span: 1
+  --cell-row-span: 1
+  display: grid
+  grid-gap: var(--grid-gap)
+  grid-column-gap: var(--grid-column-gap, var(--grid-gap))
+  grid-row-gap: var(--grid-row-gap, var(--grid-gap))
+  grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min), 1fr))
+  grid-template-rows: auto
+  +mobile
+    --column-count: 2
+  +tablet
+    --column-count: 4
+  +desktop
+    --column-count: 8
+  +widescreen
+    --column-count: 12
+  +fullhd
+    --column-count: 16
+
+=cell-properties($suffix: '')
+  @for $i from 1 through $max-column-count
+    $name: $i + $suffix
+    &.is-col-start-#{$name}
+      --cell-column-start: #{$i}
+    &.is-col-from-end-#{$name}
+      --cell-column-start: #{$i * -1}
+    &.is-col-span-#{$name}
+      --cell-column-span: #{$i}
+    &.is-row-start-#{$name}
+      --cell-row-start: #{$i}
+    &.is-row-from-end-#{$name}
+      --cell-row-start: #{$i * -1}
+    &.is-row-span-#{$name}
+      --cell-row-span: #{$i}
+
+.cell
+  background-color: lavender
+  border-radius: 1em
+  grid-column-end: span var(--cell-column-span)
+  grid-column-start: var(--cell-column-start)
+  grid-row-end: span var(--cell-row-span)
+  grid-row-start: var(--cell-row-start)
+  padding: 0.75em
+  // Sizes
+  &.is-col-start-end
+    --cell-column-start: -1
+  &.is-row-start-end
+    --cell-row-start: -1
+  +cell-properties
+  +mobile
+    +cell-properties('-mobile')
+  +tablet
+    +cell-properties('-tablet')
+  +tablet-only
+    +cell-properties('-tablet-only')
+  +desktop
+    +cell-properties('-desktop')
+  +desktop-only
+    +cell-properties('-desktop-only')
+  +widescreen
+    +cell-properties('-widescreen')
+  +widescreen-only
+    +cell-properties('-widescreen-only')
+  +fullhd
+    +cell-properties('-fullhd')
+
+=grid-properties($suffix: '')
+  .has-1-cols#{$suffix}
+    --column-count: 1
+  @for $i from 2 through $max-column-count
+    .has-#{$i}-cols#{$suffix}
+      --column-count: #{$i}
+
++grid-properties
+
++mobile
+  +grid-properties('-mobile')
+
++tablet
+  +grid-properties('-tablet')
+
++tablet-only
+  +grid-properties('-tablet-only')
+
++desktop
+  +grid-properties('-desktop')
+
++desktop-only
+  +grid-properties('-desktop-only')
+
++widescreen
+  +grid-properties('-widescreen')
+
++widescreen-only
+  +grid-properties('-widescreen-only')
+
++fullhd
+  +grid-properties('-fullhd')