]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
projects / thirdparty / bulma.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6d9005a)
More grid work grid 2037/head 2184/head
authorJeremy Thomas <bbxdesign@gmail.com>
Tue, 13 Feb 2018 09:38:04 +0000 (09:38 +0000)
committerJeremy Thomas <bbxdesign@gmail.com>
Tue, 13 Feb 2018 09:38:04 +0000 (09:38 +0000)
docs/_javascript/grid.js patch | blob | blame | history
docs/css/bulma-docs.css patch | blob | blame | history
docs/grid.html patch | blob | blame | history
docs/lib/grid.js patch | blob | blame | history
sass/grid/grid.sass patch | blob | blame | history

diff --git a/docs/_javascript/grid.js b/docs/_javascript/grid.js
index 86111cd866d560d3234b2c232a487f3548571f13..6c0d8554666cec414f13d4dbc6c0d2b3c2e866ed 100644 (file)
--- 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 2aaa96924d0b0317b243a67d7b14790234e75a2e..f3bcfbfe198145d4455808be78251c77bbc61c46 100644 (file)
--- 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 9d09bcd7659cab2d9745f85e279f0d65b8d732be..64def31a1842764ad6ebc5ec16fee0b3c9da9548 100644 (file)
--- a/docs/grid.html
+++ b/docs/grid.html
@@ -5,7 +5,7 @@
 <html lang="en" class="has-navbar-fixed-top {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
   {% include head.html %}
   <body>
-<section class="section">
+<section class="section grid-container">
 
 <div class="grid has-4-columns">
   <div class="cell is-4-wide">
@@ -27,10 +27,10 @@
   <div class="cell">
     Cell
   </div>
-  <div class="cell">
+  <div class="cell is-2-wide">
     Cell
   </div>
-  <div class="cell">
+  <div class="cell is-4-tall">
     Cell
   </div>
   <div class="cell">
diff --git a/docs/lib/grid.js b/docs/lib/grid.js
index 8df4a0a95fd14546c5d8b8fee9a1ed0fbaa23228..cb3975ef9cb796b595bd00b2e6ad18531a38da62 100644 (file)
--- 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 46d81e30303c3bcda9f26c821727b2748af603a4..7e97cb0ffa7613945303f2e530209842f16ed779 100644 (file)
--- 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
 
Mirror of https://github.com/jgthms/bulma.git