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

Grid init

Browse Source
This commit is contained in:
Jeremy Thomas 2018-01-30 14:42:17 +00:00
parent 523d9351a6
commit 6d9005ad2a
8 changed files with 975 additions and 1946 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/_javascript/grid.js Normal file
View File

@ -0,0 +1,16 @@
document.addEventListener('DOMContentLoaded', () => {
const $cells = getAll('.cell');
$cells.forEach(el => {
const parentWidth = el.parentElement.offsetWidth;
const percentage = el.offsetWidth / parentWidth * 100;
el.append(`${Math.round(percentage)}`);
});
// Functions
function getAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
}
});

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

File diff suppressed because it is too large Load Diff

183
docs/grid.html Normal file
View File

@ -0,0 +1,183 @@
---
---
<!DOCTYPE html>
<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">
<div class="grid has-4-columns">
<div class="cell is-4-wide">
Header
</div>
<div class="cell is-1-wide">
Side
</div>
<div class="cell is-3-wide">
Main: Donec orci arcu, consectetur quis justo vel, dapibus laoreet tellus. In non nunc sed risus commodo porta non quis arcu. Praesent ornare ante vel placerat porta. Sed interdum lacus id gravida tempor. Proin rhoncus, sapien in dictum molestie, massa lorem vestibulum elit, a efficitur nibh odio id nisl. Morbi venenatis enim sed quam commodo, vel viverra libero tempus. Etiam aliquet, erat non vulputate pellentesque, sapien lorem auctor nibh, sed tempus orci tortor id ex. Cras gravida quis arcu id sagittis. Proin vitae elit sit amet odio vehicula fringilla ut vitae urna. Sed mollis ornare mauris, quis aliquam elit facilisis id. Donec ante dolor, iaculis a laoreet ac, sollicitudin sed tortor. Donec posuere, arcu sed elementum elementum, nunc tellus ultrices erat, eget malesuada erat orci nec nulla. Cras vehicula arcu interdum, bibendum libero vitae, tincidunt erat. Cras ut lectus quis quam tempor dictum sit amet vel orci.
</div>
<div class="cell is-4-wide">
Footer
</div>
</div>
<h2 class="title">2 columns</h2>
<div class="grid has-2-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
<h2 class="title">3 columns</h2>
<div class="grid has-3-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
<h2 class="title">4 columns</h2>
<div class="grid has-4-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
<h2 class="title">5 columns</h2>
<div class="grid has-5-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
<h2 class="title">6 columns</h2>
<div class="grid has-6-columns">
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
<div class="cell">
Cell
</div>
</div>
</section>
<script src="{{ site.url }}/lib/grid.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
</body>
</html>

17
docs/lib/grid.js Normal file
View File

@ -0,0 +1,17 @@
'use strict';
document.addEventListener('DOMContentLoaded', function () {
var $cells = getAll('.cell');
$cells.forEach(function (el) {
var parentWidth = el.parentElement.offsetWidth;
var percentage = el.offsetWidth / parentWidth * 100;
el.append('' + Math.round(percentage));
});
// Functions
function getAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
}
});

2
docs/lib/main.js
View File

@ -111,7 +111,7 @@ document.addEventListener('DOMContentLoaded', function () {
var $parent = $el.parentNode; var $parent = $el.parentNode;
if ($parent && $parent.classList.contains('bd-is-more')) { if ($parent && $parent.classList.contains('bd-is-more')) {
var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>'; var showEl = '<button class="bd-show"><div><span class="icon"><i class="fas fa-code"></i></span> <strong>Show code</strong></div></button>';
$el.insertAdjacentHTML('beforeend', showEl); $el.insertAdjacentHTML('beforeend', showEl);
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) { } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl); $el.insertAdjacentHTML('beforeend', expandEl);

4
docs/lib/navbar.js
View File

@ -14,12 +14,12 @@ document.addEventListener('DOMContentLoaded', function () {
if (fixedBottom) { if (fixedBottom) {
fixBottomEl.className = 'button is-success'; fixBottomEl.className = 'button is-success';
fixBottomElIcon.className = 'fa fa-check-square-o'; fixBottomElIcon.className = 'far fa-check-square';
rootEl.classList.add('has-navbar-fixed-bottom'); rootEl.classList.add('has-navbar-fixed-bottom');
navbarBottomEl.classList.remove('is-hidden'); navbarBottomEl.classList.remove('is-hidden');
} else { } else {
fixBottomEl.className = 'button is-link'; fixBottomEl.className = 'button is-link';
fixBottomElIcon.className = 'fa fa-square-o'; fixBottomElIcon.className = 'far fa-square';
rootEl.classList.remove('has-navbar-fixed-bottom'); rootEl.classList.remove('has-navbar-fixed-bottom');
navbarBottomEl.classList.add('is-hidden'); navbarBottomEl.classList.add('is-hidden');
} }

1
sass/grid/_all.sass
View File

@ -1,4 +1,5 @@
@charset "utf-8" @charset "utf-8"
@import "columns.sass" @import "columns.sass"
@import "grid.sass"
@import "tiles.sass" @import "tiles.sass"

39
sass/grid/grid.sass Normal file
View File

@ -0,0 +1,39 @@
.grid
+block
display: grid
grid-column-gap: 0.75rem
grid-column-gap: 1px
grid-row-gap: 0.75rem
grid-row-gap: 1px
$var: #{"1fr"}
@for $i from 1 through 5
&.has-#{$i + 1}-columns
grid-template-columns: #{append($var, 1fr)}
$var: append($var, #{"1fr"})
.cell
background-color: $primary
border-radius: $radius-large
color: $link-invert
padding: 1rem
@for $i from 1 through 6
&.is-#{$i}-wide
grid-column: span $i
// Colors
&:nth-child(7n-6)
background-color: $purple
&:nth-child(7n-5)
background-color: $link
&:nth-child(7n-4)
background-color: $info
&:nth-child(7n-3)
background-color: $primary
&:nth-child(7n-2)
background-color: $success
&:nth-child(7n-1)
background-color: $warning
color: $warning-invert
&:nth-child(7n)
background-color: $danger