ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Add custom grid helper based on CSS custom properties

Browse Source
This commit is contained in:
Lucas Vallenet
2022-04-29 14:09:26 +02:00
committed by Deven Caron
parent 9219a4cc0a
commit b7c49086c9
9 changed files with 120 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets.json
View File

@@ -1,3 +1,3 @@
{
"version": 1665079086854
"version": 1667240111168
}

1
assets/scripts/modules.js
View File

@@ -1,3 +1,4 @@
export {default as Example} from './modules/Example';
export {default as GridHelper} from './modules/GridHelper';
export {default as Load} from './modules/Load';
export {default as Scroll} from './modules/Scroll';

89
assets/scripts/modules/GridHelper.js Normal file
View File

@@ -0,0 +1,89 @@
import { module } from 'modujs';
export default class GridHelper extends module {
static get settings() {
return {
GUTTER: 'var(--grid-gutter, 0)',
MARGIN: 'var(--grid-margin, 0)',
COLOR: 'rgba(255, 0, 0, .1)',
}
}
constructor(m) {
super(m);
}
init() {
this.setColumns()
this.setStyles()
this.bindEvents()
window.addEventListener('resize', this.onResize = () => this.setColumns())
}
setColumns() {
// Clear columns
this.el.innerHTML = ''
// Loop through columns
const columns = Number(window.getComputedStyle(this.el).getPropertyValue('--grid-columns'))
let $col
for (var i = 0; i < columns; i++) {
$col = document.createElement('div')
$col.style.flex = '1 1 0'
$col.style.backgroundColor = GridHelper.settings.COLOR
this.el.appendChild($col)
}
}
setStyles() {
const elStyles = this.el.style
elStyles.zIndex = '10000'
elStyles.position = 'fixed'
elStyles.top = '0'
elStyles.left = '0'
elStyles.display = 'flex'
elStyles.width = '100%'
elStyles.height = '100%'
elStyles.columnGap = GridHelper.settings.GUTTER
elStyles.paddingLeft = `calc(${GridHelper.settings.MARGIN} + ${GridHelper.settings.GUTTER})`
elStyles.paddingRight = `calc(${GridHelper.settings.MARGIN} + ${GridHelper.settings.GUTTER})`
elStyles.pointerEvents = 'none'
elStyles.visibility = 'hidden'
}
bindEvents() {
let ctrlDown = false
let isActive = false
document.addEventListener('keydown', (e) => {
if(e.key == 'Control') {
ctrlDown = true;
} else {
if(ctrlDown && e.key == 'g') {
if(isActive) {
this.el.style.visibility = 'visible'
} else {
this.el.style.visibility = 'hidden'
}
isActive = !isActive
}
}
})
document.addEventListener('keyup', (e) => {
if(e.key == 'Control') {
ctrlDown = false
}
})
}
destroy() {
window.removeEventListener('resize', this.onResize)
}
}

16
assets/styles/elements/_document.scss
View File

@@ -2,6 +2,22 @@
// Elements / Document
// ==========================================================================
:root {
// Grid
--grid-columns : 4;
--grid-gutter : #{rem(10px)};
--grid-gutter-half : calc(0.5 * var(--grid-gutter));
--grid-margin : 0px;
@media (min-width: $from-small) {
--grid-columns : 12;
--grid-gutter : #{rem(16px)};
--grid-margin : #{rem(20px)};
}
}
//
// Simple page-level setup.
//
// 1. Include web fonts

12
www/assets/scripts/app.js
View File

File diff suppressed because one or more lines are too long

8
www/assets/scripts/app.js.map
View File

File diff suppressed because one or more lines are too long

2
www/assets/styles/main.css
View File

File diff suppressed because one or more lines are too long

2
www/assets/styles/main.css.map
View File

File diff suppressed because one or more lines are too long

2
www/index.html
View File

@@ -41,7 +41,7 @@
<body data-module-load>
<!-- <p aria-hidden="true" class="u-screen-reader-text" style="font-family: 'Webfont';">&nbsp;</p> -->
<div data-module-grid-helper></div>
<div data-load-container>
<div class="o-scroll" data-module-scroll="main">