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

Rename breakpoints by shortnames (#171)

Browse Source 
* Rename breakpoints by shortnames

* Replace `tiny` breakpoint for `xs` in spacing loop

* Add 2xs, 4xl and 5xl breakpoints
This commit is contained in:
Lucas Bigot
2024-03-26 16:50:16 -04:00
committed by GitHub
parent ea8f98a52d
commit 45d8be5525
10 changed files with 45 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,34 +20,26 @@ html {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@media (max-width: $to-small) { @media (max-width: $to-sm) {
font-size: $font-size - 2px; font-size: $font-size - 2px;
} }
@media (min-width: $from-small) and (max-width: $to-medium) { @media (min-width: $from-sm) and (max-width: $to-lg) {
font-size: $font-size - 2px;
}
@media (min-width: $from-medium) and (max-width: $to-large) {
font-size: $font-size - 1px; font-size: $font-size - 1px;
} }
@media (min-width: $from-large) and (max-width: $to-huge) { @media (min-width: $from-lg) and (max-width: $to-2xl) {
font-size: $font-size; // [1] font-size: $font-size;
} }
@media (min-width: $from-huge) and (max-width: $to-gigantic) { @media (min-width: $from-2xl) and (max-width: $to-3xl) {
font-size: $font-size + 1px; font-size: $font-size + 1px;
} }
@media (min-width: $from-gigantic) and (max-width: $to-colossal) { @media (min-width: $from-3xl) {
font-size: $font-size + 2px; font-size: $font-size + 2px;
} }
@media (min-width: $from-colossal) {
font-size: $font-size + 4px;
}
&.is-loading { &.is-loading {
cursor: wait; cursor: wait;
} }

4
assets/styles/objects/_grid.scss
View File

@@ -45,8 +45,8 @@
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
&.-col-#{$base-column-nb}\@from-medium { &.-col-#{$base-column-nb}\@from-md {
@media (min-width: $from-medium) { @media (min-width: $from-md) {
grid-template-columns: repeat(#{$base-column-nb}, 1fr); grid-template-columns: repeat(#{$base-column-nb}, 1fr);
} }
} }

51
assets/styles/settings/_config.breakpoints.scss
View File

@@ -6,15 +6,16 @@
// ========================================================================== // ==========================================================================
$breakpoints: ( $breakpoints: (
"tiny": 500px, "2xs": 340px,
"small": 700px, "xs": 500px,
"medium": 1000px, "sm": 700px,
"large": 1200px, "md": 1000px,
"big": 1400px, "lg": 1200px,
"huge": 1600px, "xl": 1400px,
"enormous": 1800px, "2xl": 1600px,
"gigantic": 2000px, "3xl": 1800px,
"colossal": 2400px "4xl": 2000px,
"5xl": 2400px
); );
// Functions // Functions
@@ -75,21 +76,17 @@ $breakpoints: (
// Legacy // Legacy
// ========================================================================== // ==========================================================================
$from-tiny: map-get($breakpoints, "tiny") !default; $from-xs: map-get($breakpoints, "xs") !default;
$to-tiny: map-get($breakpoints, "tiny") - 1 !default; $to-xs: map-get($breakpoints, "xs") - 1 !default;
$from-small: map-get($breakpoints, "small") !default; $from-sm: map-get($breakpoints, "sm") !default;
$to-small: map-get($breakpoints, "small") - 1 !default; $to-sm: map-get($breakpoints, "sm") - 1 !default;
$from-medium: map-get($breakpoints, "medium") !default; $from-md: map-get($breakpoints, "md") !default;
$to-medium: map-get($breakpoints, "medium") - 1 !default; $to-md: map-get($breakpoints, "md") - 1 !default;
$from-large: map-get($breakpoints, "large") !default; $from-lg: map-get($breakpoints, "lg") !default;
$to-large: map-get($breakpoints, "large") - 1 !default; $to-lg: map-get($breakpoints, "lg") - 1 !default;
$from-big: map-get($breakpoints, "big") !default; $from-xl: map-get($breakpoints, "xl") !default;
$to-big: map-get($breakpoints, "big") - 1 !default; $to-xl: map-get($breakpoints, "xl") - 1 !default;
$from-huge: map-get($breakpoints, "huge") !default; $from-2xl: map-get($breakpoints, "2xl") !default;
$to-huge: map-get($breakpoints, "huge") - 1 !default; $to-2xl: map-get($breakpoints, "2xl") - 1 !default;
$from-enormous: map-get($breakpoints, "enormous") !default; $from-3xl: map-get($breakpoints, "3xl") !default;
$to-enormous: map-get($breakpoints, "enormous") - 1 !default; $to-3xl: map-get($breakpoints, "3xl") - 1 !default;
$from-gigantic: map-get($breakpoints, "gigantic") !default;
$to-gigantic: map-get($breakpoints, "gigantic") - 1 !default;
$from-colossal: map-get($breakpoints, "colossal") !default;
$to-colossal: map-get($breakpoints, "colossal") - 1 !default;

2
assets/styles/settings/_config.variables.scss
View File

@@ -25,7 +25,7 @@
// --color-#{"" + $color}: #{$value}; // --color-#{"" + $color}: #{$value};
// } // }
@media (min-width: $from-small) { @media (min-width: $from-sm) {
--grid-columns: #{$base-column-nb}; --grid-columns: #{$base-column-nb};
--grid-gutter: #{rem(16px)}; --grid-gutter: #{rem(16px)};
--grid-margin: #{rem(20px)}; --grid-margin: #{rem(20px)};

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

@@ -200,7 +200,7 @@ $context: 'frontend' !default;
// } // }
// //
// .c-heading.-h2 { // .c-heading.-h2 {
// font-size: responsive-type(20px, 40px, $from-big); // font-size: responsive-type(20px, 40px, $from-xl);
// } // }
// ``` // ```
// //

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

@@ -51,7 +51,7 @@ $spacing-sizes: join($spacings, (
$base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace}; $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
// Spacing without media query // Spacing without media query
@if $breakpoint == "tiny" { @if $breakpoint == "xs" {
#{$base-class} { #{$base-class} {
@each $direction in $directions { @each $direction in $directions {
#{$property}#{$direction}: $size !important; #{$property}#{$direction}: $size !important;

8
assets/styles/utilities/_states.scss
View File

@@ -46,14 +46,14 @@
} }
} }
// .is-hidden\@to-large { // .is-hidden\@to-lg {
// @media (max-width: $to-large) { // @media (max-width: $to-lg) {
// display: none; // display: none;
// } // }
// } // }
// //
// .is-hidden\@from-large { // .is-hidden\@from-lg {
// @media (min-width: $from-large) { // @media (min-width: $from-lg) {
// display: none; // display: none;
// } // }
// } // }

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

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

4
docs/grid.md
View File

@@ -70,8 +70,8 @@ The first step is to set intial SCSS values in the following files :
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
&.-col-#{$base-column-nb}\@from-medium { &.-col-#{$base-column-nb}\@from-md {
@media (min-width: $from-medium) { @media (min-width: $from-md) {
grid-template-columns: repeat(#{$base-column-nb}, 1fr); grid-template-columns: repeat(#{$base-column-nb}, 1fr);
} }
} }

2
docs/technologies.md
View File

@@ -80,7 +80,7 @@ Learn about [namespacing](https://csswizardry.com/2015/03/more-transparent-ui-co
} }
.c-block_heading { .c-block_heading {
@media (max-width: $to-medium) { @media (max-width: $to-md) {
.c-block.-large & { .c-block.-large & {
margin-bottom: rem(40px); margin-bottom: rem(40px);
} }