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

Merge branch 'master' into feature/css-reset

Browse Source
This commit is contained in:
Lucas Bigot
2024-03-26 15:02:21 -04:00
parent 0af2be4599 afb3a4aa6a
commit 65a265c0ea
20 changed files with 542 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
assets/scripts/app.js
View File

@@ -1,25 +1,66 @@
import modular from 'modujs';
import * as modules from './modules';
import globals from './globals';
import { debounce } from './utils/tickers'
import { debounce } from './utils/tickers';
import { $html } from './utils/dom';
import { ENV, FONT, CUSTOM_EVENT, CSS_CLASS } from './config'
import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';
const app = new modular({
modules: modules,
modules,
});
window.addEventListener('load', (event) => {
const setViewportSizes = () => {
// Document styles
const documentStyles = document.documentElement.style;
// Viewport width
const vw = document.body.clientWidth * 0.01;
documentStyles.setProperty('--vw', `${vw}px`);
// Return if browser supports vh, svh, dvh, & lvh
if (ENV.SUPPORTS_VH) {
return
}
// Viewport height
const height = window.innerHeight;
const svh = document.documentElement.clientHeight * 0.01;
documentStyles.setProperty('--svh', `${svh}px`);
const dvh = height * 0.01;
documentStyles.setProperty('--dvh', `${dvh}px`);
if (document.body) {
const fixed = document.createElement('div');
fixed.style.width = '1px';
fixed.style.height = '100vh';
fixed.style.position = 'fixed';
fixed.style.left = '0';
fixed.style.top = '0';
fixed.style.bottom = '0';
fixed.style.visibility = 'hidden';
document.body.appendChild(fixed);
var fixedHeight = fixed.clientHeight;
fixed.remove();
const lvh = fixedHeight * 0.01;
documentStyles.setProperty('--lvh', `${lvh}px`);
}
}
window.addEventListener('load', () => {
const $style = document.getElementById('main-css');
if ($style) {
if ($style.isLoaded) {
init();
} else {
$style.addEventListener('load', (event) => {
init();
});
$style.addEventListener('load', init);
}
} else {
console.warn('The "main-css" stylesheet not found');
@@ -28,6 +69,7 @@ window.addEventListener('load', (event) => {
function init() {
globals();
setViewportSizes();
app.init(app);
@@ -36,14 +78,18 @@ function init() {
$html.classList.remove(CSS_CLASS.LOADING);
// Bind window resize event with default vars
const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END);
window.addEventListener('resize', () => {
$html.style.setProperty('--vw', `${document.documentElement.clientWidth * 0.01}px`)
setViewportSizes();
debounce(() => {
window.dispatchEvent(resizeEndEvent)
window.dispatchEvent(resizeEndEvent);
}, 200, false)
})
window.addEventListener('orientationchange', () => {
setViewportSizes();
})
/**
* Eagerly load the following fonts.
*/
@@ -53,12 +99,12 @@ function init() {
if (ENV.IS_DEV) {
console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
console.group('State of eager fonts:')
eagerFonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
console.groupEnd()
console.group('State of all fonts:')
document.fonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
console.groupEnd()
console.group('State of eager fonts:');
eagerFonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
console.groupEnd();
console.group('State of all fonts:');
document.fonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
console.groupEnd();
}
});
}

9
assets/scripts/config.js
View File

@@ -21,6 +21,15 @@ const ENV = Object.freeze({
// Device
IS_MOBILE,
IS_DESKTOP: !IS_MOBILE,
// Supports
SUPPORTS_VH: (
'CSS' in window
&& 'supports' in window.CSS
&& window.CSS.supports('height: 100svh')
&& window.CSS.supports('height: 100dvh')
&& window.CSS.supports('height: 100lvh')
)
})
// Main CSS classes used within the project

9
assets/styles/main.scss
View File

@@ -1,9 +1,12 @@
// ==========================================================================
// Main
// ==========================================================================
// Modules
// ==========================================================================
@use "sass:math";
// ==========================================================================
// Tools
// ==========================================================================
@@ -17,14 +20,14 @@
// Settings
// ==========================================================================
@import "settings/config";
@import "settings/config.breakpoints";
@import "settings/config.colors";
@import "settings/config.eases";
@import "settings/config.fonts";
@import "settings/config.spacers";
@import "settings/config.spacings";
@import "settings/config.timings";
@import "settings/config.zindexes";
@import "settings/config";
@import "settings/config.variables";
// Vendors

2
assets/styles/objects/_icons.scss
View File

@@ -48,7 +48,7 @@
// // Logo
// .svg-logo {
// --icon-width: #{rem(100px)};
// --icon-ratio: 20/30; // width/height based on svg viewBox
// --icon-ratio: math.div(20, 30); // width/height based on svg viewBox
// // Sizes
// .o-icon.-big & {

7
assets/styles/settings/_config.scss
View File

@@ -32,12 +32,13 @@ $easing: ease("power2.out");
// Spacing Units
// =============================================================================
$unit: 60px;
$unit-small: 20px;
$unit: 60px;
$unit-small: 20px;
$vw-viewport: 1440;
// Container
// ==========================================================================
$padding: $unit;
$padding: $unit;
// Grid
// ==========================================================================

40
assets/styles/settings/_config.spacers.scss
View File

@@ -1,40 +0,0 @@
// ==========================================================================
// Settings / Config / Spacers
// ==========================================================================
// Spacers
// ==========================================================================
$spacers: (
'gutter': var(--grid-gutter),
'xs': #{vh(5)},
'sm': #{vh(7.5)},
'md': #{vh(10)},
'lg': #{vh(12.5)},
'xl': #{vh(15)},
);
// Function
// ==========================================================================
// Returns spacer.
//
// ```scss
// .c-box {
// margin-top: spacer(gutter);
// }
// ```
//
// @param {string} $key - The spacer key in $spacers.
// @param {number} $multiplier - The multiplier of the spacer value.
// @return {size}
@function spacer($spacer: $spacer-default, $multiplier: 1) {
@if not map-has-key($spacers, $spacer) {
@error "Unknown master spacer: #{$spacer}";
}
$index: map-get($spacers, $spacer);
@return calc(#{$index} * #{$multiplier});
}

69
assets/styles/settings/_config.spacings.scss Normal file
View File

@@ -0,0 +1,69 @@
// ==========================================================================
// Settings / Config / Spacings
// ==========================================================================
:root {
--spacing-2xs-mobile: 6;
--spacing-2xs-desktop: 10;
--spacing-xs-mobile: 12;
--spacing-xs-desktop: 16;
--spacing-sm-mobile: 22;
--spacing-sm-desktop: 32;
--spacing-md-mobile: 32;
--spacing-md-desktop: 56;
--spacing-lg-mobile: 48;
--spacing-lg-desktop: 96;
--spacing-xl-mobile: 64;
--spacing-xl-desktop: 128;
--spacing-2xl-mobile: 88;
--spacing-2xl-desktop: 176;
--spacing-3xl-mobile: 122;
--spacing-3xl-desktop: 224;
}
// Spacings
// ==========================================================================
$spacings: (
'gutter': var(--grid-gutter),
'2xs': #{size-clamp('2xs')},
'xs': #{size-clamp('xs')},
'sm': #{size-clamp('sm')},
'md': #{size-clamp('md')},
'lg': #{size-clamp('lg')},
'xl': #{size-clamp('xl')},
'2xl': #{size-clamp('2xl')},
'3xl': #{size-clamp('3xl')},
);
// Function
// ==========================================================================
// Returns spacing.
//
// ```scss
// .c-box {
// margin-top: spacing(gutter);
// }
// ```
//
// @param {string} $key - The spacing key in $spacings.
// @param {number} $multiplier - The multiplier of the spacing value.
// @return {size}
@function spacing($spacing: 'sm', $multiplier: 1) {
@if not map-has-key($spacings, $spacing) {
@error "Unknown master spacing: #{$spacing}";
}
$index: map-get($spacings, $spacing);
@return calc(#{$index} * #{$multiplier});
}

92
assets/styles/tools/_functions.scss
View File

@@ -48,17 +48,6 @@
@return math.div($size, $base) * 1rem;
}
// Converts a number to a percentage.
//
// @alias percentage()
// @link http://sassdoc.com/annotations/#alias
// @param {Number} $number - The value to convert.
// @return {Number} A percentage.
@function span($number) {
@return percentage($number);
}
// Checks if a list contains a value(s).
//
// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/validators/_contains.scss
@@ -120,30 +109,58 @@ $context: 'frontend' !default;
//
// ```scss
// .c-box {
// width: grid-space(6/12);
// margin-left: grid-space(1/12, 1);
// }
// ```
//
// @param {number} $number - The percentage spacer
// @param {number} $inset - The grid gutter inset
// @return {function<number>}
@function grid-space($percentage, $inset: 0) {
@return calc(#{$percentage} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$percentage}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
}
// Returns calculation of a percentage of the viewport height.
//
// ```scss
// .c-box {
// height: vh(100);
// width: grid-space(math.div(6, 12));
// margin-left: grid-space(math.div(1, 12), 1);
// }
// ```
//
// @param {number} $number - The percentage number
// @return {function<number>} in vh
@function vh($number) {
@return calc(#{$number} * var(--vh, 1vh));
// @param {number} $inset - The grid gutter inset
// @return {function<number>}
@function grid-space($number, $inset: 0) {
@return calc(#{$number} * (100vw - 2 * var(--grid-margin, 0px)) - (1 - #{$number}) * var(--grid-gutter, 0px) + #{$inset} * var(--grid-gutter, 0px));
}
// Returns calculation of a percentage of the viewport small height.
//
// ```scss
// .c-box {
// height: svh(100);
// }
// ```
//
// @param {number} $number - The percentage number
// @return {function<number>} in svh
@function svh($number) {
@return calc(#{$number} * var(--svh, 1svh));
}
// Returns calculation of a percentage of the viewport large height.
//
// ```scss
// .c-box {
// height: lvh(100);
// }
// ```
//
// @param {number} $number - The percentage number
// @return {function<number>} in lvh
@function lvh($number) {
@return calc(#{$number} * var(--lvh, 1lvh));
}
// Returns calculation of a percentage of the viewport dynamic height.
//
// ```scss
// .c-box {
// height: dvh(100);
// }
// ```
//
// @param {number} $number - The percentage number
// @return {function<number>} in dvh
@function dvh($number) {
@return calc(#{$number} * var(--dvh, 1dvh));
}
// Returns calculation of a percentage of the viewport width.
@@ -161,6 +178,19 @@ $context: 'frontend' !default;
@return calc(#{$number} * var(--vw, 1vw));
}
@function clamp-with-max($min, $size, $max) {
$vw-context: $vw-viewport * 0.01;
@return clamp(#{$min}, calc(#{$size} / #{$vw-context} * 1vw), #{$max});
}
@function size-clamp($size) {
@return clamp-with-max(
calc(#{rem(1px)} * var(--spacing-#{$size}-mobile)),
var(--spacing-#{$size}-desktop),
calc(#{rem(1px)} * var(--spacing-#{$size}-desktop))
);
}
// Returns clamp of calculated preferred responsive font size
// within a font size and breakpoint range.
//

15
assets/styles/utilities/_spacing.scss
View File

@@ -8,12 +8,11 @@
///
/// @example
/// .u-margin-top {}
/// .u-padding-left-large {}
/// .u-margin-right-small {}
/// .u-margin-top-xs {}
/// .u-padding-left-lg {}
/// .u-margin-right-sm {}
/// .u-padding {}
/// .u-padding-right-none {}
/// .u-padding-horizontal {}
/// .u-padding-vertical-small {}
///
/// @link https://github.com/inuitcss/inuitcss/blob/512977a/utilities/_utilities.spacing.scss
////
@@ -35,7 +34,7 @@ $spacing-properties: (
'margin': 'margin',
) !default;
$spacing-sizes: join($spacers, (
$spacing-sizes: join($spacings, (
null: var(--grid-gutter),
'none': 0
));
@@ -51,7 +50,7 @@ $spacing-sizes: join($spacers, (
// Base class
$base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
// Spacer without media query
// Spacing without media query
@if $breakpoint == "tiny" {
#{$base-class} {
@each $direction in $directions {
@@ -60,7 +59,7 @@ $spacing-sizes: join($spacers, (
}
}
// Spacer min-width breakpoints `@from-*`
// Spacing min-width breakpoints `@from-*`
#{$base-class}\@from-#{$breakpoint} {
@media #{mq-min($breakpoint)} {
@each $direction in $directions {
@@ -69,7 +68,7 @@ $spacing-sizes: join($spacers, (
}
}
// Spacer max-width breakpoints @to-*`
// Spacing max-width breakpoints @to-*`
#{$base-class}\@to-#{$breakpoint} {
@media #{mq-max($breakpoint)} {
@each $direction in $directions {

2
assets/styles/utilities/_widths.scss
View File

@@ -23,6 +23,6 @@ $widths-fractions: 1 2 3 4 5 !default;
.u-1\/2\@from-small {
@media (min-width: $from-small) {
width: span(1/2);
width: 50%;
}
}

0
assets/images/sprite/.gitkeep → assets/svgs/.gitkeep
View File