mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Grid init
This commit is contained in:
Jeremy Thomas
parent
523d9351a6
commit
6d9005ad2a
16
docs/_javascript/grid.js
Normal file
16
docs/_javascript/grid.js
Normal 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);
|
||||
}
|
||||
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
183
docs/grid.html
Normal file
183
docs/grid.html
Normal 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
17
docs/lib/grid.js
Normal 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);
|
||||
}
|
||||
});
|
||||
@ -111,7 +111,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
var $parent = $el.parentNode;
|
||||
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);
|
||||
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
|
||||
$el.insertAdjacentHTML('beforeend', expandEl);
|
||||
|
||||
@ -14,12 +14,12 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
if (fixedBottom) {
|
||||
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');
|
||||
navbarBottomEl.classList.remove('is-hidden');
|
||||
} else {
|
||||
fixBottomEl.className = 'button is-link';
|
||||
fixBottomElIcon.className = 'fa fa-square-o';
|
||||
fixBottomElIcon.className = 'far fa-square';
|
||||
rootEl.classList.remove('has-navbar-fixed-bottom');
|
||||
navbarBottomEl.classList.add('is-hidden');
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@charset "utf-8"
|
||||
|
||||
@import "columns.sass"
|
||||
@import "grid.sass"
|
||||
@import "tiles.sass"
|
||||
|
||||
39
sass/grid/grid.sass
Normal file
39
sass/grid/grid.sass
Normal 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
|
||||
Loading…
Reference in New Issue
Block a user