Update 2024

.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

.nvmrc

@@ -0,0 +1 @@
+18

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 *;
+```

css/_main.scss

@@ -0,0 +1,3 @@
+@forward 'globals';
+@forward 'objects';
+@forward 'utils';

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});
+}

css/functions/_index.scss

@@ -0,0 +1,4 @@
+@forward 'map-deep-get';
+@forward 'unit-helpers';
+@forward 'round';
+@forward 'fluid';

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;

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);
+}

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);
 	}
 

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;
+}

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)
+				);
+			}
+		}
+	}
+}

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 */

css/globals/_index.scss

@@ -0,0 +1,6 @@
+@forward 'reset';
+@forward 'base';
+@forward 'font-styles';
+@forward 'images';
+@forward 'inputs';
+@forward 'text';

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 */

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 */