unit.gl 0.0.35 → 0.0.39

package/scss/mixins/_unit.scss

@@ -0,0 +1,94 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Device Mixins Module
+/// ===========================================================================
+/// 
+/// @group Unit
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../variables" as *;
+@use "../functions" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+/// 
+/// This mixin applies a CSS property with a value calculated in Kyū units.
+/// 
+/// @name q
+/// @param {Number} $multiplier - The multiplier to apply to the base Kyū unit.
+/// @param {String} $property - The CSS property to which the calculated value is applied.
+/// 
+/// @example scss - Usage
+///   .element {
+///     @include q(4, 'padding');  // Applies padding using 4 times the base Kyū unit
+///   }
+/// 
+@mixin q($multiplier, $property) {
+    #{$property}: q($multiplier);
+}
+
+
+/// 
+/// A mixin for fluid typography that scales font sizes between a specified
+/// minimum and maximum viewport width, ensuring a smooth transition.
+/// 
+/// @name fluid_type
+/// @param {Length} $min_vw - The minimum viewport width where the fluid scaling starts.
+/// @param {Length} $max_vw - The maximum viewport width where the fluid scaling ends.
+/// @param {Length} $min_font_size - The minimum font size for the smallest viewport.
+/// @param {Length} $max_font_size - The maximum font size for the largest viewport.
+/// 
+/// @example scss - Usage
+///   html {
+///     @include fluid_type(320px, 1440px, 1rem, 2rem);
+///   }
+/// 
+@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} + #{unit_strip($max_font_size - $min_font_size)} * ((100vw - #{$min_vw}) / #{unit_strip($max_vw - $min_vw)})
+                );
+            }
+
+            @media screen and (min-width: $max_vw) {
+                font-size: $max_font_size;
+            }
+        }
+    } @else {
+        @warn "Units do not match across all parameters in fluid_type mixin.";
+    }
+}

package/scss/mixins/_view.scss

@@ -1,27 +1,52 @@
-// Copyright 2024 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
+// ============================================================================
+// Poster
+// ============================================================================
 
-// http://www.apache.org/licenses/LICENSE-2.0
+////
+/// 
+/// View Mixins Module
+/// ===========================================================================
+/// 
+/// This module provides a set of mixins for applying media queries based on
+/// predefined breakpoints. These mixins allow for a clean, semantic way to 
+/// handle responsive design across different screen sizes.
+///
+/// @group View
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @require "../variables" - for access to the $breakpoints map and related variables.
+/// @access public
+/// 
+////
 
-// 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
+// ============================================================================
 
 @use "../variables" as *;
 
+
 // ============================================================================
-// Media | Screen
+// Mixins
 // ============================================================================
 
-// Media Query Mixins
-// ============================================================================
 
