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/optimize-grid

Browse Source
This commit is contained in:
Deven Caron
2023-02-09 09:07:35 -05:00
parent 1fe30a9837 9079d735bc
commit 5d38685460
13 changed files with 71 additions and 5179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
assets/styles/components/_heading.scss
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);
}
}

15
assets/styles/elements/_document.scss
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.
//

17
assets/styles/main.scss
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
// ==========================================================================
@@ -70,4 +71,4 @@ $app-env: app-env();
// @import "utilities/helpers";
// @import "utilities/states";
// @import "utilities/spacing";
// @import "utilities/print";
// @import "utilities/print";

3
assets/styles/objects/_container.scss
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;
}

10
assets/styles/objects/_grid.scss
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);
}
// ==========================================================================

12
assets/styles/settings/_config.scss
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
// =============================================================================

29
assets/styles/settings/_config.variables.scss Normal file
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)};
}
}