unit.gl 0.0.35 → 0.0.39

package/scss/_reset.scss

@@ -1,22 +1,8 @@
-// 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
-
-// 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 | Reset
 // ============================================================================
 
+// Reset margin and padding for all elements
 @mixin reset_bleed {
     margin:               0;
     margin-block-start:   0;
@@ -24,8 +10,14 @@
     margin-inline-start:  0;
     margin-inline-end:    0;
     padding:              0;
+    border: 0; // Ensures no borders are applied unless explicitly defined
+    font-size: 100%; // Prevent scaling issues by setting default font size
+    font: inherit; // Ensures fonts are consistently inherited from parent elements
+    vertical-align: baseline; // Aligns elements to the baseline to avoid layout shifts
 }
 
+
+// Apply the reset mixin to all elements
 *,
 a,
 abbr,
@@ -153,6 +145,12 @@ wbr
     @include reset_bleed;
 }
 
+// HTML5 display-role reset for older browsers
+// Ensures HTML5 elements are displayed correctly in older browsers
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+    display: block;
+}
 
 // html, body, div, span, applet, object, iframe,
 // h1, h2, h3, h4, h5, h6, p, blockquote, pre,

package/scss/classes/_guide.scss

@@ -0,0 +1,126 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Guide Class Module
+/// ===========================================================================
+/// 
+/// This module creates utility classes for visual guides, such as grid
+/// overlays and baseline grids, using predefined mixins. These classes can
+/// be applied directly in your HTML for rapid prototyping or debugging.
+/// 
+/// Dependencies:
+/// - Mixins from the Guides module
+/// 
+/// @group Guides
+/// @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
+// ============================================================================
+
+/// 
+/// Applies a full-page guide overlay with a high z-index.
+/// 
+/// @name guide_overlay
+/// 
+.guide {
+    @include guide;
+}
+.guide_overlay {
+    @include guide;
+}
+
+/// 
+/// Applies a grid overlay with a customizable grid size and color.
+/// 
+/// @name guide_graph
+/// 
+/// @example HTML
+///   <div class="guide_graph"></div>
+/// 
+.guide_graph {
+    @include guide_graph($rhythm_base); // Default size, customize as needed
+}
+
+
+/// 
+/// Applies a baseline grid overlay to maintain vertical rhythm.
+/// 
+/// @name guide_baseline
+/// 
+/// @example HTML
+///   <div class="guide_baseline"></div>
+/// 
+.guide_baseline {
+    @include guide_baseline($line_height_base); // Default size, customize as needed
+}
+
+
+/// 
+/// Applies a full baseline grid with both vertical and horizontal lines.
+/// 
+/// @name baseline_grid
+/// 
+/// @example HTML
+///   <div class="baseline-grid"></div>
+/// 
+.baseline_grid {
+    @include baseline_grid(60px, 24px); // Default sizes, customize as needed
+}
+
+
+/// 
+/// Creates a centered guide box for alignment checks.
+/// 
+/// @name guide_centered
+/// 
+/// @example HTML
+///   <div class="guide_centered"></div>
+/// 
+.guide_centered {
+    @include guide_centered(200px, 200px); // Default size, customize as needed
+}
+
+
+/// 
+/// Visualizes the margin area around content.
+/// 
+/// @name guide_margin
+/// 
+/// @example HTML
+///   <div class="guide_margin"></div>
+/// 
+.guide_margin {
+    @include guide_margin(20px); // Default margin size, customize as needed
+}
+
+
+/// 
+/// Visualizes a larger margin area around content.
+/// 
+/// @name guide_margin)_wide
+/// 
+/// @example HTML
+///   <div class="guide_margin_wide"></div>
+/// 
+.guide_margin_wide {
+    @include guide_margin(40px); // Wider margin size, customize as needed
+}

package/scss/classes/_index.scss

@@ -1,17 +1,31 @@
-// Copyright 2024 Scape Agency BV
+// ============================================================================
+// Poster
+// ============================================================================
 
