From fddb98d7321f86acb0bf9aeb1b88bb2bb696c095 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Tue, 13 Feb 2018 09:38:04 +0000 Subject: [PATCH] More grid work --- docs/_javascript/grid.js | 3 ++- docs/css/bulma-docs.css | 41 ++++++++++++++++++++++++++++++++++++---- docs/grid.html | 6 +++--- docs/lib/grid.js | 3 ++- sass/grid/grid.sass | 18 ++++++++++++++---- 5 files changed, 58 insertions(+), 13 deletions(-) diff --git a/docs/_javascript/grid.js b/docs/_javascript/grid.js index 86111cd8..6c0d8554 100644 --- a/docs/_javascript/grid.js +++ b/docs/_javascript/grid.js @@ -5,7 +5,8 @@ document.addEventListener('DOMContentLoaded', () => { $cells.forEach(el => { const parentWidth = el.parentElement.offsetWidth; const percentage = el.offsetWidth / parentWidth * 100; - el.append(`${Math.round(percentage)}`); + el.innerHTML = (`${percentage.toFixed(2)}`); + // el.append(`${Math.round(el.offsetWidth)}`); }); // Functions diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 2aaa9692..f3bcfbfe 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -8670,12 +8670,21 @@ label.panel-block:hover { --columnGap: 2rem; } +.grid-container { + box-shadow: 0 0 0 1px #7a7a7a; + margin: 0 auto; + max-width: 1000px; + padding: 0 !important; +} + .grid { + --gridGap: 0.75rem; + --gridGap: 0; + --gridColumnGap: var(--gridGap); + --gridRowGap: var(--gridGap); display: grid; - grid-column-gap: 0.75rem; - grid-column-gap: 1px; - grid-row-gap: 0.75rem; - grid-row-gap: 1px; + grid-column-gap: var(--gridColumnGap); + grid-row-gap: var(--gridRowGap); } .grid:not(:last-child) { @@ -8709,26 +8718,50 @@ label.panel-block:hover { padding: 1rem; } +.cell.is-1-tall { + grid-row: span 1; +} + .cell.is-1-wide { grid-column: span 1; } +.cell.is-2-tall { + grid-row: span 2; +} + .cell.is-2-wide { grid-column: span 2; } +.cell.is-3-tall { + grid-row: span 3; +} + .cell.is-3-wide { grid-column: span 3; } +.cell.is-4-tall { + grid-row: span 4; +} + .cell.is-4-wide { grid-column: span 4; } +.cell.is-5-tall { + grid-row: span 5; +} + .cell.is-5-wide { grid-column: span 5; } +.cell.is-6-tall { + grid-row: span 6; +} + .cell.is-6-wide { grid-column: span 6; } diff --git a/docs/grid.html b/docs/grid.html index 9d09bcd7..64def31a 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -5,7 +5,7 @@ {% include head.html %} -
+
@@ -27,10 +27,10 @@
Cell
-
+
Cell
-
+
Cell
diff --git a/docs/lib/grid.js b/docs/lib/grid.js index 8df4a0a9..cb3975ef 100644 --- a/docs/lib/grid.js +++ b/docs/lib/grid.js @@ -7,7 +7,8 @@ document.addEventListener('DOMContentLoaded', function () { $cells.forEach(function (el) { var parentWidth = el.parentElement.offsetWidth; var percentage = el.offsetWidth / parentWidth * 100; - el.append('' + Math.round(percentage)); + el.innerHTML = '' + percentage.toFixed(2); + // el.append(`${Math.round(el.offsetWidth)}`); }); // Functions diff --git a/sass/grid/grid.sass b/sass/grid/grid.sass index 46d81e30..7e97cb0f 100644 --- a/sass/grid/grid.sass +++ b/sass/grid/grid.sass @@ -1,10 +1,18 @@ +.grid-container + box-shadow: 0 0 0 1px $grey + margin: 0 auto + max-width: 1000px + padding: 0 !important + .grid + --gridGap: 0.75rem + --gridGap: 0 + --gridColumnGap: var(--gridGap) + --gridRowGap: var(--gridGap) +block display: grid - grid-column-gap: 0.75rem - grid-column-gap: 1px - grid-row-gap: 0.75rem - grid-row-gap: 1px + grid-column-gap: var(--gridColumnGap) + grid-row-gap: var(--gridRowGap) $var: #{"1fr"} @for $i from 1 through 5 &.has-#{$i + 1}-columns @@ -18,6 +26,8 @@ padding: 1rem @for $i from 1 through 6 + &.is-#{$i}-tall + grid-row: span $i &.is-#{$i}-wide grid-column: span $i