WIP

package.json

@@ -47,10 +47,10 @@
         "format": "npx prettier --write .",
         "lint": "eslint 'src/**/*.ts' || true",
         "prettify": "prettier --write 'src/**/*.ts'",
-        "dev": "webpack --mode development --config webpack/webpack.config.js",
-        "build": "webpack --mode production --config webpack/webpack.config.js",
-        "serve": "webpack serve --mode development --config webpack/webpack.config.js",
-        "start": "webpack-dev-server --mode development --config webpack/webpack.config.js"
+        "dev": "webpack --mode development --config webpack.config.js",
+        "build": "webpack --mode production --config webpack.config.js",
+        "serve": "webpack serve --mode development --config webpack.config.js",
+        "start": "webpack-dev-server --mode development --config webpack.config.js"
     },
     "devDependencies": {
         "@babel/core": "^7.23.6",

src/scss/--_unit.scss

@@ -0,0 +1,94 @@
+// Copyright 2023 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// ============================================================================
+// Base | Unit
+// ============================================================================
+
+@use 'sass:math';
+
+
+
+
+// @function strip-unit($number) {
+//   @if type-of($number) == 'number' and not unitless($number) {
+//     // @return $number / ($number * 0 + 1);
+//     @return calc($number / ($number * 0 + 1));
+//   }
+//   @return $number;
+// }
+@function strip-unit($value) {
+    @return math.div($value, $value * 0 + 1);
+}
+
+// A Kyu is 1/16th of a Rem
+$q:         0.0625rem !default;
+$q_unit:    1.0000rem !default;
+
+:root {
+    --q: $q;
+}
+
+// @if $q_unit != rem and $q_unit != px {
+//   @error "`#{$q_unit}` is not a valid unit for $q_unit. Use `px` or `rem`.";
+// }
+
+$q_min: 0.75px !default;
+$q_max: 1.50px !default;
+$q_dif: calc($q_max - $q_min);
+
+$font_min: calc(($q_unit / $q) * $q_min) !default;
+$font_max: calc(($q_unit / $q) * $q_max) !default;
+
+// @if $view_unit != px and $view_unit != em and $view_unit != rem {
+//   @error "`#{$view_unit}` is not a valid unit for $view_unit. Use `px`, `em` or `rem`.";
+// }
+
+@mixin fluid_type($min-vw, $max-vw, $min-font-size, $max-font-size) {
+    $u1: unit($min-vw);
+    $u2: unit($max-vw);
+    $u3: unit($min-font-size);
+    $u4: unit($max-font-size);
+
+    @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+        & {
+            font-size: $min-font-size;
+            @media screen and (min-width: $min-vw) {
+                font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+            }
+            @media screen and (min-width: $max-vw) {
+                font-size: $max-font-size;
+            }
+        }
+    }
+}
+
+
+html {
+    @include fluid-type($media_min, $media_max, $font_min, $font_max);
+}
+
+
+
+// html {
+//   @include fluid-type($min_width, $max_width, $min_font, $max_font);
+// }
+// html{
+//   font-size: calc($q_min + q_dif * (100vw ))
+// }
+// html {
+//   font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
+// }
+//   font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

src/scss/--_view.scss

