From f37e82d628ad7610f4351466bd734ace8a983b2c Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Thu, 4 Jan 2024 11:22:57 +0100 Subject: [PATCH 01/23] feat: rework to @use & @forward - wip --- css/_functions.scss | 3 - css/_mixins.scss | 12 --- css/functions/_aspect-ratio.scss | 15 ---- css/functions/_index.scss | 2 + css/functions/_map-deep-get.scss | 10 +-- css/functions/_unit-helpers.scss | 4 - css/globals/_box-sizing.scss | 6 -- css/globals/_images.scss | 4 - css/globals/_index.scss | 6 ++ css/globals/_inputs.scss | 9 --- css/globals/_links.scss | 4 - css/globals/_reset.scss | 4 - css/globals/{_svg.scss => _svgs.scss} | 4 - css/mixins/_aspect-ratio-helper.scss | 27 ------- css/mixins/_fluid.scss | 11 ++- css/mixins/_font-size.scss | 34 -------- css/mixins/_font-style-fluid.scss | 98 +++++++++--------------- css/mixins/_hover-focus.scss | 2 +- css/mixins/_hyphenate.scss | 2 + css/mixins/_index.scss | 14 ++++ css/mixins/_object-fit.scss | 20 ----- css/mixins/_overflow-wrap.scss | 2 - css/mixins/_property-breakpoint-map.scss | 3 - css/mixins/_transition.scss | 15 +++- css/mixins/_visuallyhidden.scss | 7 -- css/mixins/_z-index.scss | 5 +- css/objects/_aspect-ratio.scss | 41 ---------- css/objects/_full.scss | 4 - css/objects/_index.scss | 3 + css/objects/_ui-list.scss | 4 - css/objects/_visuallyhidden.scss | 4 +- css/utils/_hidden.scss | 4 - css/utils/_index.scss | 1 + 33 files changed, 93 insertions(+), 291 deletions(-) delete mode 100644 css/_functions.scss delete mode 100644 css/_mixins.scss delete mode 100644 css/functions/_aspect-ratio.scss create mode 100644 css/functions/_index.scss create mode 100644 css/globals/_index.scss rename css/globals/{_svg.scss => _svgs.scss} (91%) delete mode 100644 css/mixins/_aspect-ratio-helper.scss delete mode 100644 css/mixins/_font-size.scss create mode 100644 css/mixins/_index.scss delete mode 100644 css/mixins/_object-fit.scss delete mode 100644 css/objects/_aspect-ratio.scss create mode 100644 css/objects/_index.scss create mode 100644 css/utils/_index.scss diff --git a/css/_functions.scss b/css/_functions.scss deleted file mode 100644 index 49fa6a3..0000000 --- a/css/_functions.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import "functions/unit-helpers"; -@import "functions/map-deep-get"; -@import "functions/aspect-ratio"; \ No newline at end of file diff --git a/css/_mixins.scss b/css/_mixins.scss deleted file mode 100644 index f79ff6d..0000000 --- a/css/_mixins.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import "mixins/aspect-ratio-helper"; -@import "mixins/fluid"; -@import "mixins/font-size"; -@import "mixins/font-style-fluid"; -@import "mixins/hover-focus"; -@import "mixins/hyphenate"; -@import "mixins/object-fit"; -@import "mixins/overflow-wrap"; -@import "mixins/property-breakpoint-map"; -@import "mixins/transition"; -@import "mixins/visuallyhidden"; -@import "mixins/z-index"; diff --git a/css/functions/_aspect-ratio.scss b/css/functions/_aspect-ratio.scss deleted file mode 100644 index 3e9aebe..0000000 --- a/css/functions/_aspect-ratio.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * aspect-ratio function - * - * Usage: - * .class { - * &::before { - * padding-bottom: aspect-ratio('16x9'); - * } - * } - */ -@use "sass:math"; - -@function aspect-ratio($name) { - @return percentage(math.div(map-deep-get($aspect-ratios, $name, height), map-deep-get($aspect-ratios, $name, width))); -} diff --git a/css/functions/_index.scss b/css/functions/_index.scss new file mode 100644 index 0000000..40a6cc0 --- /dev/null +++ b/css/functions/_index.scss @@ -0,0 +1,2 @@ +@forward 'map-deep-get'; +@forward 'unit-helpers'; \ No newline at end of file diff --git a/css/functions/_map-deep-get.scss b/css/functions/_map-deep-get.scss index 316afb0..d86c517 100644 --- a/css/functions/_map-deep-get.scss +++ b/css/functions/_map-deep-get.scss @@ -1,11 +1,9 @@ -/** - * get-map() for multiple levels deep - * https://css-tricks.com/snippets/sass/deep-getset-maps/ - */ +@use 'sass:map'; + @function map-deep-get($map, $keys...) { @each $key in $keys { - $map: map-get($map, $key); + $map: map.get($map, $key); } @return $map; -} +} \ No newline at end of file diff --git a/css/functions/_unit-helpers.scss b/css/functions/_unit-helpers.scss index dc495ce..b6996b1 100644 --- a/css/functions/_unit-helpers.scss +++ b/css/functions/_unit-helpers.scss @@ -1,7 +1,3 @@ -/** - * Unit Helper Functions - */ - @use "sass:math"; @function px-to-em($px, $ref: $font-size_base) { diff --git a/css/globals/_box-sizing.scss b/css/globals/_box-sizing.scss index 9bf97a9..8d89ee6 100644 --- a/css/globals/_box-sizing.scss +++ b/css/globals/_box-sizing.scss @@ -1,9 +1,3 @@ -/** - * Sets a same box-sizing and makes life better - * - * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ - */ - /* stylelint-disable selector-max-type */ /* Exception for setting box-sizing */ html { diff --git a/css/globals/_images.scss b/css/globals/_images.scss index e82eadf..310d919 100644 --- a/css/globals/_images.scss +++ b/css/globals/_images.scss @@ -1,7 +1,3 @@ -/** - * Images - */ - /* stylelint-disable selector-max-type */ /* Exception for basic img styles */ img { diff --git a/css/globals/_index.scss b/css/globals/_index.scss new file mode 100644 index 0000000..2a6d325 --- /dev/null +++ b/css/globals/_index.scss @@ -0,0 +1,6 @@ +@forward 'reset'; +@forward 'box-sizing'; +@forward 'links'; +@forward 'images'; +@forward 'inputs'; +@forward 'svgs'; \ No newline at end of file diff --git a/css/globals/_inputs.scss b/css/globals/_inputs.scss index c1c4b0f..39fefa4 100644 --- a/css/globals/_inputs.scss +++ b/css/globals/_inputs.scss @@ -1,20 +1,11 @@ -/** - * Inputs - */ - /* stylelint-disable selector-max-type */ /* Exception for basic input styles */ input, textarea, select { background-color: transparent; - border: 0; border-radius: 0; appearance: none; - - &::placeholder { - opacity: 1; - } } input[type="search"] { diff --git a/css/globals/_links.scss b/css/globals/_links.scss index 9140830..a6265b3 100644 --- a/css/globals/_links.scss +++ b/css/globals/_links.scss @@ -1,7 +1,3 @@ -/** - * Links - */ - /* stylelint-disable selector-max-type */ /* Exception for basic link styles */ a { diff --git a/css/globals/_reset.scss b/css/globals/_reset.scss index 1652442..302ad7b 100644 --- a/css/globals/_reset.scss +++ b/css/globals/_reset.scss @@ -1,6 +1,3 @@ -/** - * Reset - */ $reset-focus-outline: true !default; @import "~normalize.css/normalize"; @@ -57,5 +54,4 @@ address { outline: none; } } - /* stylelint-enable selector-max-type */ diff --git a/css/globals/_svg.scss b/css/globals/_svgs.scss similarity index 91% rename from css/globals/_svg.scss rename to css/globals/_svgs.scss index fc603e1..1f1619b 100644 --- a/css/globals/_svg.scss +++ b/css/globals/_svgs.scss @@ -1,7 +1,3 @@ -/** - * SVG - */ - /* stylelint-disable selector-max-type */ /* Exception for svg elements */ svg { diff --git a/css/mixins/_aspect-ratio-helper.scss b/css/mixins/_aspect-ratio-helper.scss deleted file mode 100644 index 6e25816..0000000 --- a/css/mixins/_aspect-ratio-helper.scss +++ /dev/null @@ -1,27 +0,0 @@ -/** - * aspect-ratio-helper Mixin - * - * Usage: - * .class { - * @include aspect-ratio-helper('16x9'); - * } - * - * Output: - * .class { - * &::before { - * display: block; - * content: ""; - * width: 100%; - * padding-top: percentage(9/16); - * } - * } - */ - -@mixin aspect-ratio-helper($name) { - &::before { - content: ""; - display: block; - width: 100%; - padding-top: aspect-ratio($name); - } -} diff --git a/css/mixins/_fluid.scss b/css/mixins/_fluid.scss index 3d01a2a..1458e9b 100644 --- a/css/mixins/_fluid.scss +++ b/css/mixins/_fluid.scss @@ -17,12 +17,15 @@ * } */ -$xlarge: map-get($breakpoints, xlarge); +@use '@css/variables' as *; +@use '@css/functions' as *; -@if $xlarge { - $default-max-vw: map-get($breakpoints, xlarge); +$-xlarge: map.get($breakpoints, xlarge); + +@if $-xlarge { + $default-max-vw: map.get($breakpoints, xlarge); } @else { - $default-max-vw: map-get($breakpoints, large); + $default-max-vw: map.get($breakpoints, large); } @mixin fluid($properties, $min-value, $max-value, $min-vw: 320px, $max-vw: $default-max-vw, $includeMin: true, $includeMax: true, $negative: false) { diff --git a/css/mixins/_font-size.scss b/css/mixins/_font-size.scss deleted file mode 100644 index b48688a..0000000 --- a/css/mixins/_font-size.scss +++ /dev/null @@ -1,34 +0,0 @@ -/** - * font-size and line-height - * - * Usage: - * - * .title { - * @include font-size(16px, 24px); - * } - * - * Output: - * - * .title { - * font-size: 16px; - * line-height: 1.5; - * } - * - * Or with 'auto' line-height: - * - * .title { - * @include font-size(16px, auto); - * } - */ - -@use "sass:math"; - -@mixin font-size($font-size, $line-height: $font-size) { - font-size: $font-size; - - @if $line-height == auto { - line-height: $line-height-base; - } @else { - line-height: strip-unit(math.div($line-height, $font-size)); - } -} diff --git a/css/mixins/_font-style-fluid.scss b/css/mixins/_font-style-fluid.scss index 79923f9..c867c39 100644 --- a/css/mixins/_font-style-fluid.scss +++ b/css/mixins/_font-style-fluid.scss @@ -1,33 +1,10 @@ -/** - * font-style-fluid Mixin - * - * Usage: - * - * .class { - * @include font-style(h1-main); - * } - * - * Output: - * - * .class { - * font-family: Arial, sans-serif; - * font-weight: bold; - * font-style: normal; - * } - * @media(small-width: 80em) { - * .class { - * font-size: 160px; - * line-height: 1; - * } - * } - * .wf-roboto-loaded .class { - * font-family: 'Roboto Condensed'; - * } - */ +@use 'sass:map'; +@use 'sass:math'; +@use '@css/functions' as *; +@use '@css/variables' as v; +@use '@css/mixins' as *; -@use "sass:math"; - -$xlarge: map-get($breakpoints, xlarge); +$-xlarge: map.get(v.$breakpoints, xlarge); @mixin font-style-fluid($name) { /* stylelint-disable length-zero-no-unit */ @@ -35,80 +12,79 @@ $xlarge: map-get($breakpoints, xlarge); /* stylelint-enable length-zero-no-unit */ @include font-family( - map-deep-get($font-styles, $name, font-family), - map-deep-get($font-styles, $name, font-weight), - map-deep-get($font-styles, $name, font-style) + map-deep-get(v.$font-styles, $name, font-family), + map-deep-get(v.$font-styles, $name, font-weight), + map-deep-get(v.$font-styles, $name, font-style) ); - line-height: strip-unit(math.div(map-deep-get($font-styles, $name, small-line-height), map-deep-get($font-styles, $name, small-font-size))); + line-height: strip-unit(math.div(map-deep-get(v.$font-styles, $name, small-line-height), map-deep-get(v.$font-styles, $name, small-font-size))); @include mq($from: medium) { - line-height: strip-unit(math.div(map-deep-get($font-styles, $name, medium-line-height), map-deep-get($font-styles, $name, medium-font-size))); + line-height: strip-unit(math.div(map-deep-get(v.$font-styles, $name, medium-line-height), map-deep-get(v.$font-styles, $name, medium-font-size))); } @include mq($from: large) { - line-height: strip-unit(math.div(map-deep-get($font-styles, $name, large-line-height), map-deep-get($font-styles, $name, large-font-size))); + line-height: strip-unit(math.div(map-deep-get(v.$font-styles, $name, large-line-height), map-deep-get(v.$font-styles, $name, large-font-size))); } - @if $xlarge { + @if $-xlarge { @include mq($from: xlarge) { - line-height: strip-unit(math.div(map-deep-get($font-styles, $name, xlarge-line-height), map-deep-get($font-styles, $name, xlarge-font-size))); + line-height: strip-unit(math.div(map-deep-get(v.$font-styles, $name, xlarge-line-height), map-deep-get(v.$font-styles, $name, xlarge-font-size))); } } - @if map-deep-get($font-styles, $name, text-transform) != none { - text-transform: map-deep-get($font-styles, $name, text-transform); + @if map-deep-get(v.$font-styles, $name, text-transform) != none { + text-transform: map-deep-get(v.$font-styles, $name, text-transform); + } + + @if map-deep-get(v.$font-styles, $name, letter-spacing) != none { + letter-spacing: map-deep-get(v.$font-styles, $name, letter-spacing); } // <= 320 - medium @include fluid( font-size, - map-deep-get($font-styles, $name, small-font-size), - map-deep-get($font-styles, $name, medium-font-size), + map-deep-get(v.$font-styles, $name, small-font-size), + map-deep-get(v.$font-styles, $name, medium-font-size), 320px, - map-get($breakpoints, medium), + map.get(v.$breakpoints, medium), true, false ); // medium - large - @if $xlarge { + @if $-xlarge { @include fluid( font-size, - map-deep-get($font-styles, $name, medium-font-size), - map-deep-get($font-styles, $name, large-font-size), - map-get($breakpoints, medium), - map-get($breakpoints, large), + map-deep-get(v.$font-styles, $name, medium-font-size), + map-deep-get(v.$font-styles, $name, large-font-size), + map.get(v.$breakpoints, medium), + map.get(v.$breakpoints, large), false, false ); } @else { @include fluid( font-size, - map-deep-get($font-styles, $name, medium-font-size), - map-deep-get($font-styles, $name, large-font-size), - map-get($breakpoints, medium), - map-get($breakpoints, large), + map-deep-get(v.$font-styles, $name, medium-font-size), + map-deep-get(v.$font-styles, $name, large-font-size), + map.get(v.$breakpoints, medium), + map.get(v.$breakpoints, large), false, true ); } - @if $xlarge { + @if $-xlarge { // large - xlarge @include fluid( font-size, - map-deep-get($font-styles, $name, large-font-size), - map-deep-get($font-styles, $name, xlarge-font-size), - map-get($breakpoints, large), - map-get($breakpoints, xlarge), + map-deep-get(v.$font-styles, $name, large-font-size), + map-deep-get(v.$font-styles, $name, xlarge-font-size), + map.get(v.$breakpoints, large), + map.get(v.$breakpoints, xlarge), false, true ); } -} - -// Default implementation of font-style mixin with the possibility for overwriting -@mixin font-style($name) { - @include font-style-fluid($name); } \ No newline at end of file diff --git a/css/mixins/_hover-focus.scss b/css/mixins/_hover-focus.scss index 1140d58..84e38a6 100644 --- a/css/mixins/_hover-focus.scss +++ b/css/mixins/_hover-focus.scss @@ -27,7 +27,7 @@ * [data-whatinput="keyboard"] .my-parent:focus & { * background-color: red; * } - *} + * } */ @mixin hover-focus($hover-parent: false) { diff --git a/css/mixins/_hyphenate.scss b/css/mixins/_hyphenate.scss index eed5653..737cf40 100644 --- a/css/mixins/_hyphenate.scss +++ b/css/mixins/_hyphenate.scss @@ -1,3 +1,5 @@ +@use 'overflow-wrap'; + @mixin hyphenate() { @include overflow-wrap(break-word); hyphens: auto; diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss new file mode 100644 index 0000000..30ab191 --- /dev/null +++ b/css/mixins/_index.scss @@ -0,0 +1,14 @@ +@use '../variables' as *; +@forward '../../../../node_modules/sass-mq/mq' with ( + $breakpoints: $breakpoints +); +@forward 'fluid'; +@forward 'font-style-fluid'; +@forward 'hover-focus'; +@forward 'hyphenate'; +@forward 'object-fit'; +@forward 'overflow-wrap'; +@forward 'property-breakpoint-map'; +@forward 'transition'; +@forward 'visuallyhidden'; +@forward 'z-index'; diff --git a/css/mixins/_object-fit.scss b/css/mixins/_object-fit.scss deleted file mode 100644 index 8833050..0000000 --- a/css/mixins/_object-fit.scss +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Object fit - * - * This mixin can be used to set the object-fit: - * @include object-fit(contain); - * - * or object-fit and object-position: - * @include object-fit(cover, top); - */ - -@mixin object-fit($fit: fill, $position: null) { - object-fit: $fit; - - @if $position { - object-position: $position; - font-family: "object-fit: #{$fit}; object-position: #{$position}"; - } @else { - font-family: "object-fit: #{$fit}"; - } -} diff --git a/css/mixins/_overflow-wrap.scss b/css/mixins/_overflow-wrap.scss index a15c1a8..3c40445 100644 --- a/css/mixins/_overflow-wrap.scss +++ b/css/mixins/_overflow-wrap.scss @@ -1,6 +1,4 @@ /** - * Overflow-Wrap - * * Wraps text, which is too long to fit in one line and would otherwise create a text which overflows it's content box. * `word-wrap` is the legacy property name, which is still required by some * browsers. diff --git a/css/mixins/_property-breakpoint-map.scss b/css/mixins/_property-breakpoint-map.scss index 2e1d14f..8557fe4 100644 --- a/css/mixins/_property-breakpoint-map.scss +++ b/css/mixins/_property-breakpoint-map.scss @@ -1,10 +1,8 @@ /** - * property-breakpoint-map Mixin * * Uses a map with values per breakpoint and * sets the defined property in every defined breakpoint * - * * Usage: * * $header-height: ( @@ -16,7 +14,6 @@ * @include property-breakpoint-map(height, $header-height); * } * - * * Output: * * .class { diff --git a/css/mixins/_transition.scss b/css/mixins/_transition.scss index 53036f2..58fea85 100644 --- a/css/mixins/_transition.scss +++ b/css/mixins/_transition.scss @@ -1,6 +1,13 @@ -// Usage: @include transition(width, height 0.3s ease-in-out); -// Output: transition(width 0.2s, height 0.3s ease-in-out); -// +/** + * Usage: + * + * @include transition(width, height 0.3s ease-in-out); + * + * Output: + * + * transition: width 0.2s, height 0.3s ease-in-out; + */ + // Pass in any number of transitions @mixin transition($transitions...) { $unfoldedTransitions: (); @@ -10,7 +17,7 @@ transition: $unfoldedTransitions; } -@function unfoldTransition ($transition) { +@function unfoldTransition($transition) { // Default values $property: all; $duration: $transition-default-duration; diff --git a/css/mixins/_visuallyhidden.scss b/css/mixins/_visuallyhidden.scss index a30043b..4de3fc5 100644 --- a/css/mixins/_visuallyhidden.scss +++ b/css/mixins/_visuallyhidden.scss @@ -1,10 +1,3 @@ -/** - * Hide visually - * - * See http://snook.ca/archives/html_and_css/hiding-content-for-accessibility - * for discussion of different solutions - */ - @mixin visuallyhidden() { width: 1px; height: 1px; diff --git a/css/mixins/_z-index.scss b/css/mixins/_z-index.scss index 1ac6efe..8c5ec82 100644 --- a/css/mixins/_z-index.scss +++ b/css/mixins/_z-index.scss @@ -1,6 +1,9 @@ /** * Returns a z-index for the given name from the z-index map */ + +@use 'sass:map'; + @mixin z-index($name) { - z-index: map-get($z-indices, $name); + z-index: map.get($z-indices, $name); } diff --git a/css/objects/_aspect-ratio.scss b/css/objects/_aspect-ratio.scss deleted file mode 100644 index eddcbb7..0000000 --- a/css/objects/_aspect-ratio.scss +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Often used .o-aspect-ratio class variants - * for intrinsic ratio containers. - * - * Mostly used with an image inside: - * - * Usage: - * - *
- * - *
- */ - -.o-aspect-ratio { - position: relative; - - &::before { - content: ""; - display: block; - width: 100%; - } - - > *:first-child:last-child { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - } -} - -/** - * Create all modifier classes from `$aspect-ratios` map - */ -@each $name, $value in $aspect-ratios { - .o-aspect-ratio--#{$name} { - &::before { - padding-top: aspect-ratio($name); - } - } -} diff --git a/css/objects/_full.scss b/css/objects/_full.scss index 4a915ab..839fcd9 100644 --- a/css/objects/_full.scss +++ b/css/objects/_full.scss @@ -1,7 +1,3 @@ -/** - * 100% width and height - */ - .o-full { width: 100%; height: 100%; diff --git a/css/objects/_index.scss b/css/objects/_index.scss new file mode 100644 index 0000000..53a564d --- /dev/null +++ b/css/objects/_index.scss @@ -0,0 +1,3 @@ +@forward 'full'; +@forward 'ui-list'; +@forward 'visuallyhidden'; \ No newline at end of file diff --git a/css/objects/_ui-list.scss b/css/objects/_ui-list.scss index 87d6509..678029f 100644 --- a/css/objects/_ui-list.scss +++ b/css/objects/_ui-list.scss @@ -1,7 +1,3 @@ -/** - * UI List - */ - .o-ui-list { list-style: none; } diff --git a/css/objects/_visuallyhidden.scss b/css/objects/_visuallyhidden.scss index 777017b..1459992 100644 --- a/css/objects/_visuallyhidden.scss +++ b/css/objects/_visuallyhidden.scss @@ -1,6 +1,4 @@ -/** - * Visually hidden text for screenreaders, for example. - */ +@use '../mixins' as *; .o-visuallyhidden { @include visuallyhidden(); diff --git a/css/utils/_hidden.scss b/css/utils/_hidden.scss index d43887b..e015170 100644 --- a/css/utils/_hidden.scss +++ b/css/utils/_hidden.scss @@ -1,7 +1,3 @@ -/** - * Hidden - */ - .u-hidden { display: none !important; } diff --git a/css/utils/_index.scss b/css/utils/_index.scss new file mode 100644 index 0000000..9b916ee --- /dev/null +++ b/css/utils/_index.scss @@ -0,0 +1 @@ +@forward 'hidden'; \ No newline at end of file From b549c4a166f2e53c21895f55cc24ac64467165ba Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Thu, 4 Jan 2024 11:36:01 +0100 Subject: [PATCH 02/23] feat: remove old object-fit --- css/mixins/_index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 30ab191..167e7a6 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -6,7 +6,6 @@ @forward 'font-style-fluid'; @forward 'hover-focus'; @forward 'hyphenate'; -@forward 'object-fit'; @forward 'overflow-wrap'; @forward 'property-breakpoint-map'; @forward 'transition'; From fe1f82d04c1877f6043abc16d9e3b83fb9152d56 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 19 Feb 2024 14:19:29 +0100 Subject: [PATCH 03/23] feat: bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cbdc3e3..80c8897 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@niondigital/frontend-base", - "version": "0.2.3", + "version": "1.0.0", "description": "nion digital base CSS + JS\n", "repository": { "type": "git", From 20b02c4f42ecb5fb579e2621d8930928a73fb09c Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Tue, 20 Feb 2024 08:16:14 +0100 Subject: [PATCH 04/23] remove older things --- css/globals/_index.scss | 4 +- css/globals/_links.scss | 6 --- css/globals/_reset.scss | 9 ---- css/globals/_svgs.scss | 8 ---- css/mixins/_hover-focus.scss | 45 ------------------- css/mixins/_index.scss | 1 - css/objects/_index.scss | 1 - css/objects/_ui-list.scss | 3 -- js/services/FontLoader.d.ts | 8 ---- js/services/FontLoader.js | 78 --------------------------------- js/services/FontLoaderHead.d.ts | 3 -- js/services/FontLoaderHead.js | 35 --------------- 12 files changed, 1 insertion(+), 200 deletions(-) delete mode 100644 css/globals/_links.scss delete mode 100644 css/globals/_svgs.scss delete mode 100644 css/mixins/_hover-focus.scss delete mode 100644 css/objects/_ui-list.scss delete mode 100644 js/services/FontLoader.d.ts delete mode 100644 js/services/FontLoader.js delete mode 100644 js/services/FontLoaderHead.d.ts delete mode 100644 js/services/FontLoaderHead.js diff --git a/css/globals/_index.scss b/css/globals/_index.scss index 2a6d325..f458790 100644 --- a/css/globals/_index.scss +++ b/css/globals/_index.scss @@ -1,6 +1,4 @@ @forward 'reset'; @forward 'box-sizing'; -@forward 'links'; @forward 'images'; -@forward 'inputs'; -@forward 'svgs'; \ No newline at end of file +@forward 'inputs'; \ No newline at end of file diff --git a/css/globals/_links.scss b/css/globals/_links.scss deleted file mode 100644 index a6265b3..0000000 --- a/css/globals/_links.scss +++ /dev/null @@ -1,6 +0,0 @@ -/* stylelint-disable selector-max-type */ -/* Exception for basic link styles */ -a { - text-decoration: none; -} -/* stylelint-enable selector-max-type */ diff --git a/css/globals/_reset.scss b/css/globals/_reset.scss index 302ad7b..23e80be 100644 --- a/css/globals/_reset.scss +++ b/css/globals/_reset.scss @@ -1,5 +1,3 @@ -$reset-focus-outline: true !default; - @import "~normalize.css/normalize"; /* stylelint-disable selector-max-type */ @@ -47,11 +45,4 @@ fieldset { address { font-style: normal; } - -@if $reset-focus-outline { - [data-whatinput="mouse"] *:focus, - [data-whatinput="touch"] *:focus { - outline: none; - } -} /* stylelint-enable selector-max-type */ diff --git a/css/globals/_svgs.scss b/css/globals/_svgs.scss deleted file mode 100644 index 1f1619b..0000000 --- a/css/globals/_svgs.scss +++ /dev/null @@ -1,8 +0,0 @@ -/* stylelint-disable selector-max-type */ -/* Exception for svg elements */ -svg { - display: block; - fill: transparent; - stroke: transparent; -} -/* stylelint-enable selector-max-type */ diff --git a/css/mixins/_hover-focus.scss b/css/mixins/_hover-focus.scss deleted file mode 100644 index 84e38a6..0000000 --- a/css/mixins/_hover-focus.scss +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Usage: - * - * .my-link { - * @include hover-focus() { - * text-decoration: underline; - * } - * } - * - * .my-child { - * @include hover-focus(".my-parent") { - * background-color: red; - * } - * } - * - * Output: - * - * .my-link { - * [data-whatintent="mouse"] &:hover, - * [data-whatinput="keyboard"] &:focus { - * text-decoration: underline; - * } - * } - * - * .my-child { - * [data-whatintent="mouse"] .my-parent:hover &, - * [data-whatinput="keyboard"] .my-parent:focus & { - * background-color: red; - * } - * } - */ - -@mixin hover-focus($hover-parent: false) { - @if $hover-parent { - [data-whatintent="mouse"] #{$hover-parent}:hover &, - [data-whatinput="keyboard"] #{$hover-parent}:focus & { - @content; - } - } @else { - [data-whatintent="mouse"] &:hover, - [data-whatinput="keyboard"] &:focus { - @content; - } - } -} diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 167e7a6..1012ecd 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -4,7 +4,6 @@ ); @forward 'fluid'; @forward 'font-style-fluid'; -@forward 'hover-focus'; @forward 'hyphenate'; @forward 'overflow-wrap'; @forward 'property-breakpoint-map'; diff --git a/css/objects/_index.scss b/css/objects/_index.scss index 53a564d..12deed1 100644 --- a/css/objects/_index.scss +++ b/css/objects/_index.scss @@ -1,3 +1,2 @@ @forward 'full'; -@forward 'ui-list'; @forward 'visuallyhidden'; \ No newline at end of file diff --git a/css/objects/_ui-list.scss b/css/objects/_ui-list.scss deleted file mode 100644 index 678029f..0000000 --- a/css/objects/_ui-list.scss +++ /dev/null @@ -1,3 +0,0 @@ -.o-ui-list { - list-style: none; -} diff --git a/js/services/FontLoader.d.ts b/js/services/FontLoader.d.ts deleted file mode 100644 index a74c0c2..0000000 --- a/js/services/FontLoader.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -export default class FontLoader { - addGroup(className: string, list: Array): void; - start(): void; -} - -export class FontFaceObserver { - constructor(family: string, descriptors: object); -} \ No newline at end of file diff --git a/js/services/FontLoader.js b/js/services/FontLoader.js deleted file mode 100644 index 122e3f0..0000000 --- a/js/services/FontLoader.js +++ /dev/null @@ -1,78 +0,0 @@ -import FontFaceObserver from 'fontfaceobserver/fontfaceobserver'; - -export const events = { - fontsLoaded: 'fontsLoaded.FontLoader' -}; - -/** - * FontLoader - */ -export default class FontLoader { - // static saveInStorage = true; - - constructor() { - this._fontGroups = []; - } - - addGroup(className, list) { - // Don't add if already loaded - if (sessionStorage && sessionStorage[className] === 'true') { - return; - } - - this._fontGroups.push(FontLoader._loadFonts(className, list)); - } - - /** - * Loads fonts with FontFaceObserver - * - * @public - */ - async start() { - if (!this._fontGroups.length) { - return; - } - - await Promise.all(this._fontGroups); - - // Trigger an event as soon all fonts are loaded - window.setTimeout(() => document.dispatchEvent(new CustomEvent(events.fontsLoaded)), 100); - } - - /** - * Loads the fonts in list, saves the load status in the - * session and adds the given className to the className - * of the html tag. - * - * @param {string} className - * @param {Array.} list - * @private - */ - static async _loadFonts(className, list) { - try { - await Promise.all(list.map(font => font.load(null, 5000))); - - document.documentElement.className += ` ${className}`; - - // console.log(`${className} with FontFaceObserver.`); - - try { - if (FontLoader.saveInStorage) { - sessionStorage[className] = 'true'; - } - } catch (error) { - } - } catch (err) { - try { - if (FontLoader.saveInStorage) { - sessionStorage[className] = 'false'; - } - } catch (error) { - } - } - } -} - -FontLoader.saveInStorage = true; - -export { default as FontFaceObserver } from 'fontfaceobserver/fontfaceobserver'; diff --git a/js/services/FontLoaderHead.d.ts b/js/services/FontLoaderHead.d.ts deleted file mode 100644 index 1a96986..0000000 --- a/js/services/FontLoaderHead.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export default class FontLoaderHead { - static addLoadedFont(className: string): void; -} diff --git a/js/services/FontLoaderHead.js b/js/services/FontLoaderHead.js deleted file mode 100644 index 0993189..0000000 --- a/js/services/FontLoaderHead.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * FontLoaderHead - * - * For usage in head of the pages. - */ -export default class FontLoaderHead { - /** - * If the font is cached, add class right away - * for immediate use. - * - * @private - */ - static addLoadedFont(className) { - if (!sessionStorage) { - return; - } - - if (sessionStorage[className] === 'true' || FontLoaderHead._isExcludedBrowser()) { - document.documentElement.className += ` ${className}`; - } - } - - /** - * Exclude some browsers from the default font loading. - * - * IE14 (Edge): Loads the fonts without problems, but is not able to validate that - * bold fonts were loaded (for fonts with "font-weight: normal" that works fine as well) - * - * @returns {boolean} - * @private - */ - static _isExcludedBrowser() { - return /edge\/14\./i.test(navigator.userAgent); - } -} From c33b1a6918527ed36db3cce262ebef6adbea8002 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Tue, 20 Feb 2024 08:51:19 +0100 Subject: [PATCH 05/23] update --- .gitignore | 14 ++++++++++ css/_index.scss | 4 +++ css/functions/_index.scss | 4 +-- css/functions/_map-deep-get.scss | 2 +- css/globals/_base.scss | 14 ++++++++++ css/globals/_index.scss | 10 ++++--- css/globals/_inputs.scss | 5 ---- css/globals/_reset.scss | 2 +- css/globals/_text.scss | 12 +++++++++ css/mixins/_fluid.scss | 4 +-- css/mixins/_font-style-fluid.scss | 10 +++---- css/mixins/_hyphenate.scss | 2 +- css/mixins/_index.scss | 20 +++++++------- css/mixins/_overflow-wrap.scss | 2 +- css/mixins/_z-index.scss | 2 +- css/objects/_index.scss | 4 +-- css/objects/_visuallyhidden.scss | 2 +- css/utils/_index.scss | 2 +- package-lock.json | 45 +++++++++++++++++++++++++++++++ package.json | 2 +- 20 files changed, 124 insertions(+), 38 deletions(-) create mode 100644 .gitignore create mode 100644 css/_index.scss create mode 100644 css/globals/_base.scss create mode 100644 css/globals/_text.scss create mode 100644 package-lock.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9858261 --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +.vscode +.idea + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# macOS-specific files +.DS_Store \ No newline at end of file diff --git a/css/_index.scss b/css/_index.scss new file mode 100644 index 0000000..9befc00 --- /dev/null +++ b/css/_index.scss @@ -0,0 +1,4 @@ +@forward "functions"; +@forward "mixins"; +@forward "globals"; +@forward "objects"; \ No newline at end of file diff --git a/css/functions/_index.scss b/css/functions/_index.scss index 40a6cc0..155782d 100644 --- a/css/functions/_index.scss +++ b/css/functions/_index.scss @@ -1,2 +1,2 @@ -@forward 'map-deep-get'; -@forward 'unit-helpers'; \ No newline at end of file +@forward "map-deep-get"; +@forward "unit-helpers"; \ No newline at end of file diff --git a/css/functions/_map-deep-get.scss b/css/functions/_map-deep-get.scss index d86c517..518f27c 100644 --- a/css/functions/_map-deep-get.scss +++ b/css/functions/_map-deep-get.scss @@ -1,4 +1,4 @@ -@use 'sass:map'; +@use "sass:map"; @function map-deep-get($map, $keys...) { @each $key in $keys { diff --git a/css/globals/_base.scss b/css/globals/_base.scss new file mode 100644 index 0000000..f4500e6 --- /dev/null +++ b/css/globals/_base.scss @@ -0,0 +1,14 @@ +html, +body { + height: 100%; +} + +html { + overflow-y: scroll; + scroll-behavior: smooth; +} + +body { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} \ No newline at end of file diff --git a/css/globals/_index.scss b/css/globals/_index.scss index f458790..72703f0 100644 --- a/css/globals/_index.scss +++ b/css/globals/_index.scss @@ -1,4 +1,6 @@ -@forward 'reset'; -@forward 'box-sizing'; -@forward 'images'; -@forward 'inputs'; \ No newline at end of file +@forward "reset"; +@forward "box-sizing"; +@forward "base"; +@forward "images"; +@forward "text"; +@forward "inputs"; \ No newline at end of file diff --git a/css/globals/_inputs.scss b/css/globals/_inputs.scss index 39fefa4..bb96846 100644 --- a/css/globals/_inputs.scss +++ b/css/globals/_inputs.scss @@ -7,9 +7,4 @@ select { border-radius: 0; appearance: none; } - -input[type="search"] { - border-radius: 0; - appearance: none; -} /* stylelint-enable selector-max-type */ diff --git a/css/globals/_reset.scss b/css/globals/_reset.scss index 23e80be..06f23d1 100644 --- a/css/globals/_reset.scss +++ b/css/globals/_reset.scss @@ -1,4 +1,4 @@ -@import "~normalize.css/normalize"; +@use "~modern-normalize/modern-normalize.css"; /* stylelint-disable selector-max-type */ /* Exception for the reset */ diff --git a/css/globals/_text.scss b/css/globals/_text.scss new file mode 100644 index 0000000..3e919f8 --- /dev/null +++ b/css/globals/_text.scss @@ -0,0 +1,12 @@ +h1, +h2, +h3, +h4, +h5, +h6 { + text-wrap: balance; +} + +p { + text-wrap: pretty; +} \ No newline at end of file diff --git a/css/mixins/_fluid.scss b/css/mixins/_fluid.scss index 1458e9b..8342e70 100644 --- a/css/mixins/_fluid.scss +++ b/css/mixins/_fluid.scss @@ -17,8 +17,8 @@ * } */ -@use '@css/variables' as *; -@use '@css/functions' as *; +@use "@css/variables" as *; +@use "@css/functions" as *; $-xlarge: map.get($breakpoints, xlarge); diff --git a/css/mixins/_font-style-fluid.scss b/css/mixins/_font-style-fluid.scss index c867c39..5a25be3 100644 --- a/css/mixins/_font-style-fluid.scss +++ b/css/mixins/_font-style-fluid.scss @@ -1,8 +1,8 @@ -@use 'sass:map'; -@use 'sass:math'; -@use '@css/functions' as *; -@use '@css/variables' as v; -@use '@css/mixins' as *; +@use "sass:map"; +@use "sass:math"; +@use "@css/functions" as *; +@use "@css/variables" as v; +@use "@css/mixins" as *; $-xlarge: map.get(v.$breakpoints, xlarge); diff --git a/css/mixins/_hyphenate.scss b/css/mixins/_hyphenate.scss index 737cf40..894ce37 100644 --- a/css/mixins/_hyphenate.scss +++ b/css/mixins/_hyphenate.scss @@ -1,4 +1,4 @@ -@use 'overflow-wrap'; +@use "overflow-wrap"; @mixin hyphenate() { @include overflow-wrap(break-word); diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 1012ecd..63df3dc 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -1,12 +1,12 @@ -@use '../variables' as *; -@forward '../../../../node_modules/sass-mq/mq' with ( +@use "../variables" as *; +@forward "../../../../node_modules/sass-mq/mq" with ( $breakpoints: $breakpoints ); -@forward 'fluid'; -@forward 'font-style-fluid'; -@forward 'hyphenate'; -@forward 'overflow-wrap'; -@forward 'property-breakpoint-map'; -@forward 'transition'; -@forward 'visuallyhidden'; -@forward 'z-index'; +@forward "fluid"; +@forward "font-style-fluid"; +@forward "hyphenate"; +@forward "overflow-wrap"; +@forward "property-breakpoint-map"; +@forward "transition"; +@forward "visuallyhidden"; +@forward "z-index"; diff --git a/css/mixins/_overflow-wrap.scss b/css/mixins/_overflow-wrap.scss index 3c40445..5c2b863 100644 --- a/css/mixins/_overflow-wrap.scss +++ b/css/mixins/_overflow-wrap.scss @@ -1,5 +1,5 @@ /** - * Wraps text, which is too long to fit in one line and would otherwise create a text which overflows it's content box. + * Wraps text, which is too long to fit in one line and would otherwise create a text which overflows it"s content box. * `word-wrap` is the legacy property name, which is still required by some * browsers. * Because Autoprefixer is not creating `word-wrap` when it diff --git a/css/mixins/_z-index.scss b/css/mixins/_z-index.scss index 8c5ec82..6329a33 100644 --- a/css/mixins/_z-index.scss +++ b/css/mixins/_z-index.scss @@ -2,7 +2,7 @@ * Returns a z-index for the given name from the z-index map */ -@use 'sass:map'; +@use "sass:map"; @mixin z-index($name) { z-index: map.get($z-indices, $name); diff --git a/css/objects/_index.scss b/css/objects/_index.scss index 12deed1..65158ce 100644 --- a/css/objects/_index.scss +++ b/css/objects/_index.scss @@ -1,2 +1,2 @@ -@forward 'full'; -@forward 'visuallyhidden'; \ No newline at end of file +@forward "full"; +@forward "visuallyhidden"; \ No newline at end of file diff --git a/css/objects/_visuallyhidden.scss b/css/objects/_visuallyhidden.scss index 1459992..9cd2bc5 100644 --- a/css/objects/_visuallyhidden.scss +++ b/css/objects/_visuallyhidden.scss @@ -1,4 +1,4 @@ -@use '../mixins' as *; +@use "../mixins" as *; .o-visuallyhidden { @include visuallyhidden(); diff --git a/css/utils/_index.scss b/css/utils/_index.scss index 9b916ee..31dffcc 100644 --- a/css/utils/_index.scss +++ b/css/utils/_index.scss @@ -1 +1 @@ -@forward 'hidden'; \ No newline at end of file +@forward "hidden"; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..af8cccf --- /dev/null +++ b/package-lock.json @@ -0,0 +1,45 @@ +{ + "name": "@niondigital/frontend-base", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "@niondigital/frontend-base", + "version": "1.0.0", + "dependencies": { + "@types/lodash": "^4.14.173", + "fontfaceobserver": "2.0.13", + "lodash": "^4.17.21", + "modern-normalize": "2.0.0" + }, + "devDependencies": {} + }, + "node_modules/@types/lodash": { + "version": "4.14.202", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", + "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==" + }, + "node_modules/fontfaceobserver": { + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz", + "integrity": "sha512-t8AyHTucuYLfpdsv5IZNZwAUpy7Ms1FToD8DFfyD8M9+41KqQpvo5prY+ueO5st88hV4oOeNFa5QVaGpL7lIuA==" + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/modern-normalize": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-2.0.0.tgz", + "integrity": "sha512-CxBoEVKh5U4DH3XuNbc5ONLF6dQBc8dSc7pdZ1957FGbIO5JBqGqqchhET9dTexri8/pk9xBL6+5ceOtCIp1QA==", + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + } + } +} diff --git a/package.json b/package.json index 80c8897..d8d855e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@types/lodash": "^4.14.173", "fontfaceobserver": "2.0.13", "lodash": "^4.17.21", - "normalize.css": "8.0.1" + "modern-normalize": "2.0.0" }, "devDependencies": {} } From bb7298c9d95f75d349597c312955c3d7d2b217a4 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Tue, 20 Feb 2024 09:24:55 +0100 Subject: [PATCH 06/23] update --- .nvmrc | 1 + css/_index.scss | 4 ---- css/globals/_box-sizing.scss | 12 ------------ css/globals/_index.scss | 1 - css/globals/_reset.scss | 2 +- css/mixins/_fluid.scss | 4 ++-- css/mixins/_font-style-fluid.scss | 6 +++--- css/mixins/_index.scss | 8 ++++---- package-lock.json | 1 - package.json | 1 - 10 files changed, 11 insertions(+), 29 deletions(-) create mode 100644 .nvmrc delete mode 100644 css/_index.scss delete mode 100644 css/globals/_box-sizing.scss diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..25bf17f --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +18 \ No newline at end of file diff --git a/css/_index.scss b/css/_index.scss deleted file mode 100644 index 9befc00..0000000 --- a/css/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@forward "functions"; -@forward "mixins"; -@forward "globals"; -@forward "objects"; \ No newline at end of file diff --git a/css/globals/_box-sizing.scss b/css/globals/_box-sizing.scss deleted file mode 100644 index 8d89ee6..0000000 --- a/css/globals/_box-sizing.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* stylelint-disable selector-max-type */ -/* Exception for setting box-sizing */ -html { - box-sizing: border-box; -} -/* stylelint-enable selector-max-type */ - -*, -*::before, -*::after { - box-sizing: inherit; -} diff --git a/css/globals/_index.scss b/css/globals/_index.scss index 72703f0..56738ce 100644 --- a/css/globals/_index.scss +++ b/css/globals/_index.scss @@ -1,5 +1,4 @@ @forward "reset"; -@forward "box-sizing"; @forward "base"; @forward "images"; @forward "text"; diff --git a/css/globals/_reset.scss b/css/globals/_reset.scss index 06f23d1..0ed8d7e 100644 --- a/css/globals/_reset.scss +++ b/css/globals/_reset.scss @@ -1,4 +1,4 @@ -@use "~modern-normalize/modern-normalize.css"; +@use "../../node_modules/modern-normalize/modern-normalize.css"; /* stylelint-disable selector-max-type */ /* Exception for the reset */ diff --git a/css/mixins/_fluid.scss b/css/mixins/_fluid.scss index 8342e70..f8e2652 100644 --- a/css/mixins/_fluid.scss +++ b/css/mixins/_fluid.scss @@ -17,8 +17,8 @@ * } */ -@use "@css/variables" as *; -@use "@css/functions" as *; +@use "../variables" as *; +@use "../functions" as *; $-xlarge: map.get($breakpoints, xlarge); diff --git a/css/mixins/_font-style-fluid.scss b/css/mixins/_font-style-fluid.scss index 5a25be3..e8134a7 100644 --- a/css/mixins/_font-style-fluid.scss +++ b/css/mixins/_font-style-fluid.scss @@ -1,8 +1,8 @@ @use "sass:map"; @use "sass:math"; -@use "@css/functions" as *; -@use "@css/variables" as v; -@use "@css/mixins" as *; +@use "../functions" as *; +@use "../variables" as v; +@use "../mixins" as *; $-xlarge: map.get(v.$breakpoints, xlarge); diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 63df3dc..0f67b78 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -1,7 +1,7 @@ -@use "../variables" as *; -@forward "../../../../node_modules/sass-mq/mq" with ( - $breakpoints: $breakpoints -); +// @use "../variables" as *; +// @forward "../../../../node_modules/sass-mq/mq" with ( +// $breakpoints: $breakpoints +// ); @forward "fluid"; @forward "font-style-fluid"; @forward "hyphenate"; diff --git a/package-lock.json b/package-lock.json index af8cccf..12772dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,6 @@ "version": "1.0.0", "dependencies": { "@types/lodash": "^4.14.173", - "fontfaceobserver": "2.0.13", "lodash": "^4.17.21", "modern-normalize": "2.0.0" }, diff --git a/package.json b/package.json index d8d855e..02d050a 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,6 @@ "homepage": "https://github.com/niondigital/frontend-base", "dependencies": { "@types/lodash": "^4.14.173", - "fontfaceobserver": "2.0.13", "lodash": "^4.17.21", "modern-normalize": "2.0.0" }, From 97b95d7e81d62d868cb115bd5678801746d7460c Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Tue, 20 Feb 2024 14:24:01 +0100 Subject: [PATCH 07/23] update --- css/_base.scss | 4 ++ css/mixins/_fluid.scss | 63 ----------------- css/mixins/_font-style-fluid.scss | 90 ------------------------ css/mixins/_hyphenate.scss | 11 --- css/mixins/_index.scss | 15 ++-- css/mixins/_overflow-wrap.scss | 15 ---- css/mixins/_property-breakpoint-map.scss | 49 ------------- css/mixins/_transition.scss | 41 ----------- css/mixins/_z-index.scss | 9 --- css/utils/_hidden.scss | 2 + css/vars/_breakpoints.scss | 8 +++ css/vars/_colors.scss | 2 + css/vars/_index.scss | 3 + css/vars/_sizes.scss | 1 + package-lock.json | 13 ++-- package.json | 3 +- 16 files changed, 33 insertions(+), 296 deletions(-) create mode 100644 css/_base.scss delete mode 100644 css/mixins/_fluid.scss delete mode 100644 css/mixins/_font-style-fluid.scss delete mode 100644 css/mixins/_hyphenate.scss delete mode 100644 css/mixins/_overflow-wrap.scss delete mode 100644 css/mixins/_property-breakpoint-map.scss delete mode 100644 css/mixins/_transition.scss delete mode 100644 css/mixins/_z-index.scss create mode 100644 css/vars/_breakpoints.scss create mode 100644 css/vars/_colors.scss create mode 100644 css/vars/_index.scss create mode 100644 css/vars/_sizes.scss diff --git a/css/_base.scss b/css/_base.scss new file mode 100644 index 0000000..95a622a --- /dev/null +++ b/css/_base.scss @@ -0,0 +1,4 @@ +@forward "functions"; +@forward "globals"; +@forward "objects"; +@forward "utils"; diff --git a/css/mixins/_fluid.scss b/css/mixins/_fluid.scss deleted file mode 100644 index f8e2652..0000000 --- a/css/mixins/_fluid.scss +++ /dev/null @@ -1,63 +0,0 @@ -/** - * Based on - * http://www.sassmeister.com/gist/7f22e44ace49b5124eec - * - * Usage: - * - * @include fluid([properties], [min-size], [max-size], [min-viewport, default: 320px], [max-viewport, default: xlarge breakpoint]); - * - * Single property: - * .mod-abc__copy { - * @include fluid(font-size, 16px, 20px); - * } - * - * Multiple properties with same values and custom min-viewport and max-viewport: - * .mod-abc { - * @include fluid(padding-top padding-bottom, 10px, 25px, 500px, 1000px); - * } - */ - -@use "../variables" as *; -@use "../functions" as *; - -$-xlarge: map.get($breakpoints, xlarge); - -@if $-xlarge { - $default-max-vw: map.get($breakpoints, xlarge); -} @else { - $default-max-vw: map.get($breakpoints, large); -} - -@mixin fluid($properties, $min-value, $max-value, $min-vw: 320px, $max-vw: $default-max-vw, $includeMin: true, $includeMax: true, $negative: false) { - @if $includeMin == true { - @each $property in $properties { - @if $negative == true { - #{$property}: -#{$min-value}; - } @else { - #{$property}: $min-value; - } - } - } - - @media (min-width: $min-vw) { - @each $property in $properties { - @if $negative == true { - #{$property}: calc((#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) * -1); - } @else { - #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}); - } - } - } - - @if $includeMax == true { - @media (min-width: $max-vw) { - @each $property in $properties { - @if $negative == true { - #{$property}: -#{$max-value}; - } @else { - #{$property}: $max-value; - } - } - } - } -} diff --git a/css/mixins/_font-style-fluid.scss b/css/mixins/_font-style-fluid.scss deleted file mode 100644 index e8134a7..0000000 --- a/css/mixins/_font-style-fluid.scss +++ /dev/null @@ -1,90 +0,0 @@ -@use "sass:map"; -@use "sass:math"; -@use "../functions" as *; -@use "../variables" as v; -@use "../mixins" as *; - -$-xlarge: map.get(v.$breakpoints, xlarge); - -@mixin font-style-fluid($name) { - /* stylelint-disable length-zero-no-unit */ - min-height: 0vw; /* Fix Safari bug with viewport units in calc() */ - /* stylelint-enable length-zero-no-unit */ - - @include font-family( - map-deep-get(v.$font-styles, $name, font-family), - map-deep-get(v.$font-styles, $name, font-weight), - map-deep-get(v.$font-styles, $name, font-style) - ); - - line-height: strip-unit(math.div(map-deep-get(v.$font-styles, $name, small-line-height), map-deep-get(v.$font-styles, $name, small-font-size))); - - @include mq($from: medium) { - line-height: strip-unit(math.div(map-deep-get(v.$font-styles, $name, medium-line-height), map-deep-get(v.$font-styles, $name, medium-font-size))); - } - - @include mq($from: large) { - line-height: strip-unit(math.div(map-deep-get(v.$font-styles, $name, large-line-height), map-deep-get(v.$font-styles, $name, large-font-size))); - } - - @if $-xlarge { - @include mq($from: xlarge) { - line-height: strip-unit(math.div(map-deep-get(v.$font-styles, $name, xlarge-line-height), map-deep-get(v.$font-styles, $name, xlarge-font-size))); - } - } - - @if map-deep-get(v.$font-styles, $name, text-transform) != none { - text-transform: map-deep-get(v.$font-styles, $name, text-transform); - } - - @if map-deep-get(v.$font-styles, $name, letter-spacing) != none { - letter-spacing: map-deep-get(v.$font-styles, $name, letter-spacing); - } - - // <= 320 - medium - @include fluid( - font-size, - map-deep-get(v.$font-styles, $name, small-font-size), - map-deep-get(v.$font-styles, $name, medium-font-size), - 320px, - map.get(v.$breakpoints, medium), - true, - false - ); - - // medium - large - @if $-xlarge { - @include fluid( - font-size, - map-deep-get(v.$font-styles, $name, medium-font-size), - map-deep-get(v.$font-styles, $name, large-font-size), - map.get(v.$breakpoints, medium), - map.get(v.$breakpoints, large), - false, - false - ); - } @else { - @include fluid( - font-size, - map-deep-get(v.$font-styles, $name, medium-font-size), - map-deep-get(v.$font-styles, $name, large-font-size), - map.get(v.$breakpoints, medium), - map.get(v.$breakpoints, large), - false, - true - ); - } - - @if $-xlarge { - // large - xlarge - @include fluid( - font-size, - map-deep-get(v.$font-styles, $name, large-font-size), - map-deep-get(v.$font-styles, $name, xlarge-font-size), - map.get(v.$breakpoints, large), - map.get(v.$breakpoints, xlarge), - false, - true - ); - } -} \ No newline at end of file diff --git a/css/mixins/_hyphenate.scss b/css/mixins/_hyphenate.scss deleted file mode 100644 index 894ce37..0000000 --- a/css/mixins/_hyphenate.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "overflow-wrap"; - -@mixin hyphenate() { - @include overflow-wrap(break-word); - hyphens: auto; -} - -@mixin hyphenate-reset() { - @include overflow-wrap(normal); - hyphens: manual; -} diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 0f67b78..60bcf77 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -1,12 +1,5 @@ -// @use "../variables" as *; -// @forward "../../../../node_modules/sass-mq/mq" with ( -// $breakpoints: $breakpoints -// ); -@forward "fluid"; -@forward "font-style-fluid"; -@forward "hyphenate"; -@forward "overflow-wrap"; -@forward "property-breakpoint-map"; -@forward "transition"; +@use "../vars" as *; +@forward "../../node_modules/sass-mq/mq" with ( + $breakpoints: $breakpoints +); @forward "visuallyhidden"; -@forward "z-index"; diff --git a/css/mixins/_overflow-wrap.scss b/css/mixins/_overflow-wrap.scss deleted file mode 100644 index 5c2b863..0000000 --- a/css/mixins/_overflow-wrap.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Wraps text, which is too long to fit in one line and would otherwise create a text which overflows it"s content box. - * `word-wrap` is the legacy property name, which is still required by some - * browsers. - * Because Autoprefixer is not creating `word-wrap` when it - * encounters `overflow-wrap`, use this mixin when setting `overflow-wrap`. - * - * From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap): - * In contrast to `word-break`, `overflow-wrap` will only create a break if an entire word cannot be placed on its own line without overflowing. - */ - -@mixin overflow-wrap($wrap: break-word) { - word-wrap: $wrap; - overflow-wrap: $wrap; -} diff --git a/css/mixins/_property-breakpoint-map.scss b/css/mixins/_property-breakpoint-map.scss deleted file mode 100644 index 8557fe4..0000000 --- a/css/mixins/_property-breakpoint-map.scss +++ /dev/null @@ -1,49 +0,0 @@ -/** - * - * Uses a map with values per breakpoint and - * sets the defined property in every defined breakpoint - * - * Usage: - * - * $header-height: ( - * small: 60px, - * large: 80px - * ); - * - * .class { - * @include property-breakpoint-map(height, $header-height); - * } - * - * Output: - * - * .class { - * height: 60px; - * } - * @media(min-width: 64em) { - * .class { - * height: 80px; - * } - * } - */ - -@mixin property-breakpoint-map($property, $map, $factor: null, $offset: null) { - @each $breakpoint, $value in $map { - - @if $factor { - $value: $value * $factor; - } - - @if $offset { - $value: $value + $offset; - } - - @if $breakpoint == small { - // Mobile first, so no media query needed for "small" - #{$property}: $value; - } @else { - @include mq($from: $breakpoint) { - #{$property}: $value; - } - } - } -} diff --git a/css/mixins/_transition.scss b/css/mixins/_transition.scss deleted file mode 100644 index 58fea85..0000000 --- a/css/mixins/_transition.scss +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Usage: - * - * @include transition(width, height 0.3s ease-in-out); - * - * Output: - * - * transition: width 0.2s, height 0.3s ease-in-out; - */ - -// Pass in any number of transitions -@mixin transition($transitions...) { - $unfoldedTransitions: (); - @each $transition in $transitions { - $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma); - } - transition: $unfoldedTransitions; -} - -@function unfoldTransition($transition) { - // Default values - $property: all; - $duration: $transition-default-duration; - $easing: $transition-default-easing; // Browser default is ease, which is what we want - $delay: null; // Browser default is 0, which is what we want - $defaultProperties: ($property, $duration, $easing, $delay); - - // Grab transition properties if they exist - $unfoldedTransition: (); - @for $i from 1 through length($defaultProperties) { - $p: null; - @if $i <= length($transition) { - $p: nth($transition, $i); - } @else { - $p: nth($defaultProperties, $i); - } - $unfoldedTransition: append($unfoldedTransition, $p); - } - - @return $unfoldedTransition; -} diff --git a/css/mixins/_z-index.scss b/css/mixins/_z-index.scss deleted file mode 100644 index 6329a33..0000000 --- a/css/mixins/_z-index.scss +++ /dev/null @@ -1,9 +0,0 @@ -/** - * Returns a z-index for the given name from the z-index map - */ - -@use "sass:map"; - -@mixin z-index($name) { - z-index: map.get($z-indices, $name); -} diff --git a/css/utils/_hidden.scss b/css/utils/_hidden.scss index e015170..9ea42cf 100644 --- a/css/utils/_hidden.scss +++ b/css/utils/_hidden.scss @@ -1,3 +1,5 @@ +@use "../mixins" as *; + .u-hidden { display: none !important; } diff --git a/css/vars/_breakpoints.scss b/css/vars/_breakpoints.scss new file mode 100644 index 0000000..2dc59f3 --- /dev/null +++ b/css/vars/_breakpoints.scss @@ -0,0 +1,8 @@ +$breakpoints: ( + small: 0, + medium: 768px, + large: 1024px, + xlarge: 1920px +) !default; + +$show-breakpoints: (small, medium, large, xlarge) !default; diff --git a/css/vars/_colors.scss b/css/vars/_colors.scss new file mode 100644 index 0000000..c9065e6 --- /dev/null +++ b/css/vars/_colors.scss @@ -0,0 +1,2 @@ +$color-white: #FFF; +$color-black: #000; diff --git a/css/vars/_index.scss b/css/vars/_index.scss new file mode 100644 index 0000000..8a1234b --- /dev/null +++ b/css/vars/_index.scss @@ -0,0 +1,3 @@ +@forward "sizes"; +@forward "breakpoints"; +@forward "colors"; diff --git a/css/vars/_sizes.scss b/css/vars/_sizes.scss new file mode 100644 index 0000000..c712ee3 --- /dev/null +++ b/css/vars/_sizes.scss @@ -0,0 +1 @@ +$content-max-width: 994px !default; diff --git a/package-lock.json b/package-lock.json index 12772dd..3edd200 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "@types/lodash": "^4.14.173", "lodash": "^4.17.21", - "modern-normalize": "2.0.0" + "modern-normalize": "^2.0.0", + "sass-mq": "^6.0.0" }, "devDependencies": {} }, @@ -19,11 +20,6 @@ "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==" }, - "node_modules/fontfaceobserver": { - "version": "2.0.13", - "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz", - "integrity": "sha512-t8AyHTucuYLfpdsv5IZNZwAUpy7Ms1FToD8DFfyD8M9+41KqQpvo5prY+ueO5st88hV4oOeNFa5QVaGpL7lIuA==" - }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -39,6 +35,11 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/sass-mq": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/sass-mq/-/sass-mq-6.0.0.tgz", + "integrity": "sha512-h4VicIy8lszFlqqggqLIFGt/9wS5fHLPoTXHRjC8Vw6UsA4s4JtDvEeypXbbECfgY336mXyc/cdpbRacH0UzGA==" } } } diff --git a/package.json b/package.json index 02d050a..0904452 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "dependencies": { "@types/lodash": "^4.14.173", "lodash": "^4.17.21", - "modern-normalize": "2.0.0" + "modern-normalize": "^2.0.0", + "sass-mq": "^6.0.0" }, "devDependencies": {} } From 66f90b648c450fd1a6e516da020a6ad47e0ff10f Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Tue, 20 Feb 2024 14:28:56 +0100 Subject: [PATCH 08/23] fix --- css/globals/_reset.scss | 2 +- css/mixins/_index.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/globals/_reset.scss b/css/globals/_reset.scss index 0ed8d7e..cfca3bb 100644 --- a/css/globals/_reset.scss +++ b/css/globals/_reset.scss @@ -1,4 +1,4 @@ -@use "../../node_modules/modern-normalize/modern-normalize.css"; +@use "../../../../modern-normalize/modern-normalize.css"; /* stylelint-disable selector-max-type */ /* Exception for the reset */ diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 60bcf77..1f61bc9 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -1,5 +1,5 @@ @use "../vars" as *; -@forward "../../node_modules/sass-mq/mq" with ( +@forward "../../../../sass-mq/mq" with ( $breakpoints: $breakpoints ); @forward "visuallyhidden"; From 5a33a3517c1def577892275e7602b9a400f62d6e Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Tue, 20 Feb 2024 16:29:59 +0100 Subject: [PATCH 09/23] update --- css/globals/_base.scss | 3 +- css/globals/_images.scss | 2 - css/globals/_inputs.scss | 2 - css/globals/_reset.scss | 4 +- css/globals/_text.scss | 5 ++- css/mixins/_hyphenate.scss | 11 +++++ css/mixins/_index.scss | 4 ++ css/mixins/_overflow-wrap.scss | 15 +++++++ css/mixins/_property-breakpoint-map.scss | 54 ++++++++++++++++++++++++ css/mixins/_z-index.scss | 10 +++++ css/vars/_index.scss | 1 + css/vars/_z-indices.scss | 3 ++ 12 files changed, 104 insertions(+), 10 deletions(-) create mode 100644 css/mixins/_hyphenate.scss create mode 100644 css/mixins/_overflow-wrap.scss create mode 100644 css/mixins/_property-breakpoint-map.scss create mode 100644 css/mixins/_z-index.scss create mode 100644 css/vars/_z-indices.scss diff --git a/css/globals/_base.scss b/css/globals/_base.scss index f4500e6..56fd46f 100644 --- a/css/globals/_base.scss +++ b/css/globals/_base.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-max-type */ html, body { height: 100%; @@ -11,4 +12,4 @@ html { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -} \ No newline at end of file +} diff --git a/css/globals/_images.scss b/css/globals/_images.scss index 310d919..eda8fc5 100644 --- a/css/globals/_images.scss +++ b/css/globals/_images.scss @@ -1,8 +1,6 @@ /* stylelint-disable selector-max-type */ -/* Exception for basic img styles */ img { display: block; width: 100%; height: auto; } -/* stylelint-enable selector-max-type */ diff --git a/css/globals/_inputs.scss b/css/globals/_inputs.scss index bb96846..ed5eaf4 100644 --- a/css/globals/_inputs.scss +++ b/css/globals/_inputs.scss @@ -1,5 +1,4 @@ /* stylelint-disable selector-max-type */ -/* Exception for basic input styles */ input, textarea, select { @@ -7,4 +6,3 @@ select { border-radius: 0; appearance: none; } -/* stylelint-enable selector-max-type */ diff --git a/css/globals/_reset.scss b/css/globals/_reset.scss index cfca3bb..b97f84a 100644 --- a/css/globals/_reset.scss +++ b/css/globals/_reset.scss @@ -1,7 +1,6 @@ +/* stylelint-disable selector-max-type */ @use "../../../../modern-normalize/modern-normalize.css"; -/* stylelint-disable selector-max-type */ -/* Exception for the reset */ body, h1, h2, @@ -45,4 +44,3 @@ fieldset { address { font-style: normal; } -/* stylelint-enable selector-max-type */ diff --git a/css/globals/_text.scss b/css/globals/_text.scss index 3e919f8..bedb01a 100644 --- a/css/globals/_text.scss +++ b/css/globals/_text.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-max-type */ h1, h2, h3, @@ -8,5 +9,5 @@ h6 { } p { - text-wrap: pretty; -} \ No newline at end of file + text-wrap: pretty; +} diff --git a/css/mixins/_hyphenate.scss b/css/mixins/_hyphenate.scss new file mode 100644 index 0000000..541ee84 --- /dev/null +++ b/css/mixins/_hyphenate.scss @@ -0,0 +1,11 @@ +@use "overflow-wrap" as *; + +@mixin hyphenate() { + @include overflow-wrap(break-word); + hyphens: auto; +} + +@mixin hyphenate-reset() { + @include overflow-wrap(normal); + hyphens: manual; +} diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 1f61bc9..45ad5dd 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -1,5 +1,9 @@ @use "../vars" as *; + @forward "../../../../sass-mq/mq" with ( $breakpoints: $breakpoints ); +@forward "hyphenate"; +@forward "overflow-wrap"; +@forward "property-breakpoint-map"; @forward "visuallyhidden"; diff --git a/css/mixins/_overflow-wrap.scss b/css/mixins/_overflow-wrap.scss new file mode 100644 index 0000000..5c2b863 --- /dev/null +++ b/css/mixins/_overflow-wrap.scss @@ -0,0 +1,15 @@ +/** + * Wraps text, which is too long to fit in one line and would otherwise create a text which overflows it"s content box. + * `word-wrap` is the legacy property name, which is still required by some + * browsers. + * Because Autoprefixer is not creating `word-wrap` when it + * encounters `overflow-wrap`, use this mixin when setting `overflow-wrap`. + * + * From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap): + * In contrast to `word-break`, `overflow-wrap` will only create a break if an entire word cannot be placed on its own line without overflowing. + */ + +@mixin overflow-wrap($wrap: break-word) { + word-wrap: $wrap; + overflow-wrap: $wrap; +} diff --git a/css/mixins/_property-breakpoint-map.scss b/css/mixins/_property-breakpoint-map.scss new file mode 100644 index 0000000..583cd4a --- /dev/null +++ b/css/mixins/_property-breakpoint-map.scss @@ -0,0 +1,54 @@ +/** + * + * Uses a map with values per breakpoint and + * sets the defined property in every defined breakpoint + * + * Usage: + * + * $header-height: ( + * small: 60px, + * large: 80px + * ); + * + * .class { + * @include property-breakpoint-map(height, $header-height); + * } + * + * Output: + * + * .class { + * height: 60px; + * } + * @media(min-width: 64em) { + * .class { + * height: 80px; + * } + * } + */ + +@use "../vars" as *; +@forward "../../../../sass-mq/mq" with ( + $breakpoints: $breakpoints +); + +@mixin property-breakpoint-map($property, $map, $factor: null, $offset: null) { + @each $breakpoint, $value in $map { + + @if $factor { + $value: $value * $factor; + } + + @if $offset { + $value: $value + $offset; + } + + @if $breakpoint == small { + /* Mobile first, so no media query needed for "small" */ + $property: $value; + } @else { + @include mq($from: $breakpoint) { + $property: $value; + } + } + } +} diff --git a/css/mixins/_z-index.scss b/css/mixins/_z-index.scss new file mode 100644 index 0000000..6b02c30 --- /dev/null +++ b/css/mixins/_z-index.scss @@ -0,0 +1,10 @@ +/** + * Returns a z-index for the given name from the z-index map + */ + +@use "sass:map"; +@use "vars" as *; + +@mixin z-index($name) { + z-index: map.get($z-indices, $name); +} diff --git a/css/vars/_index.scss b/css/vars/_index.scss index 8a1234b..f8a066b 100644 --- a/css/vars/_index.scss +++ b/css/vars/_index.scss @@ -1,3 +1,4 @@ @forward "sizes"; @forward "breakpoints"; @forward "colors"; +@forward "z-indices"; diff --git a/css/vars/_z-indices.scss b/css/vars/_z-indices.scss new file mode 100644 index 0000000..8098919 --- /dev/null +++ b/css/vars/_z-indices.scss @@ -0,0 +1,3 @@ +$z-indices: ( + "header": 1000 +); From e3d9903d2a14041779ac0b5e48fe70af3016fdfb Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Tue, 20 Feb 2024 16:43:04 +0100 Subject: [PATCH 10/23] fix --- css/mixins/_property-breakpoint-map.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/css/mixins/_property-breakpoint-map.scss b/css/mixins/_property-breakpoint-map.scss index 583cd4a..0a5935b 100644 --- a/css/mixins/_property-breakpoint-map.scss +++ b/css/mixins/_property-breakpoint-map.scss @@ -26,10 +26,7 @@ * } */ -@use "../vars" as *; -@forward "../../../../sass-mq/mq" with ( - $breakpoints: $breakpoints -); +@use "../../../../sass-mq/mq" as *; @mixin property-breakpoint-map($property, $map, $factor: null, $offset: null) { @each $breakpoint, $value in $map { From 3dea4a6d337e757642c88615752f346ec2545dfe Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Wed, 21 Feb 2024 08:20:59 +0100 Subject: [PATCH 11/23] add fluid mixin --- css/mixins/_fluid.scss | 63 ++++++++++++++++++++++++ css/mixins/_index.scss | 1 + css/mixins/_property-breakpoint-map.scss | 4 +- 3 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 css/mixins/_fluid.scss diff --git a/css/mixins/_fluid.scss b/css/mixins/_fluid.scss new file mode 100644 index 0000000..19a4cbf --- /dev/null +++ b/css/mixins/_fluid.scss @@ -0,0 +1,63 @@ +/** + * Based on + * http://www.sassmeister.com/gist/7f22e44ace49b5124eec + * + * Usage: + * + * @include fluid([properties], [min-size], [max-size], [min-viewport, default: 320px], [max-viewport, default: xlarge breakpoint]); + * + * Single property: + * .mod-abc__copy { + * @include fluid(font-size, 16px, 20px); + * } + * + * Multiple properties with same values and custom min-viewport and max-viewport: + * .mod-abc { + * @include fluid(padding-top padding-bottom, 10px, 25px, 500px, 1000px); + * } + */ + +@use 'sass:map'; +@use '../vars' as *; +@use '../functions' as *; + +$default-max-vw: map.get($breakpoints, large); + +@if map.has-key($breakpoints, xlarge) { + $default-max-vw: map.get($breakpoints, xlarge); +} + +@mixin fluid($properties, $min-value, $max-value, $min-vw: 320px, $max-vw: $default-max-vw, $includeMin: true, $includeMax: true, $negative: false) { + + @if $includeMin == true { + @each $property in $properties { + @if $negative == true { + #{$property}: -#{$min-value}; + } @else { + #{$property}: $min-value; + } + } + } + + @media (min-width: $min-vw) { + @each $property in $properties { + @if $negative == true { + #{$property}: calc((#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) * -1); + } @else { + #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}); + } + } + } + + @if $includeMax == true { + @media (min-width: $max-vw) { + @each $property in $properties { + @if $negative == true { + #{$property}: -#{$max-value}; + } @else { + #{$property}: $max-value; + } + } + } + } +} diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 45ad5dd..d4e8f62 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -3,6 +3,7 @@ @forward "../../../../sass-mq/mq" with ( $breakpoints: $breakpoints ); +@forward "fluid"; @forward "hyphenate"; @forward "overflow-wrap"; @forward "property-breakpoint-map"; diff --git a/css/mixins/_property-breakpoint-map.scss b/css/mixins/_property-breakpoint-map.scss index 0a5935b..8fbe680 100644 --- a/css/mixins/_property-breakpoint-map.scss +++ b/css/mixins/_property-breakpoint-map.scss @@ -41,10 +41,10 @@ @if $breakpoint == small { /* Mobile first, so no media query needed for "small" */ - $property: $value; + #{$property}: $value; } @else { @include mq($from: $breakpoint) { - $property: $value; + #{$property}: $value; } } } From 2f843a9ff4e646cbdbe4181ceb65b0fc8db3488a Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Wed, 21 Feb 2024 11:05:10 +0100 Subject: [PATCH 12/23] update with font mixins --- css/functions/_map-deep-get.scss | 2 +- css/globals/_font-styles.scss | 8 +++ css/globals/_index.scss | 5 +- css/mixins/_font-family.scss | 19 +++++++ css/mixins/_font-style-fluid.scss | 82 +++++++++++++++++++++++++++++++ css/mixins/_index.scss | 3 +- css/vars/_font-families.scss | 3 ++ css/vars/_font-styles.scss | 17 +++++++ css/vars/_index.scss | 4 +- 9 files changed, 138 insertions(+), 5 deletions(-) create mode 100644 css/globals/_font-styles.scss create mode 100644 css/mixins/_font-family.scss create mode 100644 css/mixins/_font-style-fluid.scss create mode 100644 css/vars/_font-families.scss create mode 100644 css/vars/_font-styles.scss diff --git a/css/functions/_map-deep-get.scss b/css/functions/_map-deep-get.scss index 518f27c..f6b81fc 100644 --- a/css/functions/_map-deep-get.scss +++ b/css/functions/_map-deep-get.scss @@ -6,4 +6,4 @@ } @return $map; -} \ No newline at end of file +} diff --git a/css/globals/_font-styles.scss b/css/globals/_font-styles.scss new file mode 100644 index 0000000..564e63c --- /dev/null +++ b/css/globals/_font-styles.scss @@ -0,0 +1,8 @@ +@use "../vars" as *; +@use "../mixins" as *; + +@each $name, $value in $font-styles { + .fs-#{$name} { + @include font-style-fluid($name); + } +} diff --git a/css/globals/_index.scss b/css/globals/_index.scss index 56738ce..f55ff58 100644 --- a/css/globals/_index.scss +++ b/css/globals/_index.scss @@ -1,5 +1,6 @@ -@forward "reset"; @forward "base"; +@forward "font-styles"; @forward "images"; +@forward "inputs"; +@forward "reset"; @forward "text"; -@forward "inputs"; \ No newline at end of file diff --git a/css/mixins/_font-family.scss b/css/mixins/_font-family.scss new file mode 100644 index 0000000..2467a7f --- /dev/null +++ b/css/mixins/_font-family.scss @@ -0,0 +1,19 @@ +@use "sass:map"; +@use "../vars" as * ; + +@mixin font-family($font, $font-weight: 400, $font-style: normal, $text-transform: none, $letter-spacing: none) { + font-family: map.get($font-families, $font); + font-weight: $font-weight; + + @if $font-style != normal { + font-style: $font-style; + } + + @if $text-transform != none { + text-transform: $text-transform + } + + @if $letter-spacing != none { + letter-spacing: $letter-spacing + } +} diff --git a/css/mixins/_font-style-fluid.scss b/css/mixins/_font-style-fluid.scss new file mode 100644 index 0000000..b871ef7 --- /dev/null +++ b/css/mixins/_font-style-fluid.scss @@ -0,0 +1,82 @@ +@use "sass:map"; +@use "../functions" as *; +@use "../../../../sass-mq/mq" as *; +@use "../vars" as v; +@use "font-family" as *; +@use "fluid" as *; + +@mixin font-style-fluid($name) { + min-height: 0; /* Fix Safari bug with viewport units in calc() */ + font-family: map-deep-get(v.$font-styles, $name, font-family); + + @include font-family( + map-deep-get(v.$font-styles, $name, font-family), + map-deep-get(v.$font-styles, $name, font-weight), + map-deep-get(v.$font-styles, $name, font-style), + map-deep-get(v.$font-styles, $name, text-transform), + map-deep-get(v.$font-styles, $name, letter-spacing) + ); + + line-height: map-deep-get(v.$font-styles, $name, small-line-height); + + @include mq($from: medium) { + line-height: map-deep-get(v.$font-styles, $name, medium-line-height); + } + + @include mq($from: large) { + line-height: map-deep-get(v.$font-styles, $name, large-line-height); + } + + @if map.has-key($breakpoints, xlarge) { + @include mq($from: xlarge) { + line-height: map-deep-get(v.$font-styles, $name, xlarge-line-height); + } + } + + // <= 320 - medium + @include fluid( + font-size, + map-deep-get(v.$font-styles, $name, small-font-size), + map-deep-get(v.$font-styles, $name, medium-font-size), + 320px, + map.get($breakpoints, medium), + true, + false + ); + + // medium - large + @if map.has-key($breakpoints, xlarge) { + @include fluid( + font-size, + map-deep-get(v.$font-styles, $name, medium-font-size), + map-deep-get(v.$font-styles, $name, large-font-size), + map.get($breakpoints, medium), + map.get($breakpoints, large), + false, + false + ); + } @else { + @include fluid( + font-size, + map-deep-get(v.$font-styles, $name, medium-font-size), + map-deep-get(v.$font-styles, $name, large-font-size), + map.get($breakpoints, medium), + map.get($breakpoints, large), + false, + true + ); + } + + @if map.has-key($breakpoints, xlarge) { + // large - xlarge + @include fluid( + font-size, + map-deep-get(v.$font-styles, $name, large-font-size), + map-deep-get(v.$font-styles, $name, xlarge-font-size), + map.get($breakpoints, large), + map.get($breakpoints, xlarge), + false, + true + ); + } +} diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index d4e8f62..136b5f8 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -1,9 +1,10 @@ @use "../vars" as *; - @forward "../../../../sass-mq/mq" with ( $breakpoints: $breakpoints ); @forward "fluid"; +@forward "font-family"; +@forward "font-style-fluid"; @forward "hyphenate"; @forward "overflow-wrap"; @forward "property-breakpoint-map"; diff --git a/css/vars/_font-families.scss b/css/vars/_font-families.scss new file mode 100644 index 0000000..f907bdf --- /dev/null +++ b/css/vars/_font-families.scss @@ -0,0 +1,3 @@ +$font-families: ( + "Morion Light": "Morion Light, serif" +) !default; diff --git a/css/vars/_font-styles.scss b/css/vars/_font-styles.scss new file mode 100644 index 0000000..a814860 --- /dev/null +++ b/css/vars/_font-styles.scss @@ -0,0 +1,17 @@ +$font-styles: ( + headline: ( + font-family: "Maison Neue Extended Medium", + font-weight: 500, + font-style: normal, + letter-spacing: 10%, + text-transform: uppercase, + xlarge-font-size: 18px, + xlarge-line-height: 1.35, + large-font-size: 18px, + large-line-height: 1.35, + medium-font-size: 16px, + medium-line-height: 1.35, + small-font-size: 12px, + small-line-height: 1.35 + ) +) !default; diff --git a/css/vars/_index.scss b/css/vars/_index.scss index f8a066b..d01ae52 100644 --- a/css/vars/_index.scss +++ b/css/vars/_index.scss @@ -1,4 +1,6 @@ -@forward "sizes"; @forward "breakpoints"; @forward "colors"; +@forward "font-families"; +@forward "font-styles"; +@forward "sizes"; @forward "z-indices"; From d7f094552662ff2d49d0111364570349d1e42527 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Thu, 22 Feb 2024 12:06:38 +0100 Subject: [PATCH 13/23] feat: move reset to top --- css/globals/_index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/globals/_index.scss b/css/globals/_index.scss index f55ff58..bb6324b 100644 --- a/css/globals/_index.scss +++ b/css/globals/_index.scss @@ -1,6 +1,6 @@ +@forward "reset"; @forward "base"; @forward "font-styles"; @forward "images"; @forward "inputs"; -@forward "reset"; @forward "text"; From 074c30bb3ed3a98a6e55ef47b9062acb2ba1bad3 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 26 Feb 2024 08:19:34 +0100 Subject: [PATCH 14/23] feat: update font styles with new fluid function --- css/functions/_fluid.scss | 37 ++++++++++++++ css/functions/_index.scss | 4 +- css/functions/_round.scss | 11 +++++ css/functions/_unit-helpers.scss | 10 ++-- css/globals/_base.scss | 4 +- css/globals/_font-styles.scss | 11 ++++- css/mixins/_fluid.scss | 63 ------------------------ css/mixins/_font-family.scss | 11 ++++- css/mixins/_font-style-fluid.scss | 82 ------------------------------- css/mixins/_index.scss | 2 - css/vars/_breakpoints.scss | 2 +- css/vars/_font-styles.scss | 17 +++---- css/vars/_sizes.scss | 1 + 13 files changed, 85 insertions(+), 170 deletions(-) create mode 100644 css/functions/_fluid.scss create mode 100644 css/functions/_round.scss delete mode 100644 css/mixins/_fluid.scss delete mode 100644 css/mixins/_font-style-fluid.scss diff --git a/css/functions/_fluid.scss b/css/functions/_fluid.scss new file mode 100644 index 0000000..f94f21f --- /dev/null +++ b/css/functions/_fluid.scss @@ -0,0 +1,37 @@ +@use "sass:math"; +@use "sass:map"; +@use "../vars" as *; +@use "round" as *; +@use "unit-helpers" as *; + +// Based on https://www.smashingmagazine.com/2022/10/fluid-typography-clamp-sass-functions/ +// Usage: +// font-size: fluid(16px, 31px); +// or +// font-size: fluid(16px, 31px, 375, 1200); + +$default-min-bp: map.get($breakpoints, small); +$default-max-bp: map.get($breakpoints, large); + +@if map.has-key($breakpoints, xlarge) { + $default-max-bp: map.get($breakpoints, xlarge); +} + +@function fluid( + $min-size, + $max-size, + $min-breakpoint: $default-min-bp, + $max-breakpoint: $default-max-bp, + $unit: vw +) { + $slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint); + $slope-to-unit: round($slope * 100, 2); + $intercept-rem: round(px-to-rem($min-size - $slope * $min-breakpoint), 2); + $min-size-rem: round(px-to-rem($min-size), 2); + $max-size-rem: round(px-to-rem($max-size), 2); + @return clamp( + #{$min-size-rem}, + #{$slope-to-unit}#{$unit} + #{$intercept-rem}, + #{$max-size-rem} + ); +} diff --git a/css/functions/_index.scss b/css/functions/_index.scss index 155782d..d849fa3 100644 --- a/css/functions/_index.scss +++ b/css/functions/_index.scss @@ -1,2 +1,4 @@ @forward "map-deep-get"; -@forward "unit-helpers"; \ No newline at end of file +@forward "unit-helpers"; +@forward "round"; +@forward "fluid"; \ No newline at end of file diff --git a/css/functions/_round.scss b/css/functions/_round.scss new file mode 100644 index 0000000..8d54383 --- /dev/null +++ b/css/functions/_round.scss @@ -0,0 +1,11 @@ +@use 'sass:math'; + +@function round($number, $decimals: 0) { + $n: 1; + @if $decimals > 0 { + @for $i from 1 through $decimals { + $n: $n * 10; + } + } + @return math.div(math.round($number * $n), $n); +} \ No newline at end of file diff --git a/css/functions/_unit-helpers.scss b/css/functions/_unit-helpers.scss index b6996b1..b4d5fd6 100644 --- a/css/functions/_unit-helpers.scss +++ b/css/functions/_unit-helpers.scss @@ -1,11 +1,13 @@ @use "sass:math"; +@use "../vars" as *; -@function px-to-em($px, $ref: $font-size_base) { +@function px-to-em($px, $ref: $font-size-base) { @return to-em(math.div(to-px($px), to-px($ref))); } @function px-to-rem($px) { - @return to-rem(math.div(to-px($px), to-px($font-size_base))); + $rems: math.div($px, $font-size-base) * 1rem; + @return $rems; } @function px-to-px($px, $ref: $size_width-content) { @@ -18,10 +20,6 @@ @return ($val + 0em); } -@function to-rem($val) { - @return ($val + 0rem); -} - @function to-px($val) { @return ($val + 0px); } diff --git a/css/globals/_base.scss b/css/globals/_base.scss index 56fd46f..5c64c44 100644 --- a/css/globals/_base.scss +++ b/css/globals/_base.scss @@ -1,4 +1,5 @@ -/* stylelint-disable selector-max-type */ +@use '../vars' as *; + html, body { height: 100%; @@ -7,6 +8,7 @@ body { html { overflow-y: scroll; scroll-behavior: smooth; + font-size: $font-size-base; } body { diff --git a/css/globals/_font-styles.scss b/css/globals/_font-styles.scss index 564e63c..6088b38 100644 --- a/css/globals/_font-styles.scss +++ b/css/globals/_font-styles.scss @@ -1,8 +1,17 @@ @use "../vars" as *; +@use "../functions" as *; @use "../mixins" as *; @each $name, $value in $font-styles { .fs-#{$name} { - @include font-style-fluid($name); + @include font-family( + map-deep-get($font-styles, $name, font-family), + map-deep-get($font-styles, $name, font-weight), + map-deep-get($font-styles, $name, font-style), + map-deep-get($font-styles, $name, line-height), + map-deep-get($font-styles, $name, text-transform), + map-deep-get($font-styles, $name, letter-spacing) + ); + font-size: fluid(map-deep-get($font-styles, $name, font-size-min), map-deep-get($font-styles, $name, font-size-max)); } } diff --git a/css/mixins/_fluid.scss b/css/mixins/_fluid.scss deleted file mode 100644 index 19a4cbf..0000000 --- a/css/mixins/_fluid.scss +++ /dev/null @@ -1,63 +0,0 @@ -/** - * Based on - * http://www.sassmeister.com/gist/7f22e44ace49b5124eec - * - * Usage: - * - * @include fluid([properties], [min-size], [max-size], [min-viewport, default: 320px], [max-viewport, default: xlarge breakpoint]); - * - * Single property: - * .mod-abc__copy { - * @include fluid(font-size, 16px, 20px); - * } - * - * Multiple properties with same values and custom min-viewport and max-viewport: - * .mod-abc { - * @include fluid(padding-top padding-bottom, 10px, 25px, 500px, 1000px); - * } - */ - -@use 'sass:map'; -@use '../vars' as *; -@use '../functions' as *; - -$default-max-vw: map.get($breakpoints, large); - -@if map.has-key($breakpoints, xlarge) { - $default-max-vw: map.get($breakpoints, xlarge); -} - -@mixin fluid($properties, $min-value, $max-value, $min-vw: 320px, $max-vw: $default-max-vw, $includeMin: true, $includeMax: true, $negative: false) { - - @if $includeMin == true { - @each $property in $properties { - @if $negative == true { - #{$property}: -#{$min-value}; - } @else { - #{$property}: $min-value; - } - } - } - - @media (min-width: $min-vw) { - @each $property in $properties { - @if $negative == true { - #{$property}: calc((#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}) * -1); - } @else { - #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}); - } - } - } - - @if $includeMax == true { - @media (min-width: $max-vw) { - @each $property in $properties { - @if $negative == true { - #{$property}: -#{$max-value}; - } @else { - #{$property}: $max-value; - } - } - } - } -} diff --git a/css/mixins/_font-family.scss b/css/mixins/_font-family.scss index 2467a7f..33a7679 100644 --- a/css/mixins/_font-family.scss +++ b/css/mixins/_font-family.scss @@ -1,9 +1,16 @@ @use "sass:map"; @use "../vars" as * ; -@mixin font-family($font, $font-weight: 400, $font-style: normal, $text-transform: none, $letter-spacing: none) { +@mixin font-family($font, $font-weight: none, $font-style: normal, $line-height: none, $text-transform: none, $letter-spacing: none) { font-family: map.get($font-families, $font); - font-weight: $font-weight; + + @if $font-weight != none { + font-weight: $font-weight; + } + + @if $line-height != none { + line-height: $line-height; + } @if $font-style != normal { font-style: $font-style; diff --git a/css/mixins/_font-style-fluid.scss b/css/mixins/_font-style-fluid.scss deleted file mode 100644 index b871ef7..0000000 --- a/css/mixins/_font-style-fluid.scss +++ /dev/null @@ -1,82 +0,0 @@ -@use "sass:map"; -@use "../functions" as *; -@use "../../../../sass-mq/mq" as *; -@use "../vars" as v; -@use "font-family" as *; -@use "fluid" as *; - -@mixin font-style-fluid($name) { - min-height: 0; /* Fix Safari bug with viewport units in calc() */ - font-family: map-deep-get(v.$font-styles, $name, font-family); - - @include font-family( - map-deep-get(v.$font-styles, $name, font-family), - map-deep-get(v.$font-styles, $name, font-weight), - map-deep-get(v.$font-styles, $name, font-style), - map-deep-get(v.$font-styles, $name, text-transform), - map-deep-get(v.$font-styles, $name, letter-spacing) - ); - - line-height: map-deep-get(v.$font-styles, $name, small-line-height); - - @include mq($from: medium) { - line-height: map-deep-get(v.$font-styles, $name, medium-line-height); - } - - @include mq($from: large) { - line-height: map-deep-get(v.$font-styles, $name, large-line-height); - } - - @if map.has-key($breakpoints, xlarge) { - @include mq($from: xlarge) { - line-height: map-deep-get(v.$font-styles, $name, xlarge-line-height); - } - } - - // <= 320 - medium - @include fluid( - font-size, - map-deep-get(v.$font-styles, $name, small-font-size), - map-deep-get(v.$font-styles, $name, medium-font-size), - 320px, - map.get($breakpoints, medium), - true, - false - ); - - // medium - large - @if map.has-key($breakpoints, xlarge) { - @include fluid( - font-size, - map-deep-get(v.$font-styles, $name, medium-font-size), - map-deep-get(v.$font-styles, $name, large-font-size), - map.get($breakpoints, medium), - map.get($breakpoints, large), - false, - false - ); - } @else { - @include fluid( - font-size, - map-deep-get(v.$font-styles, $name, medium-font-size), - map-deep-get(v.$font-styles, $name, large-font-size), - map.get($breakpoints, medium), - map.get($breakpoints, large), - false, - true - ); - } - - @if map.has-key($breakpoints, xlarge) { - // large - xlarge - @include fluid( - font-size, - map-deep-get(v.$font-styles, $name, large-font-size), - map-deep-get(v.$font-styles, $name, xlarge-font-size), - map.get($breakpoints, large), - map.get($breakpoints, xlarge), - false, - true - ); - } -} diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 136b5f8..4cb06b5 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -2,9 +2,7 @@ @forward "../../../../sass-mq/mq" with ( $breakpoints: $breakpoints ); -@forward "fluid"; @forward "font-family"; -@forward "font-style-fluid"; @forward "hyphenate"; @forward "overflow-wrap"; @forward "property-breakpoint-map"; diff --git a/css/vars/_breakpoints.scss b/css/vars/_breakpoints.scss index 2dc59f3..41ec601 100644 --- a/css/vars/_breakpoints.scss +++ b/css/vars/_breakpoints.scss @@ -1,5 +1,5 @@ $breakpoints: ( - small: 0, + small: 320px, medium: 768px, large: 1024px, xlarge: 1920px diff --git a/css/vars/_font-styles.scss b/css/vars/_font-styles.scss index a814860..7367e0a 100644 --- a/css/vars/_font-styles.scss +++ b/css/vars/_font-styles.scss @@ -1,17 +1,12 @@ $font-styles: ( - headline: ( + copy: ( font-family: "Maison Neue Extended Medium", font-weight: 500, font-style: normal, - letter-spacing: 10%, - text-transform: uppercase, - xlarge-font-size: 18px, - xlarge-line-height: 1.35, - large-font-size: 18px, - large-line-height: 1.35, - medium-font-size: 16px, - medium-line-height: 1.35, - small-font-size: 12px, - small-line-height: 1.35 + line-height: 1.35, + letter-spacing: none, + text-transform: none, + font-size-min: 12px, + font-size-max: 20px ) ) !default; diff --git a/css/vars/_sizes.scss b/css/vars/_sizes.scss index c712ee3..9099724 100644 --- a/css/vars/_sizes.scss +++ b/css/vars/_sizes.scss @@ -1 +1,2 @@ $content-max-width: 994px !default; +$font-size-base: 16px !default; \ No newline at end of file From d2cc2e6d6f0168721eee244474b844cf51a306e1 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 26 Feb 2024 08:31:45 +0100 Subject: [PATCH 15/23] feat: update font styles font-size to not use fluid if min & max font-size are the same --- css/globals/_font-styles.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/globals/_font-styles.scss b/css/globals/_font-styles.scss index 6088b38..ef5b153 100644 --- a/css/globals/_font-styles.scss +++ b/css/globals/_font-styles.scss @@ -12,6 +12,10 @@ map-deep-get($font-styles, $name, text-transform), map-deep-get($font-styles, $name, letter-spacing) ); - font-size: fluid(map-deep-get($font-styles, $name, font-size-min), map-deep-get($font-styles, $name, font-size-max)); + @if map-deep-get($font-styles, $name, font-size-min) == map-deep-get($font-styles, $name, font-size-max) { + font-size: px-to-rem(map-deep-get($font-styles, $name, font-size-min)); + } @else { + font-size: fluid(map-deep-get($font-styles, $name, font-size-min), map-deep-get($font-styles, $name, font-size-max)); + } } } From 24d341765abf1ab433b4ee5a6a2f2c2194b5c6c1 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 26 Feb 2024 08:42:11 +0100 Subject: [PATCH 16/23] chore: prettier --- css/_base.scss | 8 ++--- css/functions/_fluid.scss | 37 +++++++++--------------- css/functions/_index.scss | 8 ++--- css/functions/_map-deep-get.scss | 2 +- css/functions/_round.scss | 18 +++++++----- css/functions/_unit-helpers.scss | 11 +++---- css/globals/_font-styles.scss | 12 +++++--- css/globals/_images.scss | 1 - css/globals/_index.scss | 12 ++++---- css/globals/_reset.scss | 3 +- css/globals/_text.scss | 1 - css/mixins/_font-family.scss | 17 +++++++---- css/mixins/_hyphenate.scss | 4 ++- css/mixins/_index.scss | 14 ++++----- css/mixins/_property-breakpoint-map.scss | 3 +- css/mixins/_z-index.scss | 4 +-- css/objects/_index.scss | 4 +-- css/objects/_visuallyhidden.scss | 2 +- css/utils/_hidden.scss | 2 +- css/utils/_index.scss | 2 +- css/vars/_breakpoints.scss | 1 - css/vars/_colors.scss | 2 +- css/vars/_font-families.scss | 2 +- css/vars/_font-styles.scss | 2 +- css/vars/_index.scss | 12 ++++---- css/vars/_sizes.scss | 2 +- css/vars/_z-indices.scss | 2 +- 27 files changed, 95 insertions(+), 93 deletions(-) diff --git a/css/_base.scss b/css/_base.scss index 95a622a..e15f098 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -1,4 +1,4 @@ -@forward "functions"; -@forward "globals"; -@forward "objects"; -@forward "utils"; +@forward 'functions'; +@forward 'globals'; +@forward 'objects'; +@forward 'utils'; diff --git a/css/functions/_fluid.scss b/css/functions/_fluid.scss index f94f21f..11497d9 100644 --- a/css/functions/_fluid.scss +++ b/css/functions/_fluid.scss @@ -1,8 +1,8 @@ -@use "sass:math"; -@use "sass:map"; -@use "../vars" as *; -@use "round" as *; -@use "unit-helpers" as *; +@use 'sass:math'; +@use 'sass:map'; +@use '../vars' as *; +@use 'round' as *; +@use 'unit-helpers' as *; // Based on https://www.smashingmagazine.com/2022/10/fluid-typography-clamp-sass-functions/ // Usage: @@ -14,24 +14,15 @@ $default-min-bp: map.get($breakpoints, small); $default-max-bp: map.get($breakpoints, large); @if map.has-key($breakpoints, xlarge) { - $default-max-bp: map.get($breakpoints, xlarge); + $default-max-bp: map.get($breakpoints, xlarge); } -@function fluid( - $min-size, - $max-size, - $min-breakpoint: $default-min-bp, - $max-breakpoint: $default-max-bp, - $unit: vw -) { - $slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint); - $slope-to-unit: round($slope * 100, 2); - $intercept-rem: round(px-to-rem($min-size - $slope * $min-breakpoint), 2); - $min-size-rem: round(px-to-rem($min-size), 2); - $max-size-rem: round(px-to-rem($max-size), 2); - @return clamp( - #{$min-size-rem}, - #{$slope-to-unit}#{$unit} + #{$intercept-rem}, - #{$max-size-rem} - ); +@function fluid($min-size, $max-size, $min-breakpoint: $default-min-bp, $max-breakpoint: $default-max-bp, $unit: vw) { + $slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint); + $slope-to-unit: round($slope * 100, 2); + $intercept-rem: round(px-to-rem($min-size - $slope * $min-breakpoint), 2); + $min-size-rem: round(px-to-rem($min-size), 2); + $max-size-rem: round(px-to-rem($max-size), 2); + + @return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem}); } diff --git a/css/functions/_index.scss b/css/functions/_index.scss index d849fa3..b2da951 100644 --- a/css/functions/_index.scss +++ b/css/functions/_index.scss @@ -1,4 +1,4 @@ -@forward "map-deep-get"; -@forward "unit-helpers"; -@forward "round"; -@forward "fluid"; \ No newline at end of file +@forward 'map-deep-get'; +@forward 'unit-helpers'; +@forward 'round'; +@forward 'fluid'; diff --git a/css/functions/_map-deep-get.scss b/css/functions/_map-deep-get.scss index f6b81fc..ecdfa49 100644 --- a/css/functions/_map-deep-get.scss +++ b/css/functions/_map-deep-get.scss @@ -1,4 +1,4 @@ -@use "sass:map"; +@use 'sass:map'; @function map-deep-get($map, $keys...) { @each $key in $keys { diff --git a/css/functions/_round.scss b/css/functions/_round.scss index 8d54383..f3673fb 100644 --- a/css/functions/_round.scss +++ b/css/functions/_round.scss @@ -1,11 +1,13 @@ @use 'sass:math'; @function round($number, $decimals: 0) { - $n: 1; - @if $decimals > 0 { - @for $i from 1 through $decimals { - $n: $n * 10; - } - } - @return math.div(math.round($number * $n), $n); -} \ No newline at end of file + $n: 1; + + @if $decimals > 0 { + @for $i from 1 through $decimals { + $n: $n * 10; + } + } + + @return math.div(math.round($number * $n), $n); +} diff --git a/css/functions/_unit-helpers.scss b/css/functions/_unit-helpers.scss index b4d5fd6..ac8412f 100644 --- a/css/functions/_unit-helpers.scss +++ b/css/functions/_unit-helpers.scss @@ -1,13 +1,14 @@ -@use "sass:math"; -@use "../vars" as *; +@use 'sass:math'; +@use '../vars' as *; @function px-to-em($px, $ref: $font-size-base) { @return to-em(math.div(to-px($px), to-px($ref))); } @function px-to-rem($px) { - $rems: math.div($px, $font-size-base) * 1rem; - @return $rems; + $rems: math.div($px, $font-size-base) * 1rem; + + @return $rems; } @function px-to-px($px, $ref: $size_width-content) { @@ -26,7 +27,7 @@ /* stylelint-enable length-zero-no-unit */ @function strip-unit($number) { - @if type-of($number) == "number" and not unitless($number) { + @if type-of($number) == 'number' and not unitless($number) { @return math.div($number, $number * 0 + 1); } diff --git a/css/globals/_font-styles.scss b/css/globals/_font-styles.scss index ef5b153..ef903c8 100644 --- a/css/globals/_font-styles.scss +++ b/css/globals/_font-styles.scss @@ -1,6 +1,6 @@ -@use "../vars" as *; -@use "../functions" as *; -@use "../mixins" as *; +@use '../vars' as *; +@use '../functions' as *; +@use '../mixins' as *; @each $name, $value in $font-styles { .fs-#{$name} { @@ -12,10 +12,14 @@ map-deep-get($font-styles, $name, text-transform), map-deep-get($font-styles, $name, letter-spacing) ); + @if map-deep-get($font-styles, $name, font-size-min) == map-deep-get($font-styles, $name, font-size-max) { font-size: px-to-rem(map-deep-get($font-styles, $name, font-size-min)); } @else { - font-size: fluid(map-deep-get($font-styles, $name, font-size-min), map-deep-get($font-styles, $name, font-size-max)); + font-size: fluid( + map-deep-get($font-styles, $name, font-size-min), + map-deep-get($font-styles, $name, font-size-max) + ); } } } diff --git a/css/globals/_images.scss b/css/globals/_images.scss index eda8fc5..a7f80af 100644 --- a/css/globals/_images.scss +++ b/css/globals/_images.scss @@ -1,4 +1,3 @@ -/* stylelint-disable selector-max-type */ img { display: block; width: 100%; diff --git a/css/globals/_index.scss b/css/globals/_index.scss index bb6324b..44be0b0 100644 --- a/css/globals/_index.scss +++ b/css/globals/_index.scss @@ -1,6 +1,6 @@ -@forward "reset"; -@forward "base"; -@forward "font-styles"; -@forward "images"; -@forward "inputs"; -@forward "text"; +@forward 'reset'; +@forward 'base'; +@forward 'font-styles'; +@forward 'images'; +@forward 'inputs'; +@forward 'text'; diff --git a/css/globals/_reset.scss b/css/globals/_reset.scss index b97f84a..aed67a6 100644 --- a/css/globals/_reset.scss +++ b/css/globals/_reset.scss @@ -1,5 +1,4 @@ -/* stylelint-disable selector-max-type */ -@use "../../../../modern-normalize/modern-normalize.css"; +@use '../../../../modern-normalize/modern-normalize.css'; body, h1, diff --git a/css/globals/_text.scss b/css/globals/_text.scss index bedb01a..4c78ec5 100644 --- a/css/globals/_text.scss +++ b/css/globals/_text.scss @@ -1,4 +1,3 @@ -/* stylelint-disable selector-max-type */ h1, h2, h3, diff --git a/css/mixins/_font-family.scss b/css/mixins/_font-family.scss index 33a7679..7a5d365 100644 --- a/css/mixins/_font-family.scss +++ b/css/mixins/_font-family.scss @@ -1,7 +1,14 @@ -@use "sass:map"; -@use "../vars" as * ; +@use 'sass:map'; +@use '../vars' as *; -@mixin font-family($font, $font-weight: none, $font-style: normal, $line-height: none, $text-transform: none, $letter-spacing: none) { +@mixin font-family( + $font, + $font-weight: none, + $font-style: normal, + $line-height: none, + $text-transform: none, + $letter-spacing: none +) { font-family: map.get($font-families, $font); @if $font-weight != none { @@ -17,10 +24,10 @@ } @if $text-transform != none { - text-transform: $text-transform + text-transform: $text-transform; } @if $letter-spacing != none { - letter-spacing: $letter-spacing + letter-spacing: $letter-spacing; } } diff --git a/css/mixins/_hyphenate.scss b/css/mixins/_hyphenate.scss index 541ee84..986b937 100644 --- a/css/mixins/_hyphenate.scss +++ b/css/mixins/_hyphenate.scss @@ -1,11 +1,13 @@ -@use "overflow-wrap" as *; +@use 'overflow-wrap' as *; @mixin hyphenate() { @include overflow-wrap(break-word); + hyphens: auto; } @mixin hyphenate-reset() { @include overflow-wrap(normal); + hyphens: manual; } diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 4cb06b5..5498ef9 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -1,9 +1,9 @@ -@use "../vars" as *; -@forward "../../../../sass-mq/mq" with ( +@use '../vars' as *; +@forward '../../../../sass-mq/mq' with ( $breakpoints: $breakpoints ); -@forward "font-family"; -@forward "hyphenate"; -@forward "overflow-wrap"; -@forward "property-breakpoint-map"; -@forward "visuallyhidden"; +@forward 'font-family'; +@forward 'hyphenate'; +@forward 'overflow-wrap'; +@forward 'property-breakpoint-map'; +@forward 'visuallyhidden'; diff --git a/css/mixins/_property-breakpoint-map.scss b/css/mixins/_property-breakpoint-map.scss index 8fbe680..e0ef07b 100644 --- a/css/mixins/_property-breakpoint-map.scss +++ b/css/mixins/_property-breakpoint-map.scss @@ -26,11 +26,10 @@ * } */ -@use "../../../../sass-mq/mq" as *; +@use '../../../../sass-mq/mq' as *; @mixin property-breakpoint-map($property, $map, $factor: null, $offset: null) { @each $breakpoint, $value in $map { - @if $factor { $value: $value * $factor; } diff --git a/css/mixins/_z-index.scss b/css/mixins/_z-index.scss index 6b02c30..cc034ac 100644 --- a/css/mixins/_z-index.scss +++ b/css/mixins/_z-index.scss @@ -2,8 +2,8 @@ * Returns a z-index for the given name from the z-index map */ -@use "sass:map"; -@use "vars" as *; +@use 'sass:map'; +@use 'vars' as *; @mixin z-index($name) { z-index: map.get($z-indices, $name); diff --git a/css/objects/_index.scss b/css/objects/_index.scss index 65158ce..605a4d0 100644 --- a/css/objects/_index.scss +++ b/css/objects/_index.scss @@ -1,2 +1,2 @@ -@forward "full"; -@forward "visuallyhidden"; \ No newline at end of file +@forward 'full'; +@forward 'visuallyhidden'; diff --git a/css/objects/_visuallyhidden.scss b/css/objects/_visuallyhidden.scss index 9cd2bc5..1459992 100644 --- a/css/objects/_visuallyhidden.scss +++ b/css/objects/_visuallyhidden.scss @@ -1,4 +1,4 @@ -@use "../mixins" as *; +@use '../mixins' as *; .o-visuallyhidden { @include visuallyhidden(); diff --git a/css/utils/_hidden.scss b/css/utils/_hidden.scss index 9ea42cf..edf1a4d 100644 --- a/css/utils/_hidden.scss +++ b/css/utils/_hidden.scss @@ -1,4 +1,4 @@ -@use "../mixins" as *; +@use '../mixins' as *; .u-hidden { display: none !important; diff --git a/css/utils/_index.scss b/css/utils/_index.scss index 31dffcc..60a50a1 100644 --- a/css/utils/_index.scss +++ b/css/utils/_index.scss @@ -1 +1 @@ -@forward "hidden"; \ No newline at end of file +@forward 'hidden'; diff --git a/css/vars/_breakpoints.scss b/css/vars/_breakpoints.scss index 41ec601..09de662 100644 --- a/css/vars/_breakpoints.scss +++ b/css/vars/_breakpoints.scss @@ -4,5 +4,4 @@ $breakpoints: ( large: 1024px, xlarge: 1920px ) !default; - $show-breakpoints: (small, medium, large, xlarge) !default; diff --git a/css/vars/_colors.scss b/css/vars/_colors.scss index c9065e6..22ca075 100644 --- a/css/vars/_colors.scss +++ b/css/vars/_colors.scss @@ -1,2 +1,2 @@ -$color-white: #FFF; +$color-white: #fff; $color-black: #000; diff --git a/css/vars/_font-families.scss b/css/vars/_font-families.scss index f907bdf..b2ea967 100644 --- a/css/vars/_font-families.scss +++ b/css/vars/_font-families.scss @@ -1,3 +1,3 @@ $font-families: ( - "Morion Light": "Morion Light, serif" + 'Morion Light': 'Morion Light, serif' ) !default; diff --git a/css/vars/_font-styles.scss b/css/vars/_font-styles.scss index 7367e0a..b30b8e9 100644 --- a/css/vars/_font-styles.scss +++ b/css/vars/_font-styles.scss @@ -1,6 +1,6 @@ $font-styles: ( copy: ( - font-family: "Maison Neue Extended Medium", + font-family: 'Maison Neue Extended Medium', font-weight: 500, font-style: normal, line-height: 1.35, diff --git a/css/vars/_index.scss b/css/vars/_index.scss index d01ae52..71ac19b 100644 --- a/css/vars/_index.scss +++ b/css/vars/_index.scss @@ -1,6 +1,6 @@ -@forward "breakpoints"; -@forward "colors"; -@forward "font-families"; -@forward "font-styles"; -@forward "sizes"; -@forward "z-indices"; +@forward 'breakpoints'; +@forward 'colors'; +@forward 'font-families'; +@forward 'font-styles'; +@forward 'sizes'; +@forward 'z-indices'; diff --git a/css/vars/_sizes.scss b/css/vars/_sizes.scss index 9099724..6a39de0 100644 --- a/css/vars/_sizes.scss +++ b/css/vars/_sizes.scss @@ -1,2 +1,2 @@ $content-max-width: 994px !default; -$font-size-base: 16px !default; \ No newline at end of file +$font-size-base: 16px !default; diff --git a/css/vars/_z-indices.scss b/css/vars/_z-indices.scss index 8098919..335ecc1 100644 --- a/css/vars/_z-indices.scss +++ b/css/vars/_z-indices.scss @@ -1,3 +1,3 @@ $z-indices: ( - "header": 1000 + 'header': 1000 ); From c148d6ef8651224237743260fb28262a72419ee4 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 26 Feb 2024 12:02:16 +0100 Subject: [PATCH 17/23] feat: by default no font styles & families --- css/{_base.scss => _main.scss} | 0 css/globals/_font-styles.scss | 38 ++++++++++++++++++---------------- css/vars/_font-families.scss | 10 ++++++--- css/vars/_font-styles.scss | 28 ++++++++++++++----------- 4 files changed, 43 insertions(+), 33 deletions(-) rename css/{_base.scss => _main.scss} (100%) diff --git a/css/_base.scss b/css/_main.scss similarity index 100% rename from css/_base.scss rename to css/_main.scss diff --git a/css/globals/_font-styles.scss b/css/globals/_font-styles.scss index ef903c8..abed374 100644 --- a/css/globals/_font-styles.scss +++ b/css/globals/_font-styles.scss @@ -2,24 +2,26 @@ @use '../functions' as *; @use '../mixins' as *; -@each $name, $value in $font-styles { - .fs-#{$name} { - @include font-family( - map-deep-get($font-styles, $name, font-family), - map-deep-get($font-styles, $name, font-weight), - map-deep-get($font-styles, $name, font-style), - map-deep-get($font-styles, $name, line-height), - map-deep-get($font-styles, $name, text-transform), - map-deep-get($font-styles, $name, letter-spacing) - ); - - @if map-deep-get($font-styles, $name, font-size-min) == map-deep-get($font-styles, $name, font-size-max) { - font-size: px-to-rem(map-deep-get($font-styles, $name, font-size-min)); - } @else { - font-size: fluid( - map-deep-get($font-styles, $name, font-size-min), - map-deep-get($font-styles, $name, font-size-max) +@if $font-styles { + @each $name, $value in $font-styles { + .fs-#{$name} { + @include font-family( + map-deep-get($font-styles, $name, font-family), + map-deep-get($font-styles, $name, font-weight), + map-deep-get($font-styles, $name, font-style), + map-deep-get($font-styles, $name, line-height), + map-deep-get($font-styles, $name, text-transform), + map-deep-get($font-styles, $name, letter-spacing) ); + + @if map-deep-get($font-styles, $name, font-size-min) == map-deep-get($font-styles, $name, font-size-max) { + font-size: px-to-rem(map-deep-get($font-styles, $name, font-size-min)); + } @else { + font-size: fluid( + map-deep-get($font-styles, $name, font-size-min), + map-deep-get($font-styles, $name, font-size-max) + ); + } } } -} +} \ No newline at end of file diff --git a/css/vars/_font-families.scss b/css/vars/_font-families.scss index b2ea967..d7015c8 100644 --- a/css/vars/_font-families.scss +++ b/css/vars/_font-families.scss @@ -1,3 +1,7 @@ -$font-families: ( - 'Morion Light': 'Morion Light, serif' -) !default; +$font-families: null !default; + +// Beispiel für den Aufbau der $font-styles map +// +// $font-families: ( +// 'Morion Light': 'Morion Light, serif' +// ); diff --git a/css/vars/_font-styles.scss b/css/vars/_font-styles.scss index b30b8e9..c5cd126 100644 --- a/css/vars/_font-styles.scss +++ b/css/vars/_font-styles.scss @@ -1,12 +1,16 @@ -$font-styles: ( - copy: ( - font-family: 'Maison Neue Extended Medium', - font-weight: 500, - font-style: normal, - line-height: 1.35, - letter-spacing: none, - text-transform: none, - font-size-min: 12px, - font-size-max: 20px - ) -) !default; +$font-styles: null !default; + +// Beispiel für den Aufbau der $font-styles map +// +// $font-styles: ( +// copy: ( +// font-family: 'Maison Neue Extended Medium', +// font-weight: 500, +// font-style: normal, +// line-height: 1.35, +// letter-spacing: none, +// text-transform: none, +// font-size-min: 12px, +// font-size-max: 20px +// ) +// ); From 9d34543f7a5c1a272e05610a7a58715b92c2ee30 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 26 Feb 2024 12:02:26 +0100 Subject: [PATCH 18/23] feat: add README with usage info --- README.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..25c19e3 --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +# nion digital Frontend Base + +## CSS Nutzung +### Mixins, z.B. in einer `css/mixins/index.scss` +``` +@forward '@node_modules/@niondigital/frontend-base/css/mixins'; +``` + +### Variablen +Die Frontend Base bringt einige default Variablen mit, die mit Projekt-spezifischen Variablen überschrieben werden können. +In einem typischen Projekt könnte das folgendermaßen aussehen. +Man hat diverse Variablen Dateien, wie `_breakpoints.scss`, `_sizes.scss`, `_colors.scss`. +Die werden in eine `_index.scss` per `@use` geholt und dann werden die Frontend Base Variablen ins Projekt geholt und die defaults überschrieben. +``` +@use 'breakpoints' as *; +@use 'sizes' as *; +@use 'colors' as *; +@forward '@node_modules/@niondigital/frontend-base/css/vars' with ( + $content-max-width: $content-max-width, + $breakpoints: $breakpoints, + $show-breakpoints: $show-breakpoints +); +``` + +Beispiel, wenn automatisch Font Style `.fs-` Klassen aus `$font-styles` und `$font-families` maps generieren möchte: +``` +@use 'font-families' as *; +@use 'font-styles' as *; +@forward '@node_modules/@niondigital/frontend-base/css/vars' with ( + $font-families: $font-families, + $font-styles: $font-styles +); +``` + +### `main.scss` +``` +@use 'vars' as *; +@use 'mixins' as *; +@use '@node_modules/@niondigital/frontend-base/css/main' as *; +``` \ No newline at end of file From c323b5d83145bf7c45aaae7b99a4378d45f4f3b1 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 26 Feb 2024 12:13:54 +0100 Subject: [PATCH 19/23] feat: delete some more old mixins --- css/mixins/_index.scss | 1 - css/mixins/_property-breakpoint-map.scss | 50 ------------------------ css/mixins/_z-index.scss | 10 ----- css/vars/_index.scss | 1 - css/vars/_z-indices.scss | 3 -- 5 files changed, 65 deletions(-) delete mode 100644 css/mixins/_property-breakpoint-map.scss delete mode 100644 css/mixins/_z-index.scss delete mode 100644 css/vars/_z-indices.scss diff --git a/css/mixins/_index.scss b/css/mixins/_index.scss index 5498ef9..dac4760 100644 --- a/css/mixins/_index.scss +++ b/css/mixins/_index.scss @@ -5,5 +5,4 @@ @forward 'font-family'; @forward 'hyphenate'; @forward 'overflow-wrap'; -@forward 'property-breakpoint-map'; @forward 'visuallyhidden'; diff --git a/css/mixins/_property-breakpoint-map.scss b/css/mixins/_property-breakpoint-map.scss deleted file mode 100644 index e0ef07b..0000000 --- a/css/mixins/_property-breakpoint-map.scss +++ /dev/null @@ -1,50 +0,0 @@ -/** - * - * Uses a map with values per breakpoint and - * sets the defined property in every defined breakpoint - * - * Usage: - * - * $header-height: ( - * small: 60px, - * large: 80px - * ); - * - * .class { - * @include property-breakpoint-map(height, $header-height); - * } - * - * Output: - * - * .class { - * height: 60px; - * } - * @media(min-width: 64em) { - * .class { - * height: 80px; - * } - * } - */ - -@use '../../../../sass-mq/mq' as *; - -@mixin property-breakpoint-map($property, $map, $factor: null, $offset: null) { - @each $breakpoint, $value in $map { - @if $factor { - $value: $value * $factor; - } - - @if $offset { - $value: $value + $offset; - } - - @if $breakpoint == small { - /* Mobile first, so no media query needed for "small" */ - #{$property}: $value; - } @else { - @include mq($from: $breakpoint) { - #{$property}: $value; - } - } - } -} diff --git a/css/mixins/_z-index.scss b/css/mixins/_z-index.scss deleted file mode 100644 index cc034ac..0000000 --- a/css/mixins/_z-index.scss +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Returns a z-index for the given name from the z-index map - */ - -@use 'sass:map'; -@use 'vars' as *; - -@mixin z-index($name) { - z-index: map.get($z-indices, $name); -} diff --git a/css/vars/_index.scss b/css/vars/_index.scss index 71ac19b..996e4f4 100644 --- a/css/vars/_index.scss +++ b/css/vars/_index.scss @@ -3,4 +3,3 @@ @forward 'font-families'; @forward 'font-styles'; @forward 'sizes'; -@forward 'z-indices'; diff --git a/css/vars/_z-indices.scss b/css/vars/_z-indices.scss deleted file mode 100644 index 335ecc1..0000000 --- a/css/vars/_z-indices.scss +++ /dev/null @@ -1,3 +0,0 @@ -$z-indices: ( - 'header': 1000 -); From a95d867775ee3958f67f44c234346d18a97166d8 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 26 Feb 2024 13:55:36 +0100 Subject: [PATCH 20/23] feat: remove some vars --- README.md | 1 - css/vars/_colors.scss | 2 -- css/vars/_index.scss | 1 - css/vars/_sizes.scss | 1 - 4 files changed, 5 deletions(-) delete mode 100644 css/vars/_colors.scss diff --git a/README.md b/README.md index 25c19e3..9915384 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,6 @@ Die werden in eine `_index.scss` per `@use` geholt und dann werden die Frontend @use 'sizes' as *; @use 'colors' as *; @forward '@node_modules/@niondigital/frontend-base/css/vars' with ( - $content-max-width: $content-max-width, $breakpoints: $breakpoints, $show-breakpoints: $show-breakpoints ); diff --git a/css/vars/_colors.scss b/css/vars/_colors.scss deleted file mode 100644 index 22ca075..0000000 --- a/css/vars/_colors.scss +++ /dev/null @@ -1,2 +0,0 @@ -$color-white: #fff; -$color-black: #000; diff --git a/css/vars/_index.scss b/css/vars/_index.scss index 996e4f4..84b6a1c 100644 --- a/css/vars/_index.scss +++ b/css/vars/_index.scss @@ -1,5 +1,4 @@ @forward 'breakpoints'; -@forward 'colors'; @forward 'font-families'; @forward 'font-styles'; @forward 'sizes'; diff --git a/css/vars/_sizes.scss b/css/vars/_sizes.scss index 6a39de0..ec848f3 100644 --- a/css/vars/_sizes.scss +++ b/css/vars/_sizes.scss @@ -1,2 +1 @@ -$content-max-width: 994px !default; $font-size-base: 16px !default; From 50b72cf2a448ddd18ec90cb2541df0c3f2312324 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 26 Feb 2024 14:02:07 +0100 Subject: [PATCH 21/23] feat: update README --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9915384..dfe14ec 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Die Frontend Base bringt einige default Variablen mit, die mit Projekt-spezifischen Variablen überschrieben werden können. In einem typischen Projekt könnte das folgendermaßen aussehen. Man hat diverse Variablen Dateien, wie `_breakpoints.scss`, `_sizes.scss`, `_colors.scss`. -Die werden in eine `_index.scss` per `@use` geholt und dann werden die Frontend Base Variablen ins Projekt geholt und die defaults überschrieben. +Die werden in eine `_index.scss` per `@use` geholt und dann werden die Frontend Base Variablen ins Projekt geholt und gegebenenfalls die defaults überschrieben. ``` @use 'breakpoints' as *; @use 'sizes' as *; @@ -21,7 +21,7 @@ Die werden in eine `_index.scss` per `@use` geholt und dann werden die Frontend ); ``` -Beispiel, wenn automatisch Font Style `.fs-` Klassen aus `$font-styles` und `$font-families` maps generieren möchte: +Beispiel, wenn automatisch Font Style `.fs-` Klassen aus `$font-styles` und `$font-families` maps generieren möchte und z.b. die breakpoint defaults aus der Base nicht überschreiben möchte. ``` @use 'font-families' as *; @use 'font-styles' as *; From e39b732b56ed10ae751fec01e741781698080fbc Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 18 Mar 2024 07:34:07 +0100 Subject: [PATCH 22/23] feat: remove functions from _main.scss --- css/_main.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/css/_main.scss b/css/_main.scss index e15f098..9759cf3 100644 --- a/css/_main.scss +++ b/css/_main.scss @@ -1,4 +1,3 @@ -@forward 'functions'; @forward 'globals'; @forward 'objects'; @forward 'utils'; From ceb62188fdaf5367dc87412f9c4e6f7aca103e08 Mon Sep 17 00:00:00 2001 From: Martin Wolf Date: Mon, 15 Apr 2024 14:28:30 +0200 Subject: [PATCH 23/23] feat: simplify css reset --- css/globals/_reset.scss | 28 ++-------------------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/css/globals/_reset.scss b/css/globals/_reset.scss index aed67a6..de33486 100644 --- a/css/globals/_reset.scss +++ b/css/globals/_reset.scss @@ -1,32 +1,8 @@ @use '../../../../modern-normalize/modern-normalize.css'; -body, -h1, -h2, -h3, -h4, -h5, -h6, -p, -blockquote, -pre, -dl, -dd, -ol, -ul, -li, -form, -fieldset, -legend, -figure, -table, -th, -td, -caption, -hr, -button { +* { padding: 0; - margin: 0; + margin: 0; } button {