1
0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00

Merge branch 'master' into feature/optimize-grid

This commit is contained in:
Deven Caron
2023-02-09 09:07:35 -05:00
13 changed files with 71 additions and 5179 deletions

View File

@@ -1,3 +1,3 @@
{
"version": 1673639671975
"version": 1675951563987
}

View File

@@ -3,30 +3,29 @@
// ==========================================================================
.c-heading {
line-height: $line-height-h;
margin-bottom: rem(30px);
&.-h1 {
font-size: rem($font-size-h1);
font-size: var(--font-size-h1);
}
&.-h2 {
font-size: rem($font-size-h2);
font-size: var(--font-size-h2);
}
&.-h3 {
font-size: rem($font-size-h3);
font-size: var(--font-size-h3);
}
&.-h4 {
font-size: rem($font-size-h4);
font-size: var(--font-size-h4);
}
&.-h5 {
font-size: rem($font-size-h5);
font-size: var(--font-size-h5);
}
&.-h6 {
font-size: rem($font-size-h6);
font-size: var(--font-size-h6);
}
}

View File

@@ -2,21 +2,6 @@
// 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.
//

View File

@@ -3,13 +3,6 @@
// ==========================================================================
$app-env: app-env();
// Settings
// ==========================================================================
@import "settings/config.eases";
@import "settings/config.colors";
@import "settings/config";
// ==========================================================================
// Tools
// ==========================================================================
@@ -22,6 +15,14 @@ $app-env: app-env();
// @import "tools/widths";
// @import "tools/family";
// Settings
// ==========================================================================
@import "settings/config.eases";
@import "settings/config.colors";
@import "settings/config";
@import "settings/config.variables";
// Generic
// ==========================================================================

View File

@@ -11,8 +11,7 @@
// @link http://stackoverflow.com/a/13202141/140357
.o-container {
width: var(--container-width);
margin-right: auto;
margin-left: auto;
padding-right: $base-column-gap;
padding-left: $base-column-gap;
}

View File

@@ -31,6 +31,12 @@
// ==========================================================================
// Cols
// ==========================================================================
// Responsive grid columns based on `--grid-columns`
&.-cols {
grid-template-columns: repeat(var(--grid-columns), 1fr);
}
&.-col-#{$base-column-nb} {
grid-template-columns: repeat(#{$base-column-nb}, 1fr);
}
@@ -51,8 +57,8 @@
// Gutters rows and columns
&.-gutters {
gap: $base-column-gap;
column-gap: $base-column-gap;
gap: var(--grid-gutter);
column-gap: var(--grid-gutter);
}
// ==========================================================================

View File

@@ -47,19 +47,10 @@ $font-faces: (
// =============================================================================
// Base
$font-size: 16px;
$font-size: 16px;
$line-height: 24px / $font-size;
$font-color: $color-darkest;
// Headings
$font-size-h1: 36px !default;
$font-size-h2: 28px !default;
$font-size-h3: 24px !default;
$font-size-h4: 20px !default;
$font-size-h5: 18px !default;
$font-size-h6: 16px !default;
$line-height-h: $line-height;
// Weights
$font-weight-light: 300;
$font-weight-normal: 400;
@@ -84,7 +75,6 @@ $padding: $unit;
// Grid
// ==========================================================================
$base-column-nb: 12;
$base-column-gap: $unit-small;
// Breakpoints
// =============================================================================

View File

@@ -0,0 +1,29 @@
// ==========================================================================
// Settings / Config / CSS VARS
// ==========================================================================
:root {
// Grid
--grid-columns: 4;
--grid-gutter: #{rem(10px)};
--grid-gutter-half: calc(0.5 * var(--grid-gutter));
--grid-margin: #{rem(10px)};
// Container
--container-width: calc(100% - 2 * var(--grid-margin));
// Font sizes
--font-size-h1: #{rem(36px)};
--font-size-h2: #{rem(28px)};
--font-size-h3: #{rem(24px)};
--font-size-h4: #{rem(20px)};
--font-size-h5: #{rem(18px)};
--font-size-h6: #{rem(16px)};
@media (min-width: $from-small) {
--grid-columns: #{$base-column-nb};
--grid-gutter: #{rem(16px)};
--grid-margin: #{rem(20px)};
}
}

12
package-lock.json generated
View File

@@ -2921,9 +2921,9 @@
}
},
"node_modules/http-cache-semantics": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
"integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
"integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
"dev": true
},
"node_modules/http-errors": {
@@ -9323,9 +9323,9 @@
}
},
"http-cache-semantics": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
"integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==",
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
"integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
"dev": true
},
"http-errors": {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long