unit.gl 0.0.39 → 0.1.1

package/README.md

@@ -4,7 +4,6 @@
 <h1 align="center" style='border-bottom: none;'>unit.gl</h1>
 <h3 align="center">Dynamic Layout Engine</h3>
 
-
 <br/>
 
 <div align="center">

package/css/unit.gl.css

@@ -133,51 +133,21 @@ wbr {
   vertical-align: baseline;
 }
 
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, main {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+main {
   display: block;
 }
 
-html {
-  box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
-  word-break: normal;
-  -moz-tab-size: 4;
-  tab-size: 4;
-  height: 100%;
-}
-
-body {
-  min-height: 100%;
-  margin: 0;
-  position: absolute;
-  height: 100vh;
-  width: 100vw;
-}
-
-html, body {
-  height: 100%;
-  margin: 0;
-}
-
-*,
-::before,
-::after {
-  background-repeat: no-repeat;
-  box-sizing: inherit;
-}
-
-::before,
-::after {
-  text-decoration: inherit;
-  vertical-align: inherit;
-}
-
-* {
-  padding: 0;
-  margin: 0;
-}
-
 .ratio_1x1 {
   aspect-ratio: 1;
   width: 100%;
@@ -399,4 +369,46 @@ html {
     font-size: 24px;
   }
 }
+
+html {
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  word-break: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+     tab-size: 4;
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  position: absolute;
+  height: 100vh;
+  width: 100vw;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+*,
+::before,
+::after {
+  background-repeat: no-repeat;
+  box-sizing: inherit;
+}
+
+::before,
+::after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
 /*# sourceMappingURL=to.css.map */

package/css/unit.gl.min.css

@@ -1,2 +1,2 @@
-*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{border:0;font-size:100%;font:inherit;margin:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}.ratio_1x1{aspect-ratio:1}.ratio_1x1,.ratio_1x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x2{aspect-ratio:.5}.ratio_2x1{aspect-ratio:2}.ratio_1x3,.ratio_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x3{aspect-ratio:.3333333333}.ratio_3x1{aspect-ratio:3}.ratio_1x4,.ratio_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x4{aspect-ratio:.25}.ratio_4x1{aspect-ratio:4}.ratio_3x2,.ratio_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_3x2{aspect-ratio:1.5}.ratio_2x3{aspect-ratio:.6666666667}.ratio_2x3,.ratio_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_4x3{aspect-ratio:1.3333333333}.ratio_3x4{aspect-ratio:.75}.ratio_16x9,.ratio_3x4{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_16x9{aspect-ratio:1.7777777778}.ratio_16x10{aspect-ratio:1.6}.ratio_16x10,.ratio_p_1x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_1x1{padding-bottom:100%}.ratio_p_1x2{padding-bottom:200%}.ratio_p_1x2,.ratio_p_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x1{padding-bottom:50%}.ratio_p_1x3{padding-bottom:300%}.ratio_p_1x3,.ratio_p_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x1{padding-bottom:33.33%}.ratio_p_1x4{padding-bottom:400%}.ratio_p_1x4,.ratio_p_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_4x1{padding-bottom:25%}.ratio_p_3x2{padding-bottom:66.67%}.ratio_p_2x3,.ratio_p_3x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x3{padding-bottom:150%}.ratio_p_4x3{padding-bottom:75%}.ratio_p_3x4,.ratio_p_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x4{padding-bottom:133.33%}.ratio_p_16x9{padding-bottom:56.25%}.ratio_p_16x10,.ratio_p_16x9{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_16x10{padding-bottom:62.5%}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(8.57143px + 1.07143vw)}}@media screen and (min-width:1440px){html{font-size:24px}}
+*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{border:0;font-size:100%;font:inherit;margin:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}.ratio_1x1{aspect-ratio:1}.ratio_1x1,.ratio_1x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x2{aspect-ratio:.5}.ratio_2x1{aspect-ratio:2}.ratio_1x3,.ratio_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x3{aspect-ratio:.3333333333}.ratio_3x1{aspect-ratio:3}.ratio_1x4,.ratio_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x4{aspect-ratio:.25}.ratio_4x1{aspect-ratio:4}.ratio_3x2,.ratio_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_3x2{aspect-ratio:1.5}.ratio_2x3{aspect-ratio:.6666666667}.ratio_2x3,.ratio_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_4x3{aspect-ratio:1.3333333333}.ratio_3x4{aspect-ratio:.75}.ratio_16x9,.ratio_3x4{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_16x9{aspect-ratio:1.7777777778}.ratio_16x10{aspect-ratio:1.6}.ratio_16x10,.ratio_p_1x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_1x1{padding-bottom:100%}.ratio_p_1x2{padding-bottom:200%}.ratio_p_1x2,.ratio_p_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x1{padding-bottom:50%}.ratio_p_1x3{padding-bottom:300%}.ratio_p_1x3,.ratio_p_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x1{padding-bottom:33.33%}.ratio_p_1x4{padding-bottom:400%}.ratio_p_1x4,.ratio_p_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_4x1{padding-bottom:25%}.ratio_p_3x2{padding-bottom:66.67%}.ratio_p_2x3,.ratio_p_3x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x3{padding-bottom:150%}.ratio_p_4x3{padding-bottom:75%}.ratio_p_3x4,.ratio_p_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x4{padding-bottom:133.33%}.ratio_p_16x9{padding-bottom:56.25%}.ratio_p_16x10,.ratio_p_16x9{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_16x10{padding-bottom:62.5%}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(8.57143px + 1.07143vw)}}@media screen and (min-width:1440px){html{font-size:24px}}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}
 /*# sourceMappingURL=to.css.map */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unit.gl",
-  "version": "0.0.39",
+  "version": "0.1.1",
   "description": "Dynamic Layout Engine.",
   "keywords": [
     "unit.gl",
@@ -19,12 +19,6 @@
   ],
   "license": "MIT",
   "homepage": "https://www.unit.gl/",
-  "funding": [
-    {
-      "type": "github",
-      "url": "https://github.com/sponsors/scape-foundation"
-    }
-  ],
   "main": "js/index.js",
   "types": "js/index.d.ts",
   "files": [
@@ -48,19 +42,5 @@
     "tex/**/*.tex",
     "ts/**/*.ts",
     "!.DS_Store"
-  ],
-  "author": "Lars van Vianen <lars@vianen.com> (https://www.vianen.com)",
-  "contributors": [
-    "Scape Agency <info@scape.agency>"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/stylescape/unit.gl.git"
-  },
-  "exports": {
-    ".": {
-      "sass": "./scss/index.scss",
-      "typescript": "./ts/index.scss"
-    }
-  }
+  ]
 }

