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 => {
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

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

@ -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;
}

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 %}">
{% 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">

3
docs/lib/grid.js
View File

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

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