+/// 
+/// Applies styles for the specified breakpoint. If the breakpoint 
+/// is not found, a warning is issued.
+/// 
+/// @name breakpoint
+/// @param {String} $size - The name of the breakpoint as defined in the $breakpoints map.
+/// @content
+/// 
+/// @example scss - Usage
+///   @include breakpoint(md) {
+///     // Styles for medium screens and up
+///   }
+/// 
 @mixin breakpoint($size) {
     @if map-has-key($breakpoints, $size) {
         @media (min-width: map-get($breakpoints, $size)) {
@@ -32,48 +57,102 @@
     }
 }
 
+
+/// 
+/// Applies styles for extra-small devices and up (min-width: 320px).
+/// 
+/// @name media_xs
+/// @example scss - Usage
+///     @include media_xs {
+///         // Styles for extra-small devices and up
+///     }
+/// 
 @mixin media_xs {
-    @media (min-width: $media_xs) { @content; }
+    @media (min-width: $media_xs) { 
+        @content; 
+    }
 }
-  
+
+
+/// 
+/// Applies styles for small devices and up (min-width: 480px).
+/// 
+/// @name media_sm
+/// @example scss - Usage
+///   @include media_sm {
+///     // Styles for small devices and up
+///   }
+/// 
 @mixin media_sm {
-    @media (min-width: $media_sm) { @content; }
+    @media (min-width: $media_sm) { 
+        @content; 
+    }
 }
 
 
+/// 
+/// Applies styles for medium devices and up (min-width: 768px).
+/// 
+/// @name media_md
+/// 
+/// @example scss - Usage
+///   @include media_md {
+///     // Styles for medium devices and up
+///   }
+/// 
 @mixin media_md {
-    @media (min-width: $media_md) { @content; }
+    @media (min-width: $media_md) { 
+        @content; 
+    }
 }
-  
+
+
+/// 
+/// Applies styles for large devices and up (min-width: 1024px).
+/// 
+/// @name media_lg
+/// 
+/// @example scss - Usage
+///   @include media_lg {
+///     // Styles for large devices and up
+///   }
+/// 
 @mixin media_lg {
-    @media (min-width: $media_lg) { @content; }
+    @media (min-width: $media_lg) { 
+        @content; 
+    }
 }
-  
 
+
+/// 
+/// Applies styles for extra-large devices and up (min-width: 1280px).
+/// 
+/// @name media_xl
+/// 
+/// @example scss - Usage
+///   @include media_xl {
+///     // Styles for extra-large devices and up
+///   }
+/// 
 @mixin media_xl {
-    @media (min-width: $media_xl) { @content; }
+    @media (min-width: $media_xl) { 
+        @content; 
+    }
 }
-  
+
+
+/// 
+/// Applies styles for super-large devices and up (min-width: 1440px).
+/// 
+/// @name media_sl
+/// 
+/// @example scss - Usage
+///   @include media_sl {
+///     // Styles for super-large devices and up
+///   }
+/// 
 @mixin media_sl {
-    @media (min-width: $media_sl) { @content; }
+    @media (min-width: $media_sl) { 
+        @content; 
+    }
 }
-  
-
-// Example
-// @include breakpoint(md) {
-//     // Styles for medium screens and up
-// }
-  
-
-// Syntax
-// @media media type and (condition: breakpoint) {
-//   // CSS rules
-// }
-
-// @media screen, print {
-//     /* … */
-//   }
-
-// @media (min-width: 30em) and (orientation: landscape) {
-//     /* … */
-//   }

package/scss/tags/_index.scss

@@ -0,0 +1,30 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Tags Module
+/// ===========================================================================
+/// 
+/// @group Tags
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+
+// ============================================================================
+// Forward
+// ============================================================================
+
+/// Forwarding modules for global access
+@forward "unit";

package/scss/tags/_unit.scss

@@ -0,0 +1,40 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Ratio Class Module
+/// ===========================================================================
+/// 
+/// @group Ratio
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../variables" as *;
+@use "../mixins" as *;
+
+
+// ============================================================================
+// Classes
+// ============================================================================
+
+// Example usage of fluid typography for the html element
+html {
+    @include fluid_type(
+        $media_xs,
+        $media_sl,
+        $font_min,
+        $font_max
+    );
+}

package/scss/utilities/_guides.scss

@@ -0,0 +1,103 @@
+@use "../dev" as *;
+@use "../variables" as *;
+@use "../mixins" as *;
+
+
+// ============================================================================
+// Utilities | Guides
+// ============================================================================
+
+
+.guide { @include guide; }
+
+@mixin guide_graph {
+    @include guide;
+    background-size: 4*$q 4*$q;
+    background-image:
+        repeating-linear-gradient(rgb(66, 61, 61) 0 1px, transparent 1px 100%),
+        repeating-linear-gradient(90deg,rgb(66, 61, 61) 0 1px, transparent 1px 100%);
+}
+
+.guide_graph { @include guide_graph; }
+
+@mixin guide_baseline {
+    @include guide;
+    // background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
+    // background: repeating-linear-gradient(transparent, transparent 20px, transparent 20px, transparent 25px);
+    // background-repeat: repeat-y;
+    background-repeat: repeat;
+
+    background-size: map-get($baseline, 4) map-get($baseline, 4);
+    @include guide;
+    background-image:
+        repeating-linear-gradient(cyan 0 1px, transparent 1px 100%);
+}
+
+.guide_baseline { @include guide_baseline; }
+
+
+.baseline-grid {
+    @include guide;
+
+        background-image:
+    // -webkit-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
+    -webkit-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(56,255,255,.8) 100%);
+
+
+        background-image:
+        // -moz-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
+        -moz-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(56,255,255,.8) 100%);
+        background-image:
+        // -o-linear-gradient(0deg, rgba(200,0,0,.2) 40px, transparent 40px),
+        -o-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(56,255,255,.8) 100%);
+
+        background-size: 100% 100%, 100% 100%;
+        // background-size: 60px 100%, 100% 22px;
+        // background-position: 10px 0px;
+}
+
+
+
+// .guide_graph {
+//   @include guide;
+//   background-image:
+//     repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
+//     repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
+//   }
+
+// .guide_baseline {
+//   @include guide;
+//   background-image:
+//     repeating-linear-gradient(cyan 0 2px, transparent 2px 100%);
+// }
+
+.page {
+    border: $q*2 solid red;
+}
+
+
+$body-width: 960px;
+$baseline: 22px;
+@mixin baseline-grid {
+	$columns: 16;
+	$column-color: rgba(200,0,0,.2);
+	$baseline-color: rgba(56,255,255,.8);
+	
+	// These are all automatically calculated
+	$gutter-width: 20px;  // Change if you like
+	$gutters: ($columns - 1);
+	$column-width: calc($body-width / $columns);
+	
+	background-image: -webkit-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
+							-webkit-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
+	background-image: -moz-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
+							-moz-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
+	background-image: -o-linear-gradient(0deg, $column-color $column-width, transparent $gutter-width),
+							-o-linear-gradient(top, rgba(0,0,0,0) 95%, $baseline-color 100%);
+	background-size: ($column-width + $gutter-width) 100%, 100% $baseline;
+	background-position: 10px 0px; // Use to offset and center your grid
+}
+
+// Example call
+.baseline-grid {
+}