-// 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
+////
+/// 
+/// Class Module
+/// ===========================================================================
+/// 
+/// @group Classes
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
 
-// 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
+// ============================================================================
 
 
+// ============================================================================
+// Forward
+// ============================================================================
 
-@forward "paper";
+/// Forwarding modules for global access
+@forward "ratio";
+// @forward "guide";

package/scss/classes/_ratio.scss

@@ -0,0 +1,30 @@
+// ============================================================================
+// 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
+// ============================================================================

package/scss/dev/_banner.scss

@@ -1,7 +1,36 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Dev Functions Module
+/// ===========================================================================
+/// 
+/// @group Dev
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+
+// ============================================================================
+// Variables
+// ============================================================================
+
+
 /**
 * unit.gl
 *
-* @description     Layout Engine
+* @description     Dynamic Layout Engine
 * @author          Scape Agency (https://www.scape.agency)
 * @version         v1.0.0
 * @copyright       2020-2024 Scape Agency (https://www.scape.agency)

package/scss/functions/_color.scss

@@ -0,0 +1,40 @@
+// ============================================================================
+// 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
+// ============================================================================
+
+
+// ============================================================================
+// Functions
+// ============================================================================
+
+
+/// 
+/// Function to Retrieve Guide Colors (Optional for Flexibility)
+/// ---------------------------------------------------------------------------
+/// 
+@function guide_color($name) {
+    @return map-get($guide_colors, $name);
+}

package/scss/functions/_index.scss

@@ -1,22 +1,45 @@
-// Copyright 2024 Scape Agency BV
+// ============================================================================
+// Poster
+// ============================================================================
 
-// 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
+////
+/// 
+/// Functions Module
+/// ===========================================================================
+/// 
+/// This module serves as a central hub for all core SCSS functions used across
+/// the project. By forwarding various function modules, it allows for
+/// consistent access to utilities like mathematical operations, ratio
+/// calculations, scaling utilities, sequence generation, and unit handling.
+///
+/// Forwarded Modules:
+/// - math:    Core mathematical operations and utilities.
+/// - ratio:   Functions for handling and calculating various ratios.
+/// - scale:   Utilities for implementing modular scales in responsive design.
+/// - sequence: Functions for generating and working with numeric sequences.
+/// - unit:    Functions for unit conversions and calculations.
+/// 
+/// @group Functions
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
 
-// 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
+// ============================================================================
 
 
-@forward "ratio";
-@forward "arithmetic";
-@forward "scale";
-@forward "sequence";
+// ============================================================================
+// Forward
+// ============================================================================
 
-@forward "unit_conversion";
-@forward "unit_functions";
+@forward "math";              // Core mathematical operations and utilities
+@forward "ratio";             // Functions for handling and calculating ratios
+@forward "scale";             // Scaling utilities for responsive design
+@forward "sequence";          // Functions for numeric sequence generation
+@forward "unit";              // Functions for unit conversion and calculations

package/scss/functions/_layer.scss

@@ -0,0 +1,48 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Layer Functions Module
+/// ===========================================================================
+/// 
+/// @group Layer
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+
+// ============================================================================
+// Functions
+// ============================================================================
+
+
+
+///
+/// Z-Index Layer Function
+/// ---------------------------------------------------------------------------
+/// 
+/// This function retrieves the z-index value from the $layers map based on
+/// the provided layer name. If the layer is not found, a warning is issued.
+///
+/// @name z
+/// @param {String} $layer - The name of the layer to retrieve the z-index for.
+/// @return {Number | Null} - The z-index value associated with the layer, or null if not found.
+/// 
+@function z($layer) {
+    @if not map-has-key($layers, $layer) {
+        @warn "Layer `#{$layer}` not found in the $layers map. z-index property omitted.";
+        @return null;
+    }
+    @return map-get($layers, $layer);
+}