@@ -0,0 +1,82 @@
+// Copyright 2023 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// ============================================================================
+// Base | View
+// Media Queries for Responsive Design
+// ============================================================================
+
+
+
+// Breakpoint Ranges
+// ============================================================================
+
+// Defines breakpoints for responsive layouts and associated container widths
+// Breakpoints align with commonly used device categories for optimal viewing
+
+// 320px — 480px: Mobile devices
+// 481px — 768px: iPads, Tablets
+// 769px — 1024px: Small screens, laptops
+// 1025px — 1200px: Desktops, large screens
+// 1201px and more —  Extra large screens, TV
+
+$media_xs: 320px !default; // Extra small devices (Mobile)
+$media_sm: 481px !default; // Small devices (iPads, Tablets)
+$media_md: 769px !default; // Medium devices (Small screens, laptops)
+$media_lg: 1025px !default; // Large devices (Desktops, large screens)
+$media_xl: 1201px !default; // Extra large devices (Extra large screens, TV)
+
+$media_xs: 320px !default; // Extra small devices (Mobile)
+$media_sm: 640px !default; // Small devices (Tablets)
+$media_md: 768px !default; // Medium devices (Small laptops)
+$media_lg: 992px !default; // Large devices (Laptops, Desktops)
+$media_xl: 1200px !default; // Extra large devices (Large screens, TVs)
+$media_dif: calc($media_xl - $media_xs);
+
+// Media query breakpoints
+// Includes a range from extra small (mobile) to extra large (TV screens)
+
+$grid-breakpoints: (
+    xs: $media_xs,
+    sm: $media_sm,
+    md: $media_md,
+    lg: $media_lg,
+    xl: $media_xl
+) !default;
+
+
+// Container Widths
+// ============================================================================
+
+// Container max-widths based on breakpoints
+// Ensures container sizes adapt to different screen sizes
+
+$container-min-widths: (
+    xs: $media_xs,
+    sm: $media_sm,
+    md: $media_md,
+    lg: $media_lg,
+    xl: $media_xl
+) !default;
+
+$container-max-widths: (
+    xs: ($media_xs - 30px), // 30px less than the breakpoint
+    sm: ($media_sm - 30px),
+    md: ($media_md - 30px),
+    lg: ($media_lg - 30px),
+    xl: ($media_xl - 30px)
+) !default;
+
+

src/scss/fluid_type.scss → src/scss/_fluid.scss

@@ -1,16 +1,38 @@
+// Copyright 2023 Scape Agency BV
 
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+@use 'sass:math';
+
+
+// ============================================================================
+// Base | Unit
+// ============================================================================
 
-@function strip-unit($value) {
-    @if type-of($value) == 'number' and not unitless($value) {
-        @return math.div($value, 1#{unit($value)});
-    }
-    @return $value;
-}
 
 // @function strip-unit($value) {
-//     @return math.div($value, $value * 0 + 1);
+//     @if type-of($value) == 'number' and not unitless($value) {
+//         @return math.div($value, 1#{unit($value)});
+//     }
+//     @return $value;
 // }
 
+@function strip-unit($value) {
+    @return math.div($value, $value * 0 + 1);
+}
+
+
 @function calculate-responsive-size($min-size, $max-size, $min-vw, $max-vw) {
     @return calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
   }
@@ -61,4 +83,9 @@
 // Usage Example:
 // body {
 //     @include fluid_type(320px, 1200px, 1rem, 2rem);
-// }
+// }
+
+html {
+    @include fluid_type($media_min, $media_max, $font_min, $font_max);
+}
+

src/scss/_media_queries.scss

@@ -0,0 +1,77 @@
+
+// Media Query Mixins
+// ============================================================================
+
+// Create mixins for media queries to simplify their usage throughout your stylesheets.
+
+
+@mixin media-xs {
+    @media (min-width: $media_xs) { @content; }
+}
+
+@mixin media-sm {
+    @media (min-width: $media_sm) { @content; }
+}
+
+  // Continue for other breakpoints...
+
+
+// Orientation Queries:
+// ============================================================================
+// Add media queries for different orientations, which can be crucial for devices like tablets and smartphones.
+
+  @mixin orientation-landscape {
+    @media (orientation: landscape) { @content; }
+  }
+
+  @mixin orientation-portrait {
+    @media (orientation: portrait) { @content; }
+  }
+
+
+// High-Density Display Support:
+// ============================================================================
+
+// Consider adding media queries for high-density (Retina) displays.
+  @mixin retina {
+    @media only screen and (-webkit-min-device-pixel-ratio: 2),
+           only screen and (min-resolution: 192dpi) { @content; }
+  }
+
+
+//   Example Usage in Stylesheets:
+// Demonstrate how to use these mixins in your CSS rules.
+  .example-class {
+    @include media-xs {
+      // Styles for extra small devices
+    }
+
+    @include media-sm {
+      // Styles for small devices
+    }
+
+    // Continue for other breakpoints...
+
+    @include orientation-landscape {
+      // Styles for landscape orientation
+    }
+
+    @include retina {
+      // Styles for Retina displays
+    }
+  }
+
+
+
+// Syntax
+// @media media type and (condition: breakpoint) {
+//   // CSS rules
+// }
+
+// @media screen, print {
+//     /* … */
+//   }
+
+// @media (min-width: 30em) and (orientation: landscape) {
+//     /* … */
+//   }