diff --git a/assets/styles/elements/_document.scss b/assets/styles/elements/_document.scss index d95162d..eaff5ea 100644 --- a/assets/styles/elements/_document.scss +++ b/assets/styles/elements/_document.scss @@ -20,34 +20,26 @@ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - @media (max-width: $to-small) { + @media (max-width: $to-sm) { font-size: $font-size - 2px; } - @media (min-width: $from-small) and (max-width: $to-medium) { - font-size: $font-size - 2px; - } - - @media (min-width: $from-medium) and (max-width: $to-large) { + @media (min-width: $from-sm) and (max-width: $to-lg) { font-size: $font-size - 1px; } - @media (min-width: $from-large) and (max-width: $to-huge) { - font-size: $font-size; // [1] + @media (min-width: $from-lg) and (max-width: $to-2xl) { + 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; } - @media (min-width: $from-gigantic) and (max-width: $to-colossal) { + @media (min-width: $from-3xl) { font-size: $font-size + 2px; } - @media (min-width: $from-colossal) { - font-size: $font-size + 4px; - } - &.is-loading { cursor: wait; } diff --git a/assets/styles/objects/_grid.scss b/assets/styles/objects/_grid.scss index a233f8d..7c13490 100644 --- a/assets/styles/objects/_grid.scss +++ b/assets/styles/objects/_grid.scss @@ -45,8 +45,8 @@ grid-template-columns: repeat(4, 1fr); } - &.-col-#{$base-column-nb}\@from-medium { - @media (min-width: $from-medium) { + &.-col-#{$base-column-nb}\@from-md { + @media (min-width: $from-md) { grid-template-columns: repeat(#{$base-column-nb}, 1fr); } } diff --git a/assets/styles/settings/_config.breakpoints.scss b/assets/styles/settings/_config.breakpoints.scss index 0e6f2bf..d5b4448 100644 --- a/assets/styles/settings/_config.breakpoints.scss +++ b/assets/styles/settings/_config.breakpoints.scss @@ -6,15 +6,16 @@ // ========================================================================== $breakpoints: ( - "tiny": 500px, - "small": 700px, - "medium": 1000px, - "large": 1200px, - "big": 1400px, - "huge": 1600px, - "enormous": 1800px, - "gigantic": 2000px, - "colossal": 2400px + "2xs": 340px, + "xs": 500px, + "sm": 700px, + "md": 1000px, + "lg": 1200px, + "xl": 1400px, + "2xl": 1600px, + "3xl": 1800px, + "4xl": 2000px, + "5xl": 2400px ); // Functions @@ -75,21 +76,17 @@ $breakpoints: ( // Legacy // ========================================================================== -$from-tiny: map-get($breakpoints, "tiny") !default; -$to-tiny: map-get($breakpoints, "tiny") - 1 !default; -$from-small: map-get($breakpoints, "small") !default; -$to-small: map-get($breakpoints, "small") - 1 !default; -$from-medium: map-get($breakpoints, "medium") !default; -$to-medium: map-get($breakpoints, "medium") - 1 !default; -$from-large: map-get($breakpoints, "large") !default; -$to-large: map-get($breakpoints, "large") - 1 !default; -$from-big: map-get($breakpoints, "big") !default; -$to-big: map-get($breakpoints, "big") - 1 !default; -$from-huge: map-get($breakpoints, "huge") !default; -$to-huge: map-get($breakpoints, "huge") - 1 !default; -$from-enormous: map-get($breakpoints, "enormous") !default; -$to-enormous: map-get($breakpoints, "enormous") - 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; +$from-xs: map-get($breakpoints, "xs") !default; +$to-xs: map-get($breakpoints, "xs") - 1 !default; +$from-sm: map-get($breakpoints, "sm") !default; +$to-sm: map-get($breakpoints, "sm") - 1 !default; +$from-md: map-get($breakpoints, "md") !default; +$to-md: map-get($breakpoints, "md") - 1 !default; +$from-lg: map-get($breakpoints, "lg") !default; +$to-lg: map-get($breakpoints, "lg") - 1 !default; +$from-xl: map-get($breakpoints, "xl") !default; +$to-xl: map-get($breakpoints, "xl") - 1 !default; +$from-2xl: map-get($breakpoints, "2xl") !default; +$to-2xl: map-get($breakpoints, "2xl") - 1 !default; +$from-3xl: map-get($breakpoints, "3xl") !default; +$to-3xl: map-get($breakpoints, "3xl") - 1 !default; diff --git a/assets/styles/settings/_config.variables.scss b/assets/styles/settings/_config.variables.scss index 000e038..ef4d153 100644 --- a/assets/styles/settings/_config.variables.scss +++ b/assets/styles/settings/_config.variables.scss @@ -25,7 +25,7 @@ // --color-#{"" + $color}: #{$value}; // } - @media (min-width: $from-small) { + @media (min-width: $from-sm) { --grid-columns: #{$base-column-nb}; --grid-gutter: #{rem(16px)}; --grid-margin: #{rem(20px)}; diff --git a/assets/styles/tools/_functions.scss b/assets/styles/tools/_functions.scss index 20b4b09..50f10c7 100644 --- a/assets/styles/tools/_functions.scss +++ b/assets/styles/tools/_functions.scss @@ -200,7 +200,7 @@ $context: 'frontend' !default; // } // // .c-heading.-h2 { -// font-size: responsive-type(20px, 40px, $from-big); +// font-size: responsive-type(20px, 40px, $from-xl); // } // ``` // diff --git a/assets/styles/utilities/_spacing.scss b/assets/styles/utilities/_spacing.scss index 8964d88..b11d53e 100644 --- a/assets/styles/utilities/_spacing.scss +++ b/assets/styles/utilities/_spacing.scss @@ -51,7 +51,7 @@ $spacing-sizes: join($spacings, ( $base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace}; // Spacing without media query - @if $breakpoint == "tiny" { + @if $breakpoint == "xs" { #{$base-class} { @each $direction in $directions { #{$property}#{$direction}: $size !important; diff --git a/assets/styles/utilities/_states.scss b/assets/styles/utilities/_states.scss index f2bae3e..8168954 100644 --- a/assets/styles/utilities/_states.scss +++ b/assets/styles/utilities/_states.scss @@ -46,14 +46,14 @@ } } -// .is-hidden\@to-large { -// @media (max-width: $to-large) { +// .is-hidden\@to-lg { +// @media (max-width: $to-lg) { // display: none; // } // } // -// .is-hidden\@from-large { -// @media (min-width: $from-large) { +// .is-hidden\@from-lg { +// @media (min-width: $from-lg) { // display: none; // } // } diff --git a/assets/styles/utilities/_widths.scss b/assets/styles/utilities/_widths.scss index 1e2d505..d2ae043 100644 --- a/assets/styles/utilities/_widths.scss +++ b/assets/styles/utilities/_widths.scss @@ -21,8 +21,8 @@ $widths-fractions: 1 2 3 4 5 !default; @include widths($widths-fractions); -.u-1\/2\@from-small { - @media (min-width: $from-small) { +.u-1\/2\@from-sm { + @media (min-width: $from-sm) { width: 50%; } } diff --git a/docs/grid.md b/docs/grid.md index 253c3b1..b5bea35 100644 --- a/docs/grid.md +++ b/docs/grid.md @@ -70,8 +70,8 @@ The first step is to set intial SCSS values in the following files : grid-template-columns: repeat(4, 1fr); } - &.-col-#{$base-column-nb}\@from-medium { - @media (min-width: $from-medium) { + &.-col-#{$base-column-nb}\@from-md { + @media (min-width: $from-md) { grid-template-columns: repeat(#{$base-column-nb}, 1fr); } } diff --git a/docs/technologies.md b/docs/technologies.md index bab178b..5be7119 100644 --- a/docs/technologies.md +++ b/docs/technologies.md @@ -80,10 +80,10 @@ Learn about [namespacing](https://csswizardry.com/2015/03/more-transparent-ui-co } .c-block_heading { - @media (max-width: $to-medium) { + @media (max-width: $to-md) { .c-block.-large & { margin-bottom: rem(40px); - } + } } } ```