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/.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/README.md b/README.md
new file mode 100644
index 0000000..dfe14ec
--- /dev/null
+++ b/README.md
@@ -0,0 +1,39 @@
+# 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 gegebenenfalls die defaults überschrieben.
+```
+@use 'breakpoints' as *;
+@use 'sizes' as *;
+@use 'colors' as *;
+@forward '@node_modules/@niondigital/frontend-base/css/vars' with (
+ $breakpoints: $breakpoints,
+ $show-breakpoints: $show-breakpoints
+);
+```
+
+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 *;
+@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
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/_main.scss b/css/_main.scss
new file mode 100644
index 0000000..9759cf3
--- /dev/null
+++ b/css/_main.scss
@@ -0,0 +1,3 @@
+@forward 'globals';
+@forward 'objects';
+@forward 'utils';
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/_fluid.scss b/css/functions/_fluid.scss
new file mode 100644
index 0000000..11497d9
--- /dev/null
+++ b/css/functions/_fluid.scss
@@ -0,0 +1,28 @@
+@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
new file mode 100644
index 0000000..b2da951
--- /dev/null
+++ b/css/functions/_index.scss
@@ -0,0 +1,4 @@
+@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 316afb0..ecdfa49 100644
--- a/css/functions/_map-deep-get.scss
+++ b/css/functions/_map-deep-get.scss
@@ -1,10 +1,8 @@
-/**
- * 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;
diff --git a/css/functions/_round.scss b/css/functions/_round.scss
new file mode 100644
index 0000000..f3673fb
--- /dev/null
+++ b/css/functions/_round.scss
@@ -0,0 +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);
+}
diff --git a/css/functions/_unit-helpers.scss b/css/functions/_unit-helpers.scss
index dc495ce..ac8412f 100644
--- a/css/functions/_unit-helpers.scss
+++ b/css/functions/_unit-helpers.scss
@@ -1,15 +1,14 @@
-/**
- * Unit Helper Functions
- */
+@use 'sass:math';
+@use '../vars' as *;
-@use "sass:math";
-
-@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) {
@@ -22,17 +21,13 @@
@return ($val + 0em);
}
-@function to-rem($val) {
- @return ($val + 0rem);
-}
-
@function to-px($val) {
@return ($val + 0px);
}
/* 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/_base.scss b/css/globals/_base.scss
new file mode 100644
index 0000000..5c64c44
--- /dev/null
+++ b/css/globals/_base.scss
@@ -0,0 +1,17 @@
+@use '../vars' as *;
+
+html,
+body {
+ height: 100%;
+}
+
+html {
+ overflow-y: scroll;
+ scroll-behavior: smooth;
+ font-size: $font-size-base;
+}
+
+body {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
diff --git a/css/globals/_box-sizing.scss b/css/globals/_box-sizing.scss
deleted file mode 100644
index 9bf97a9..0000000
--- a/css/globals/_box-sizing.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * 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 {
- box-sizing: border-box;
-}
-/* stylelint-enable selector-max-type */
-
-*,
-*::before,
-*::after {
- box-sizing: inherit;
-}
diff --git a/css/globals/_font-styles.scss b/css/globals/_font-styles.scss
new file mode 100644
index 0000000..abed374
--- /dev/null
+++ b/css/globals/_font-styles.scss
@@ -0,0 +1,27 @@
+@use '../vars' as *;
+@use '../functions' as *;
+@use '../mixins' as *;
+
+@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/globals/_images.scss b/css/globals/_images.scss
index e82eadf..a7f80af 100644
--- a/css/globals/_images.scss
+++ b/css/globals/_images.scss
@@ -1,12 +1,5 @@
-/**
- * Images
- */
-
-/* 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/_index.scss b/css/globals/_index.scss
new file mode 100644
index 0000000..44be0b0
--- /dev/null
+++ b/css/globals/_index.scss
@@ -0,0 +1,6 @@
+@forward 'reset';
+@forward 'base';
+@forward 'font-styles';
+@forward 'images';
+@forward 'inputs';
+@forward 'text';
diff --git a/css/globals/_inputs.scss b/css/globals/_inputs.scss
index c1c4b0f..ed5eaf4 100644
--- a/css/globals/_inputs.scss
+++ b/css/globals/_inputs.scss
@@ -1,24 +1,8 @@
-/**
- * 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"] {
- border-radius: 0;
- appearance: none;
-}
-/* stylelint-enable selector-max-type */
diff --git a/css/globals/_links.scss b/css/globals/_links.scss
deleted file mode 100644
index 9140830..0000000
--- a/css/globals/_links.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Links
- */
-
-/* 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 1652442..de33486 100644
--- a/css/globals/_reset.scss
+++ b/css/globals/_reset.scss
@@ -1,39 +1,8 @@
-/**
- * Reset
- */
-$reset-focus-outline: true !default;
+@use '../../../../modern-normalize/modern-normalize.css';
-@import "~normalize.css/normalize";
-
-/* stylelint-disable selector-max-type */
-/* Exception for the reset */
-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 {
@@ -50,12 +19,3 @@ 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/_svg.scss b/css/globals/_svg.scss
deleted file mode 100644
index fc603e1..0000000
--- a/css/globals/_svg.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * SVG
- */
-
-/* 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/globals/_text.scss b/css/globals/_text.scss
new file mode 100644
index 0000000..4c78ec5
--- /dev/null
+++ b/css/globals/_text.scss
@@ -0,0 +1,12 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ text-wrap: balance;
+}
+
+p {
+ text-wrap: pretty;
+}
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
deleted file mode 100644
index 3d01a2a..0000000
--- a/css/mixins/_fluid.scss
+++ /dev/null
@@ -1,60 +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);
- * }
- */
-
-$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-family.scss b/css/mixins/_font-family.scss
new file mode 100644
index 0000000..7a5d365
--- /dev/null
+++ b/css/mixins/_font-family.scss
@@ -0,0 +1,33 @@
+@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
+) {
+ font-family: map.get($font-families, $font);
+
+ @if $font-weight != none {
+ font-weight: $font-weight;
+ }
+
+ @if $line-height != none {
+ line-height: $line-height;
+ }
+
+ @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-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
deleted file mode 100644
index 79923f9..0000000
--- a/css/mixins/_font-style-fluid.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * 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:math";
-
-$xlarge: map-get($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($font-styles, $name, font-family),
- map-deep-get($font-styles, $name, font-weight),
- map-deep-get($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)));
-
- @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)));
- }
-
- @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)));
- }
-
- @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)));
- }
- }
-
- @if map-deep-get($font-styles, $name, text-transform) != none {
- text-transform: map-deep-get($font-styles, $name, text-transform);
- }
-
- // <= 320 - medium
- @include fluid(
- font-size,
- map-deep-get($font-styles, $name, small-font-size),
- map-deep-get($font-styles, $name, medium-font-size),
- 320px,
- map-get($breakpoints, medium),
- true,
- false
- );
-
- // medium - large
- @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),
- 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),
- false,
- true
- );
- }
-
- @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),
- 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
deleted file mode 100644
index 1140d58..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/_hyphenate.scss b/css/mixins/_hyphenate.scss
index eed5653..986b937 100644
--- a/css/mixins/_hyphenate.scss
+++ b/css/mixins/_hyphenate.scss
@@ -1,9 +1,13 @@
+@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
new file mode 100644
index 0000000..dac4760
--- /dev/null
+++ b/css/mixins/_index.scss
@@ -0,0 +1,8 @@
+@use '../vars' as *;
+@forward '../../../../sass-mq/mq' with (
+ $breakpoints: $breakpoints
+);
+@forward 'font-family';
+@forward 'hyphenate';
+@forward 'overflow-wrap';
+@forward 'visuallyhidden';
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..5c2b863 100644
--- a/css/mixins/_overflow-wrap.scss
+++ b/css/mixins/_overflow-wrap.scss
@@ -1,7 +1,5 @@
/**
- * 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.
+ * 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/_property-breakpoint-map.scss b/css/mixins/_property-breakpoint-map.scss
deleted file mode 100644
index 2e1d14f..0000000
--- a/css/mixins/_property-breakpoint-map.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * property-breakpoint-map Mixin
- *
- * 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 53036f2..0000000
--- a/css/mixins/_transition.scss
+++ /dev/null
@@ -1,34 +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/_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
deleted file mode 100644
index 1ac6efe..0000000
--- a/css/mixins/_z-index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Returns a z-index for the given name from the z-index map
- */
-@mixin z-index($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:
- *
- *
- *
![]()
- *