package/scss/utilities/_index.scss

@@ -0,0 +1,6 @@
+// ============================================================================
+// Utilities | Main
+// ============================================================================
+
+
+// @forward "guides";

package/scss/variables/_color.scss

@@ -0,0 +1,83 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Color Variables Module
+/// ===========================================================================
+/// 
+/// These colors are used for visual guides such as grid overlays, baselines, 
+/// and alignment guides. The colors are defined with varying levels of opacity 
+/// to ensure they are visible yet non-intrusive on the design.
+/// 
+/// @group Color
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+
+// ============================================================================
+// Variables
+// ============================================================================
+
+$guide_color: rgba(50, 50, 50, 0.25);
+$guide_color_2: rgba(178, 51, 170, 0.5);
+
+
+///
+/// Primary Guide Color
+/// ---------------------------------------------------------------------------
+/// 
+/// Neutral gray for general guide overlays
+/// 
+$guide_color_primary: rgba(50, 50, 50, 0.25);
+
+///
+/// Secondary Guide Color
+/// ---------------------------------------------------------------------------
+/// 
+/// Highlight color for key guides or emphasis
+/// 
+$guide_color_secondary: rgba(178, 51, 170, 0.5);
+
+///
+/// Tertiary Guide Color (Extended)
+/// ---------------------------------------------------------------------------
+///
+/// A warm orange for alternate guide markings
+/// 
+$guide_color_tertiary: rgba(255, 102, 0, 0.3);
+
+///
+/// Quaternary Guide Color (Extended)
+/// ---------------------------------------------------------------------------
+/// 
+/// A cool blue for additional grid or alignment lines
+/// 
+$guide_color_quaternary: rgba(0, 102, 255, 0.3);
+
+/// 
+/// Light Guide Color (Extended)
+/// ---------------------------------------------------------------------------
+/// 
+/// Light color for subtle or background guides
+/// 
+$guide_color_light: rgba(255, 255, 255, 0.2);
+
+///
+/// Dark Guide Color (Extended)
+/// ---------------------------------------------------------------------------
+/// 
+/// Dark color for use on lighter backgrounds
+/// 
+$guide_color_dark: rgba(0, 0, 0, 0.2);