package/scss/_reset.scss

@@ -4,19 +4,18 @@
 
 // Reset margin and padding for all elements
 @mixin reset_bleed {
-    margin:               0;
-    margin-block-start:   0;
-    margin-block-end:     0;
-    margin-inline-start:  0;
-    margin-inline-end:    0;
-    padding:              0;
+    margin: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    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,
@@ -118,7 +117,7 @@ section,
 select,
 small,
 source,
-span, 
+span,
 strike,
 strong,
 style,
@@ -140,15 +139,24 @@ u,
 ul,
 var,
 video,
-wbr 
-{ 
+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 {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+main {
     display: block;
 }
 

package/scss/classes/_guide.scss

@@ -3,27 +3,26 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// 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
 // ============================================================================
@@ -31,16 +30,15 @@
 @use "../variables" as *;
 @use "../mixins" as *;
 
-
 // ============================================================================
 // Classes
 // ============================================================================
 
-/// 
+///
 /// Applies a full-page guide overlay with a high z-index.
-/// 
+///
 /// @name guide_overlay
-/// 
+///
 .guide {
     @include guide;
 }
@@ -48,79 +46,76 @@
     @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
+    @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/_guides.scss

@@ -0,0 +1,141 @@
+@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, 0.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, 0.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, 0.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, 0.2);
+    $baseline-color: rgba(56, 255, 255, 0.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/classes/_index.scss

@@ -3,25 +3,23 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Class Module
 /// ===========================================================================
-/// 
+///
 /// @group Classes
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
 
-
 // ============================================================================
 // Forward
 // ============================================================================

package/scss/classes/_ratio.scss

@@ -3,20 +3,19 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// Ratio Class Module
 /// ===========================================================================
-/// 
+///
 /// @group Ratio
 /// @author Scape Agency
 /// @link https://unit.gl
 /// @since 0.1.0 initial release
 /// @todo None
 /// @access public
-/// 
+///
 ////
 
-
 // ============================================================================
 // Use
 // ============================================================================
@@ -24,7 +23,6 @@
 @use "../variables" as *;
 @use "../mixins" as *;
 
-
 // ============================================================================
 // Classes
 // ============================================================================

package/scss/dev/_banner.scss

@@ -3,30 +3,27 @@
 // ============================================================================
 
 ////
-/// 
+///
 /// 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
 *
@@ -37,4 +34,4 @@
 * @website         https://www.unit.gl/
 * @repository      https://github.com/scape-agency/unit.gl/
 * @license         Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
-*/
+*/

package/scss/dev/_index.scss

@@ -0,0 +1,7 @@
+// ============================================================================
+// Use
+// ============================================================================
+
+// ============================================================================
+// Forward
+// ============================================================================