library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

More grid work

Browse Source
This commit is contained in:
Jeremy Thomas 2018-02-13 09:38:04 +00:00
parent 6d9005ad2a
commit fddb98d732
5 changed files with 58 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_javascript/grid.js
View File

@ -5,7 +5,8 @@ document.addEventListener('DOMContentLoaded', () => {
$cells.forEach(el => { $cells.forEach(el => {
const parentWidth = el.parentElement.offsetWidth; const parentWidth = el.parentElement.offsetWidth;
const percentage = el.offsetWidth / parentWidth * 100; const percentage = el.offsetWidth / parentWidth * 100;
el.append(`${Math.round(percentage)}`); el.innerHTML = (`${percentage.toFixed(2)}`);
// el.append(`${Math.round(el.offsetWidth)}`);
}); });
// Functions // Functions

41
docs/css/bulma-docs.css
View File

@ -8670,12 +8670,21 @@ label.panel-block:hover {
--columnGap: 2rem; --columnGap: 2rem;
} }
.grid-container {
box-shadow: 0 0 0 1px #7a7a7a;
margin: 0 auto;
max-width: 1000px;
padding: 0 !important;
}
.grid { .grid {
--gridGap: 0.75rem;
--gridGap: 0;
--gridColumnGap: var(--gridGap);
--gridRowGap: var(--gridGap);
display: grid; display: grid;
grid-column-gap: 0.75rem; grid-column-gap: var(--gridColumnGap);
grid-column-gap: 1px; grid-row-gap: var(--gridRowGap);
grid-row-gap: 0.75rem;
grid-row-gap: 1px;
} }
.grid:not(:last-child) { .grid:not(:last-child) {
@ -8709,26 +8718,50 @@ label.panel-block:hover {
padding: 1rem; padding: 1rem;
} }
.cell.is-1-tall {
grid-row: span 1;
}
.cell.is-1-wide { .cell.is-1-wide {
grid-column: span 1; grid-column: span 1;
} }
.cell.is-2-tall {
grid-row: span 2;
}
.cell.is-2-wide { .cell.is-2-wide {
grid-column: span 2; grid-column: span 2;
} }
.cell.is-3-tall {
grid-row: span 3;
}
.cell.is-3-wide { .cell.is-3-wide {
grid-column: span 3; grid-column: span 3;
} }
.cell.is-4-tall {
grid-row: span 4;
}
.cell.is-4-wide { .cell.is-4-wide {
grid-column: span 4; grid-column: span 4;
} }
.cell.is-5-tall {
grid-row: span 5;
}
.cell.is-5-wide { .cell.is-5-wide {
grid-column: span 5; grid-column: span 5;
} }
.cell.is-6-tall {
grid-row: span 6;
}
.cell.is-6-wide { .cell.is-6-wide {
grid-column: span 6; grid-column: span 6;
} }

6
docs/grid.html
View File

@ -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 %}"> <html lang="en" class="has-navbar-fixed-top {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
{% include head.html %} {% include head.html %}
<body> <body>
<section class="section"> <section class="section grid-container">
<div class="grid has-4-columns"> <div class="grid has-4-columns">
<div class="cell is-4-wide"> <div class="cell is-4-wide">
@ -27,10 +27,10 @@
<div class="cell"> <div class="cell">
Cell Cell
</div> </div>
<div class="cell"> <div class="cell is-2-wide">
Cell Cell
</div> </div>
<div class="cell"> <div class="cell is-4-tall">
Cell Cell
</div> </div>
<div class="cell"> <div class="cell">

3
docs/lib/grid.js
View File

@ -7,7 +7,8 @@ document.addEventListener('DOMContentLoaded', function () {
$cells.forEach(function (el) { $cells.forEach(function (el) {
var parentWidth = el.parentElement.offsetWidth; var parentWidth = el.parentElement.offsetWidth;
var percentage = el.offsetWidth / parentWidth * 100; var percentage = el.offsetWidth / parentWidth * 100;
el.append('' + Math.round(percentage)); el.innerHTML = '' + percentage.toFixed(2);
// el.append(`${Math.round(el.offsetWidth)}`);
}); });
// Functions // Functions

18
sass/grid/grid.sass
View File

@ -1,10 +1,18 @@
.grid-container
box-shadow: 0 0 0 1px $grey
margin: 0 auto
max-width: 1000px
padding: 0 !important
.grid .grid
--gridGap: 0.75rem
--gridGap: 0
--gridColumnGap: var(--gridGap)
--gridRowGap: var(--gridGap)
+block +block
display: grid display: grid
grid-column-gap: 0.75rem grid-column-gap: var(--gridColumnGap)
grid-column-gap: 1px grid-row-gap: var(--gridRowGap)
grid-row-gap: 0.75rem
grid-row-gap: 1px
$var: #{"1fr"} $var: #{"1fr"}
@for $i from 1 through 5 @for $i from 1 through 5
&.has-#{$i + 1}-columns &.has-#{$i + 1}-columns
@ -18,6 +26,8 @@
padding: 1rem padding: 1rem
@for $i from 1 through 6 @for $i from 1 through 6
&.is-#{$i}-tall
grid-row: span $i
&.is-#{$i}-wide &.is-#{$i}-wide
grid-column: span $i grid-column: span $i