diff --git a/dist/README.md b/dist/README.md index 6538f97..ad3d84f 100644 --- a/dist/README.md +++ b/dist/README.md @@ -4,7 +4,6 @@

unit.gl

Dynamic Layout Engine

-
diff --git a/dist/css/unit.gl.css b/dist/css/unit.gl.css index f35488c..b981a15 100644 --- a/dist/css/unit.gl.css +++ b/dist/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 */ \ No newline at end of file diff --git a/dist/css/unit.gl.min.css b/dist/css/unit.gl.min.css index ebff93f..2ecdbdd 100644 --- a/dist/css/unit.gl.min.css +++ b/dist/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 */ \ No newline at end of file diff --git a/dist/package.json b/dist/package.json index 5c9c1ac..8136410 100644 --- a/dist/package.json +++ b/dist/package.json @@ -1,6 +1,6 @@ { "name": "unit.gl", - "version": "0.0.40", + "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 (https://www.vianen.com)", - "contributors": [ - "Scape Agency " - ], - "repository": { - "type": "git", - "url": "git+https://github.com/stylescape/unit.gl.git" - }, - "exports": { - ".": { - "sass": "./scss/index.scss", - "typescript": "./ts/index.scss" - } - } + ] } \ No newline at end of file diff --git a/dist/scss/_reset.scss b/dist/scss/_reset.scss index ed4bd80..e10e087 100644 --- a/dist/scss/_reset.scss +++ b/dist/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; } diff --git a/dist/scss/classes/_guide.scss b/dist/scss/classes/_guide.scss index f5aea3c..dc78d40 100644 --- a/dist/scss/classes/_guide.scss +++ b/dist/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 ///
-/// +/// .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 ///
-/// +/// .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 ///
-/// +/// .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 ///
-/// +/// .guide_centered { @include guide_centered(200px, 200px); // Default size, customize as needed } - -/// +/// /// Visualizes the margin area around content. -/// +/// /// @name guide_margin -/// +/// /// @example HTML ///
-/// +/// .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 ///
-/// +/// .guide_margin_wide { @include guide_margin(40px); // Wider margin size, customize as needed } diff --git a/dist/scss/classes/_guides.scss b/dist/scss/classes/_guides.scss new file mode 100644 index 0000000..a2409f0 --- /dev/null +++ b/dist/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 { +} diff --git a/dist/scss/classes/_index.scss b/dist/scss/classes/_index.scss index 8d7c4c7..58776da 100644 --- a/dist/scss/classes/_index.scss +++ b/dist/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 // ============================================================================ diff --git a/dist/scss/classes/_ratio.scss b/dist/scss/classes/_ratio.scss index dc5b49b..180ccaa 100644 --- a/dist/scss/classes/_ratio.scss +++ b/dist/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 // ============================================================================ diff --git a/dist/scss/dev/_banner.scss b/dist/scss/dev/_banner.scss index 760f29f..a68a009 100644 --- a/dist/scss/dev/_banner.scss +++ b/dist/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) -*/ \ No newline at end of file +*/ diff --git a/dist/scss/dev/_index.scss b/dist/scss/dev/_index.scss index e69de29..0f4604a 100644 --- a/dist/scss/dev/_index.scss +++ b/dist/scss/dev/_index.scss @@ -0,0 +1,7 @@ +// ============================================================================ +// Use +// ============================================================================ + +// ============================================================================ +// Forward +// ============================================================================ diff --git a/dist/scss/functions/_color.scss b/dist/scss/functions/_color.scss index c1a19f1..f0e4564 100644 --- a/dist/scss/functions/_color.scss +++ b/dist/scss/functions/_color.scss @@ -3,38 +3,35 @@ // ============================================================================ //// -/// +/// /// 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 +/// +/// 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); } diff --git a/dist/scss/functions/_index.scss b/dist/scss/functions/_index.scss index 2c2d536..c7dc10b 100644 --- a/dist/scss/functions/_index.scss +++ b/dist/scss/functions/_index.scss @@ -3,10 +3,10 @@ // ============================================================================ //// -/// +/// /// 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 @@ -18,28 +18,35 @@ /// - 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 -/// +/// //// - // ============================================================================ // Use // ============================================================================ - // ============================================================================ // Forward // ============================================================================ -@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 +// Core mathematical operations and utilities +@forward "math"; + +// Functions for handling and calculating ratios +@forward "ratio"; + +// Scaling utilities for responsive design +@forward "scale"; + +// Functions for numeric sequence generation +@forward "sequence"; + +// Functions for unit conversion and calculations +@forward "unit"; diff --git a/dist/scss/functions/_layer.scss b/dist/scss/functions/_layer.scss index 9e82801..cc51b4f 100644 --- a/dist/scss/functions/_layer.scss +++ b/dist/scss/functions/_layer.scss @@ -3,46 +3,42 @@ // ============================================================================ //// -/// +/// /// 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); -} \ No newline at end of file +} diff --git a/dist/scss/functions/_ratio.scss b/dist/scss/functions/_ratio.scss index 3386abb..deac664 100644 --- a/dist/scss/functions/_ratio.scss +++ b/dist/scss/functions/_ratio.scss @@ -3,47 +3,44 @@ // ============================================================================ //// -/// +/// /// Ratio Functions Module /// =========================================================================== -/// -/// This module provides functions for calculating sizes based on well-known -/// mathematical ratios, such as the golden ratio. These functions are useful -/// for maintaining harmonious proportions in design elements like spacing, +/// +/// This module provides functions for calculating sizes based on well-known +/// mathematical ratios, such as the golden ratio. These functions are useful +/// for maintaining harmonious proportions in design elements like spacing, /// typography, and layout. -/// +/// /// @group Ratio /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ - // ============================================================================ // Functions // ============================================================================ - /// /// Golden Ratio Function /// --------------------------------------------------------------------------- -/// +/// /// Calculates a size using the golden ratio (approximately 1.618), which is /// widely used in design for its aesthetically pleasing proportions. -/// +/// /// @name ratio_golden /// @param {Number} $size - The base size to scale. /// @param {Number} $increment - The exponent applied to the golden ratio, default is 1. /// @return {Number} - The calculated size based on the golden ratio. -/// +/// /// @example scss - Usage Example /// // Increase size using the golden ratio /// .element { @@ -54,17 +51,17 @@ /// .small-element { /// width: golden_ratio(16px, -1); // Output: 9.888px /// } -/// +/// @function ratio_golden($size, $increment: 1) { $golden-ratio: 1.618; // Validate the input size - @if not unitless($size) and type-of($size) != 'number' { + @if not unitless($size) and type-of($size) != "number" { @error "The size parameter must be a valid number or unitless value."; } // Validate the increment - @if type-of($increment) != 'number' { + @if type-of($increment) != "number" { @error "The increment parameter must be a valid number."; } diff --git a/dist/scss/functions/_scale.scss b/dist/scss/functions/_scale.scss index 35cf62b..e97f60a 100644 --- a/dist/scss/functions/_scale.scss +++ b/dist/scss/functions/_scale.scss @@ -3,62 +3,64 @@ // ============================================================================ //// -/// +/// /// Scale Functions Module /// =========================================================================== -/// +/// /// This module defines various scales used for designing harmonious layouts /// and typographies, including musical scales and a classic typographic scale. /// It also provides a function to calculate values based on a modular scale, /// which is essential for maintaining consistent design proportions. -/// +/// /// @group Scale /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ - // ============================================================================ // Functions // ============================================================================ - /// /// Modular Scale Function /// --------------------------------------------------------------------------- -/// +/// /// Calculates sizes (like font-size, spacing) based on a modular /// scale. This helps maintain harmonious proportions across a design. -/// +/// /// @name modular_scale /// @param {Number} $increment - The step on the scale, can be positive or negative. /// @param {Number} $base - The base value to scale from, defaults to 1em (typographic base size). /// @param {Number} $ratio - The ratio to use for scaling, defaults to the Golden Ratio (1.618). /// @return {Number} - The calculated value based on the modular scale. -/// -@function modular_scale($increment: 1, $base: 1em, $ratio: 1.618) { - // Validate inputs - @if type-of($increment) != 'number' { +/// +@function modular_scale( + $increment: 1, + $base: 1em, + $ratio: 1.618 +) { + + // Validate inputs + @if type-of($increment) != "number" { @error "Step must be a number."; } - - @if type-of($base) != 'number' and not unitless($base) { + + @if type-of($base) != "number" and not unitless($base) { @error "Base must be a number with or without units."; } - - @if type-of($ratio) != 'number' or $ratio <= 0 { + + @if type-of($ratio) != "number" or $ratio <= 0 { @error "Ratio must be a positive number."; } - + // Calculate the modular scale value @return $base * pow($ratio, $increment); } diff --git a/dist/scss/functions/_sequence.scss b/dist/scss/functions/_sequence.scss index 8d47ff9..41118a8 100644 --- a/dist/scss/functions/_sequence.scss +++ b/dist/scss/functions/_sequence.scss @@ -3,98 +3,99 @@ // ============================================================================ //// -/// +/// /// Sequence Functions Module /// =========================================================================== -/// -/// This module provides various functions to calculate terms in well-known -/// mathematical sequences such as Fibonacci, Lucas, Prime numbers, and more. -/// Each function is designed to compute the nth term in the respective +/// +/// This module provides various functions to calculate terms in well-known +/// mathematical sequences such as Fibonacci, Lucas, Prime numbers, and more. +/// Each function is designed to compute the nth term in the respective /// sequence using a straightforward algorithm. -/// +/// /// @group Sequence /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ - // ============================================================================ // Functions // ============================================================================ - /// /// Fibonacci Number Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the nth Fibonacci number using a recursive approach. -/// Fibonacci numbers form a sequence where each number is the sum of the two +/// Fibonacci numbers form a sequence where each number is the sum of the two /// preceding ones, starting with 0 and 1. -/// +/// /// @name sequence_fibonacci /// @param {Number} $n - The position in the Fibonacci sequence to calculate. /// @return {Number} - The nth Fibonacci number. -/// - @function sequence_fibonacci($n) { +/// +@function sequence_fibonacci($n) { @if $n < 0 { @warn "Index #{$n} is not valid for the Fibonacci sequence."; @return null; } - @if $n == 0 { @return 0; } - @else if $n == 1 { @return 1; } - @else { + @if $n == 0 { + @return 0; + } @else if $n == 1 { + @return 1; + } @else { @return sequence_fibonacci($n - 1) + sequence_fibonacci($n - 2); } } - /// /// Lucas Number Sequence /// --------------------------------------------------------------------------- /// /// Calculates the nth Lucas number using a recursive approach. -/// Lucas numbers form a sequence similar to Fibonacci numbers but start with +/// Lucas numbers form a sequence similar to Fibonacci numbers but start with /// 2 and 1 instead of 0 and 1. -/// +/// /// @name sequence_lucas /// @param {Number} $n - The position in the Lucas sequence to calculate. /// @return {Number} - The nth Lucas number. -/// +/// @function sequence_lucas($n) { @if $n < 0 { @warn "Index #{$n} is not valid for the Lucas sequence."; @return null; } - @if $n == 0 { @return 2; } - @else if $n == 1 { @return 1; } - @else { + @if $n == 0 { + @return 2; + } @else if $n == 1 { + @return 1; + } @else { @return sequence_lucas($n - 1) + sequence_lucas($n - 2); } } - /// /// Prime Number Check /// --------------------------------------------------------------------------- -/// +/// /// Checks if a number is prime. -/// A prime number is a natural number greater than 1 that has no positive +/// A prime number is a natural number greater than 1 that has no positive /// divisors other than 1 and itself. /// @name is_prime /// @param {Number} $n - The number to check. /// @return {Boolean} - `true` if the number is prime, `false` otherwise. -/// +/// @function is_prime($n) { - @if $n <= 1 { @return false; } + @if $n <= 1 { + @return false; + } @for $i from 2 through math.sqrt($n) { @if $n % $i == 0 { @return false; @@ -103,18 +104,17 @@ @return true; } - /// /// Factorial /// --------------------------------------------------------------------------- -/// +/// /// Calculates the factorial of a number. /// Factorial is the product of all positive integers up to a given number. -/// +/// /// @name factorial /// @param {Number} $n - The number to calculate the factorial for. /// @return {Number} - The factorial of $n. -/// +/// @function factorial($n) { $result: 1; @for $i from 1 through $n { @@ -126,31 +126,30 @@ /// /// Catalan Number Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the nth Catalan number. -/// Catalan numbers are a sequence of natural numbers with applications in +/// Catalan numbers are a sequence of natural numbers with applications in /// combinatorial mathematics, such as counting certain types of lattice paths. -/// +/// /// @name sequence_catalan /// @param {Number} $n - The position in the Catalan sequence to calculate. /// @return {Number} - The nth Catalan number. -/// +/// @function sequence_catalan($n) { @return factorial(2 * $n) / (factorial($n + 1) * factorial($n)); } - /// /// Harmonic Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the nth term of the harmonic series. /// The harmonic series is the sum of the reciprocals of the positive integers. -/// +/// /// @name sequence_harmonic /// @param {Number} $n - The position in the harmonic series to calculate. /// @return {Number} - The nth term of the harmonic series. -/// +/// @function sequence_harmonic($n) { @if $n <= 0 { @warn "Index #{$n} is not valid for the harmonic series."; @@ -159,19 +158,18 @@ @return 1 / $n; } - /// /// Geometric Sequence /// ---------------------------------------------------------------------------- -/// +/// /// Calculates the nth term of a geometric series with a ratio of 2. -/// A geometric series has a constant ratio between successive terms. +/// A geometric series has a constant ratio between successive terms. /// This function calculates the nth term for a series where each term doubles. -/// +/// /// @name sequence_geometric /// @param {Number} $n - The position in the geometric series to calculate. /// @return {Number} - The nth term of the geometric series. -/// +/// @function sequence_geometric($n) { @if $n < 0 { @warn "Negative index #{$n} is not valid for the geometric series."; @@ -180,18 +178,17 @@ @return pow(2, $n - 1); } - /// /// Superfactorial Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the superfactorial of a number. /// The superfactorial of a number n is the product of the first n factorials. -/// +/// /// @name sequence_superfactorial /// @param {Number} $n - The number to calculate the superfactorial for. /// @return {Number} - The superfactorial of $n. -/// +/// @function sequence_superfactorial($n) { $result: 1; @for $i from 1 through $n { @@ -204,18 +201,17 @@ @return $result; } - /// /// Triangular Number Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the nth triangular number. /// Triangular numbers are the sum of the first n natural numbers. -/// +/// /// @name sequence_triangular /// @param {Number} $n - The position in the triangular series to calculate. /// @return {Number} - The nth triangular number. -/// +/// @function sequence_triangular($n) { @if $n <= 0 { @warn "Index #{$n} is not valid for the triangular series."; @@ -224,19 +220,18 @@ @return $n * ($n + 1) / 2; } - /// /// Square Number Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the nth square number. -/// Square numbers are numbers that can be expressed as the product of an +/// Square numbers are numbers that can be expressed as the product of an /// integer with itself (n²). -/// +/// /// @name sequence_square /// @param {Number} $n - The position in the square series to calculate. /// @return {Number} - The nth square number. -/// +/// @function sequence_square($n) { @if $n < 0 { @warn "Negative index #{$n} is not valid for the square series."; @@ -245,18 +240,17 @@ @return $n * $n; } - /// /// Pentagonal Number Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the nth pentagonal number. /// Pentagonal numbers are figurate numbers that represent a pentagon. -/// +/// /// @name sequence_pentagonal /// @param {Number} $n - The position in the pentagonal series to calculate. /// @return {Number} - The nth pentagonal number. -/// +/// @function sequence_pentagonal($n) { @if $n <= 0 { @warn "Index #{$n} is not valid for the pentagonal series."; @@ -265,18 +259,17 @@ @return (3 * $n * $n - $n) / 2; } - /// /// Hexagonal Number Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the nth hexagonal number. /// Hexagonal numbers are figurate numbers that represent a hexagon. -/// +/// /// @name sequence_hexagonal /// @param {Number} $n - The position in the hexagonal series to calculate. /// @return {Number} - The nth hexagonal number. -/// +/// @function sequence_hexagonal($n) { @if $n <= 0 { @warn "Index #{$n} is not valid for the hexagonal series."; @@ -285,18 +278,17 @@ @return 2 * $n * $n - $n; } - /// /// Cube Number Sequence /// --------------------------------------------------------------------------- -/// +/// /// Calculates the nth cube number. /// Cube numbers are numbers raised to the power of three (n³). -/// +/// /// @name sequence_cube /// @param {Number} $n - The position in the cube series to calculate. /// @return {Number} - The nth cube number. -/// +/// @function sequence_cube($n) { @if $n < 0 { @warn "Negative index #{$n} is not valid for the cube series."; diff --git a/dist/scss/functions/_view.scss b/dist/scss/functions/_view.scss index d5544c4..4c05fe2 100644 --- a/dist/scss/functions/_view.scss +++ b/dist/scss/functions/_view.scss @@ -3,38 +3,35 @@ // ============================================================================ //// -/// +/// /// View Functions Module /// =========================================================================== -/// +/// /// @group View /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ - // ============================================================================ // Functions // ============================================================================ - -/// +/// /// A function to calculate breakpoints based on a multiplier of the base /// screen unit. -/// +/// /// @name calc_breakpoint /// @param {Number} $multiplier - The multiplier to apply to the base unit. /// @return {Length} The calculated breakpoint value in pixels. -/// +/// @function calc_breakpoint($base_screen_unit, $multiplier) { @return $base_screen_unit * $multiplier; } diff --git a/dist/scss/functions/math/_arithmetic.scss b/dist/scss/functions/math/_arithmetic.scss index 9d02816..5937610 100644 --- a/dist/scss/functions/math/_arithmetic.scss +++ b/dist/scss/functions/math/_arithmetic.scss @@ -3,57 +3,51 @@ // ============================================================================ //// -/// +/// /// Math Functions Module /// =========================================================================== -/// -/// These functions allow for arithmetic operations on values with or without -/// units, ensuring compatibility and proper handling of CSS units. When units +/// +/// These functions allow for arithmetic operations on values with or without +/// units, ensuring compatibility and proper handling of CSS units. When units /// are mismatched, a warning is issued, and the operation returns null. /// /// Functions: /// - add: Adds two values, handling units appropriately. /// - subtract: Subtracts one value from another, with unit handling. -/// +/// /// @group Math /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ - // ============================================================================ // Functions // ============================================================================ - -/// +/// /// Adds two values, handling units appropriately. -/// +/// /// This function performs arithmetic addition on two values, ensuring that /// units are properly handled. If both values are unitless, they are added /// directly. -/// If one value has a unit and the other is unitless, the unitless value is -/// treated as having the same unit as the other value. If both values have -/// units, they must be the same unit; otherwise, a warning is issued and +/// If one value has a unit and the other is unitless, the unitless value is +/// treated as having the same unit as the other value. If both values have +/// units, they must be the same unit; otherwise, a warning is issued and /// `null` is returned. -/// +/// /// @param {Number} $value1 - The first value, which may or may not include units. /// @param {Number} $value2 - The second value, which may or may not include units. /// @return {Number} - The sum of the two values, or null if the units are incompatible. -/// -@function add( - $value1, - $value2 -) { +/// +@function add($value1, $value2) { @if unitless($value1) and unitless($value2) { @return $value1 + $value2; } @else if unitless($value1) { @@ -70,23 +64,20 @@ /// /// Subtracts one value from another, handling units appropriately. -/// +/// /// This function performs arithmetic subtraction on two values, ensuring that /// units are properly handled. If both values are unitless, they are /// subtracted directly. -/// If one value has a unit and the other is unitless, the unitless value is -/// treated as having the same unit as the other value. If both values have -/// units, they must be the same unit; otherwise, a warning is issued and +/// If one value has a unit and the other is unitless, the unitless value is +/// treated as having the same unit as the other value. If both values have +/// units, they must be the same unit; otherwise, a warning is issued and /// `null` is returned. -/// +/// /// @param {Number} $value1 - The first value, which may or may not include units. /// @param {Number} $value2 - The second value, which may or may not include units. /// @return {Number} - The difference between the two values, or null if the units are incompatible. -/// -@function subtract( - $value1, - $value2 -) { +/// +@function subtract($value1, $value2) { @if unitless($value1) and unitless($value2) { @return $value1 - $value2; } @else if unitless($value1) { diff --git a/dist/scss/functions/math/_index.scss b/dist/scss/functions/math/_index.scss index 3551db6..9aa4d13 100644 --- a/dist/scss/functions/math/_index.scss +++ b/dist/scss/functions/math/_index.scss @@ -3,28 +3,25 @@ // ============================================================================ //// -/// +/// /// Math Functions Module /// =========================================================================== -/// +/// /// @group Math /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ - // ============================================================================ // Forward // ============================================================================ - -@forward "arithmetic"; // Basic arithmetic operations +@forward "arithmetic"; // Basic arithmetic operations diff --git a/dist/scss/functions/unit/_index.scss b/dist/scss/functions/unit/_index.scss index ed1b87b..c5ceedc 100644 --- a/dist/scss/functions/unit/_index.scss +++ b/dist/scss/functions/unit/_index.scss @@ -3,28 +3,29 @@ // ============================================================================ //// -/// +/// /// Unit Functions Module /// =========================================================================== -/// +/// /// @group Unit /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ - // ============================================================================ // Forward // ============================================================================ -@forward "unit_conversion"; // Unit conversion functions -@forward "unit_functions"; // Additional utility functions for units \ No newline at end of file +// Unit conversion functions +@forward "unit_conversion"; + +// Additional utility functions for units +@forward "unit_functions"; diff --git a/dist/scss/functions/unit/_unit_conversion.scss b/dist/scss/functions/unit/_unit_conversion.scss index d3ea185..7118425 100644 --- a/dist/scss/functions/unit/_unit_conversion.scss +++ b/dist/scss/functions/unit/_unit_conversion.scss @@ -3,61 +3,68 @@ // ============================================================================ //// -/// +/// /// Unit Functions Module /// =========================================================================== -/// +/// /// @group Unit /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +/// Base font-size for the document +$base-font-size: 16px !default; + + // ============================================================================ // Functions // ============================================================================ - - - - /// Unit Conversion Functions /// --------------------------------------------------------------------------- /// Create functions to convert between different measurement units, such as /// pixels to rem, em to pixels, etc. -@function px_to_rem($size, $base: 16px) { +@function px_to_rem( + $size, + $base: 16px +) { @return $size / $base * 1rem; } -@function rem_to_px($size, $base: 16px) { +@function rem_to_px( + $size, + $base: 16px +) { @return $size * $base; } -@function em_to_px($size, $context: 16px) { +@function em_to_px( + $size, + $context: 16px +) { @return $size * $context; } -@function px_to_em($size, $context: 16px) { +@function px_to_em( + $size, + $context: 16px +) { @return $size / $context * 1em; } - -/// Base font-size for the document -$base-font-size: 16px !default; - /// Validate that the input is a pixel value -@function validate-px($value) { - @if unit($value) != 'px' { +@function validate_px($value) { + @if unit($value) != "px" { @error "Expected a pixel value, but got `#{$value}`."; } @return $value; @@ -65,30 +72,36 @@ $base-font-size: 16px !default; /// Convert pixels to rem @function px_to_rem($size) { - $validated-size: validate-px($size); - @return $validated-size / $base-font-size * 1rem; + $validated_size: validate_px($size); + @return $validated_size / $base-font-size * 1rem; } /// Convert rem to pixels @function rem_to_px($size) { - @if unit($size) != 'rem' { + @if unit($size) != "rem" { @error "Expected a rem value, but got `#{$size}`."; } @return $size * $base-font-size; } /// Convert em to pixels -@function em_to_px($size, $context: $base-font-size) { - $validated-context: validate-px($context); - @if unit($size) != 'em' { +@function em_to_px( + $size, + $context: $base-font-size +) { + $validated_context: validate_px($context); + @if unit($size) != "em" { @error "Expected an em value, but got `#{$size}`."; } - @return $size * $validated-context; + @return $size * $validated_context; } /// Convert pixels to em -@function px_to_em($size, $context: $base-font-size) { - $validated-size: validate-px($size); - $validated-context: validate-px($context); - @return $validated-size / $validated-context * 1em; +@function px_to_em( + $size, + $context: $base-font-size +) { + $validated_size: validate_px($size); + $validated_context: validate_px($context); + @return $validated_size / $validated_context * 1em; } diff --git a/dist/scss/functions/unit/_unit_functions.scss b/dist/scss/functions/unit/_unit_functions.scss index c785fb9..ff2e5fa 100644 --- a/dist/scss/functions/unit/_unit_functions.scss +++ b/dist/scss/functions/unit/_unit_functions.scss @@ -3,83 +3,96 @@ // ============================================================================ //// -/// +/// /// Unit Functions Module /// =========================================================================== -/// +/// /// @group Unit /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +@use "sass:meta"; +@use "sass:math"; +@use "sass:string"; // ============================================================================ // Functions // ============================================================================ - -/// +/// /// Strip Unit Function /// --------------------------------------------------------------------------- -/// +/// /// Removes the unit from a numerical value, ensuring compatibility with various SCSS versions. -/// +/// /// @param {Number} $value - The numerical value with or without a unit. /// @return {Number} - The raw numerical value without its unit, or the original value if unitless or non-numerical. -/// +/// @function unit_strip($value) { // Check if the input is a number with a unit - @if type-of($value) == "number" and not unitless($value) { + @if meta.type-of($value)=="number" and not math.is-unitless($value) { + // Convert the value to a string - $value-str: inspect($value); + // $value-str: inspect($value); + $value-str: meta.inspect($value); + // Remove the unit part from the string - $value-no-unit: str-slice( + $value-no-unit: string.slice( $value-str, 1, - str-index($value-str, unit($value)) - 1 + string.index($value-str, math.unit($value)) - 1 ); + // Return the number without its unit @return $value-no-unit; + } @else if type-of($value) != "number" { + // Handle non-number inputs gracefully // @warn "Input `#{$value}` is not a number. Returning value as-is."; @return $value; } + // Return the value as-is for unitless numbers or non-number inputs @return $value; } - /// /// Linear Interpolation Function /// --------------------------------------------------------------------------- -/// +/// /// Interpolates linearly between two values across a range, useful for /// fluid scaling. -/// +/// /// @param {Number} $start - Starting value at the lower bound (can include units). /// @param {Number} $end - Ending value at the upper bound (can include units). /// @param {Number} $min - Lower bound for interpolation (must be unitless or in 'px'). /// @param {Number} $max - Upper bound for interpolation (must be unitless or in 'px'). /// @param {Number} $actual - Current value to interpolate (default is 100vw). /// @return {Number} - Interpolated value (in the same units as $start and $end). -/// -@function linear_interpolation($start, $end, $min, $max, $actual: 100vw) { +/// +@function linear_interpolation( + $start, + $end, + $min, + $max, + $actual: 100vw +) { // Validate parameters - @if unitless($min) == false and unit($min) != 'px' { + @if unitless($min) == false and unit($min) != "px" { @error "Parameter `$min` must be unitless or in 'px'."; } - @if unitless($max) == false and unit($max) != 'px' { + @if unitless($max) == false and unit($max) != "px" { @error "Parameter `$max` must be unitless or in 'px'."; } @if $max <= $min { @@ -106,27 +119,25 @@ // Return the `calc` expression @return $value; - } - /// /// Clamp-based Responsive Typography Function /// --------------------------------------------------------------------------- -/// +/// /// Calculates font size using clamp-based responsive typography. -/// +/// /// @param {Number} $_font_size_min - Minimum font size. /// @param {Number} $_font_size_max - Maximum font size. /// @param {Number} $_viewport_width_min - Minimum viewport width where scaling starts. /// @param {Number} $_viewport_width_max - Maximum viewport width where scaling stops. /// @return {Number} - Calculated size using clamp. -/// +/// @function scale_dynamic_clamp( $_viewport_width_min, $_viewport_width_max, $_font_size_min, - $_font_size_max, + $_font_size_max ) { @return clamp( $_font_size_min, @@ -140,8 +151,6 @@ ); } - - /// Fluid Typography Mixin /// --------------------------------------------------------------------------- /// Mixin: fluid_type @@ -189,28 +198,27 @@ // } // } - /// /// Dynamic Scaling Function /// --------------------------------------------------------------------------- -/// +/// /// Calculates font size dynamically based on viewport width, allowing for /// fluid scaling. -/// +/// /// @param {Number} $_viewport_width_min - Minimum viewport width where scaling starts. /// @param {Number} $_viewport_width_max - Maximum viewport width where scaling stops. /// @param {Number} $_font_size_min - Minimum font size. /// @param {Number} $_font_size_max - Maximum font size. /// @param {Number} $_current_width - Current viewport width. /// @return {Number} - The calculated font size based on the current width, or null if units are inconsistent. -/// +/// @function scale_dynamic( $_viewport_width_min, $_viewport_width_max, $_font_size_min, $_font_size_max, - $_current_width, - ) { + $_current_width +) { // Ensure the units are consistent // $u1: unit($_viewport_width_min); // $u2: unit($_viewport_width_max); @@ -224,15 +232,19 @@ // Validate unit consistency @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { // Check if the current width is within the specified range - @if $_current_width >= $_viewport_width_min and $_current_width <= $_viewport_width_max { - // Calculate and return the interpolated font size - @return linear_interpolation( - $_font_size_min, - $_font_size_max, - $_viewport_width_min, - $_viewport_width_max, - 100vw - ); + @if $_current_width >= + $_viewport_width_min and + $_current_width <= + $_viewport_width_max + { + // Calculate and return the interpolated font size + @return linear_interpolation( + $_font_size_min, + $_font_size_max, + $_viewport_width_min, + $_viewport_width_max, + 100vw + ); } @else if $_current_width < $_viewport_width_min { // Return the minimum font size @return $_font_size_min; diff --git a/dist/scss/index.scss b/dist/scss/index.scss index 9d1bb20..b5fb202 100644 --- a/dist/scss/index.scss +++ b/dist/scss/index.scss @@ -3,7 +3,6 @@ @use "sass:math"; @forward "reset"; -@forward "global"; @forward "functions"; @forward "variables"; diff --git a/dist/scss/maps/_color.scss b/dist/scss/maps/_color.scss index 8227555..8de6e5a 100644 --- a/dist/scss/maps/_color.scss +++ b/dist/scss/maps/_color.scss @@ -3,28 +3,28 @@ // ============================================================================ //// -/// -/// Color Variables Module +/// +/// Color Maps 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 +/// +/// 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 // ============================================================================ +@use "../variables" as *; // ============================================================================ // Maps @@ -32,12 +32,12 @@ /// Color Set for Easy Adjustments /// --------------------------------------------------------------------------- -/// +/// $guide_colors: ( - "primary": $guide_color_primary, - "secondary": $guide_color_secondary, - "tertiary": $guide_color_tertiary, + "primary": $guide_color_primary, + "secondary": $guide_color_secondary, + "tertiary": $guide_color_tertiary, "quaternary": $guide_color_quaternary, - "light": $guide_color_light, - "dark": $guide_color_dark, + "light": $guide_color_light, + "dark": $guide_color_dark ); diff --git a/dist/scss/maps/_index.scss b/dist/scss/maps/_index.scss index 17c6519..cbfacf6 100644 --- a/dist/scss/maps/_index.scss +++ b/dist/scss/maps/_index.scss @@ -1 +1,27 @@ +// ============================================================================ +// Poster +// ============================================================================ + +//// +/// +/// Maps Module +/// =========================================================================== +/// +/// +/// @author Scape Agency +/// @link https://unit.gl +/// @since 0.1.0 initial release +/// @todo None +/// @access public +/// +//// + +// ============================================================================ +// Use +// ============================================================================ + +// ============================================================================ +// Forward +// ============================================================================ + @forward "color"; diff --git a/dist/scss/mixins/_device.scss b/dist/scss/mixins/_device.scss index eeae5ae..23d13bd 100644 --- a/dist/scss/mixins/_device.scss +++ b/dist/scss/mixins/_device.scss @@ -3,45 +3,44 @@ // ============================================================================ //// -/// +/// /// Device Mixins Module /// =========================================================================== -/// +/// /// @group Device /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +@use "../functions" as *; @use "../variables" as *; - +@use "../maps" as *; // ============================================================================ // Mixins // ============================================================================ - -/// +/// /// Creates a media query based on device attributes defined in the `$devices` /// map. The media query supports min-width, max-width, and pixel-ratio. -/// +/// /// @name device_media_query /// @param {String} $device - The key name of the device in the $devices map. /// @content Styles to be applied within the media query. -/// +/// /// @example scss - Usage /// @include device-media-query('iphone-6') { /// // Styles specific to iPhone 6 /// } -/// +/// @mixin device_media_query($device) { // Retrieve the device attributes from the $devices map $attributes: map-get($devices, $device); diff --git a/dist/scss/mixins/_display.scss b/dist/scss/mixins/_display.scss index 02d2a5c..97922ba 100644 --- a/dist/scss/mixins/_display.scss +++ b/dist/scss/mixins/_display.scss @@ -3,50 +3,49 @@ // ============================================================================ //// -/// +/// /// Display Mixins Module /// =========================================================================== -/// +/// /// These mixins provide a convenient way to apply styles based on device /// orientation and display characteristics such as aspect ratio and pixel /// density. They are essential for creating responsive designs that adapt /// seamlessly to different device configurations, especially on mobile /// devices. -/// +/// /// @group Display /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +@use "../functions" as *; @use "../variables" as *; - +@use "../maps" as *; // ============================================================================ // Mixins // ============================================================================ - -/// +/// /// Applies styles when the device is in landscape mode. An optional /// minimum width can be specified to target specific breakpoints. -/// +/// /// @name display-orientation-landscape /// @param {Length} $min-width (optional) - The minimum width at which the styles should apply. -/// +/// /// @example scss - Usage /// @include display-orientation-landscape(1024px) { /// // Styles for landscape orientation and min-width 1024px /// } -/// +/// @mixin display_orientation_landscape($min-width: null) { @if $min-width { @media (orientation: landscape) and (min-width: $min-width) { @@ -54,27 +53,27 @@ } } @else { @media (orientation: landscape) { - @content; // The styles inside this mixin are applied in landscape mode + // The styles inside this mixin are applied in landscape mode + @content; } } } - /// /// Mixin for portrait orientation with optional breakpoint /// --------------------------------------------------------------------------- -/// +/// /// Applies styles when the device is in portrait mode. An optional /// minimum width can be specified to target specific breakpoints. -/// +/// /// @name display-orientation-portrait /// @param {Length} $min-width (optional) - The minimum width at which the styles should apply. -/// +/// /// @example scss - Usage /// @include display-orientation-portrait(768px) { /// // Styles for portrait orientation and min-width 768px /// } -/// +/// @mixin display_orientation_portrait($min-width: null) { @if $min-width { @media (orientation: portrait) and (min-width: $min-width) { @@ -87,20 +86,42 @@ } } +/// +/// Mixin for High-Density (Retina) Displays +/// --------------------------------------------------------------------------- +/// +/// Targets high-density displays, such as Retina screens, using various +/// methods to ensure broad compatibility across devices. +/// +/// @name display_retina +/// +/// @example scss - Usage +/// @include display-retina { +/// // Styles for high-density displays +/// } +/// +// @mixin display_retina { +// // Webkit-based browsers +// @media only screen and (-webkit-min-device-pixel-ratio: 2), +// // Standard way to target high-resolution displays only screen and (min-resolution: 192dpi), +// // For devices with a high-resolution in dots per inch only screen and (min-resolution: 2dppx) { +// @content; // Styles for high-density displays +// } +// } -/// +/// /// Mixin for targeting specific aspect ratios /// --------------------------------------------------------------------------- -/// -/// Applies styles based on a specific aspect ratio. This mixin is +/// +/// Applies styles based on a specific aspect ratio. This mixin is /// useful for targeting devices or elements that have a particular -/// aspect ratio, ensuring that your design adapts perfectly to +/// aspect ratio, ensuring that your design adapts perfectly to /// screens of varying shapes and sizes. -/// -/// @name aspect_ratio +/// +/// @name display_ratio /// @param {Number} $width - The width component of the aspect ratio. /// @param {Number} $height - The height component of the aspect ratio. -/// +/// /// @example scss - Basic Usage /// @include aspect_ratio(16, 9) { /// // Styles for devices with a 16:9 aspect ratio @@ -108,7 +129,7 @@ /// max-width: 100%; /// } /// } -/// +/// /// @example scss - Complex Usage /// // Apply styles for both 16:9 and 4:3 aspect ratios /// @include aspect_ratio(16, 9), aspect_ratio(4, 3) { @@ -117,35 +138,9 @@ /// padding: 20px; /// } /// } -/// -@mixin aspect_ratio($width, $height) { - @media (aspect-ratio: #{$width} / #{$height}) { - @content; - } -} - - -/// -/// Mixin for High-Density (Retina) Displays -/// --------------------------------------------------------------------------- -/// -/// Targets high-density displays, such as Retina screens, using various -/// methods to ensure broad compatibility across devices. -/// -/// @name display_retina -/// -/// @example scss - Usage -/// @include display-retina { -/// // Styles for high-density displays -/// } -/// -@mixin display_retina { - // Webkit-based browsers - @media only screen and (-webkit-min-device-pixel-ratio: 2), - // Standard way to target high-resolution displays - only screen and (min-resolution: 192dpi), - // For devices with a high-resolution in dots per inch - only screen and (min-resolution: 2dppx) { - @content; // Styles for high-density displays - } -} +/// +// @mixin display_ratio($width, $height) { +// @media (aspect-ratio: #{$width} / #{$height}) { +// @content; +// } +// } diff --git a/dist/scss/mixins/_guide.scss b/dist/scss/mixins/_guide.scss index d532eb0..fe83c40 100644 --- a/dist/scss/mixins/_guide.scss +++ b/dist/scss/mixins/_guide.scss @@ -3,10 +3,10 @@ // ============================================================================ //// -/// +/// /// Guide Mixins Module /// =========================================================================== -/// +/// /// This module provides mixins for creating visual guides, such as grid /// overlays and baseline grids, to assist in design alignment and consistency. // @@ -17,40 +17,39 @@ /// @todo None /// @requires "../variables" - for accessing project-specific variables. /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +@use "../functions" as *; @use "../variables" as *; - +@use "../maps" as *; // ============================================================================ // Mixins // ============================================================================ - -/// +/// /// Guide Mixin /// --------------------------------------------------------------------------- -/// -/// Creates a full-page guide overlay with a high z-index to ensure +/// +/// Creates a full-page guide overlay with a high z-index to ensure /// visibility over other elements. -/// +/// /// @name guide -/// +/// /// @example scss - Usage /// .guide { /// @include guide; /// } -/// +/// @mixin guide { z-index: z("guides"); -// @mixin guide($z-index: 9999) { -// z-index: $z-index; + // @mixin guide($z-index: 9999) { + // z-index: $z-index; position: absolute; top: 0; left: 0; @@ -62,63 +61,50 @@ // background-size: $baseline_04 $baseline_04; } - - -/// +/// /// Guide Graph Mixin /// --------------------------------------------------------------------------- -/// +/// /// Generates a grid overlay with customizable grid size and color, /// useful for ensuring consistent spacing and alignment in your designs. -/// +/// /// @name guide_graph /// @param {Length} $size - The size of the grid cells. /// @param {Color} $color - The color of the grid lines. Defaults to `$guide_color`. -/// +/// /// @example scss - Usage /// .guide_graph { /// @include guide_graph(10px, #ccc); /// } -/// -@mixin guide_graph( - $size, - $color: $guide_color, -) { +/// +@mixin guide_graph($size, $color: $guide_color) { @include guide; background-size: $size $size; background-image: repeating-linear-gradient( - to bottom, - $color 0 1px, - transparent 1px 100% - ), - repeating-linear-gradient( - to right, - $color 0 1px, - transparent 1px 100% - ); + to bottom, + $color 0 1px, + transparent 1px 100% + ), + repeating-linear-gradient(to right, $color 0 1px, transparent 1px 100%); } - -/// +/// /// Guide Baseline Mixin /// --------------------------------------------------------------------------- -/// -/// Creates a baseline grid overlay, essential for maintaining +/// +/// Creates a baseline grid overlay, essential for maintaining /// a consistent vertical rhythm across your designs. -/// +/// /// @name guide_baseline /// @param {Length} $size - The height of the baseline grid. /// @param {Color} $color - The color of the baseline lines. Defaults to cyan. -/// +/// /// @example scss - Usage /// .guide_baseline { /// @include guide_baseline(20px, cyan); /// } -/// -@mixin guide_baseline( - $size, - $color: $guide_color, -) { +/// +@mixin guide_baseline($size, $color: $guide_color) { @include guide; background-size: 100% $size; background-image: repeating-linear-gradient( @@ -128,68 +114,64 @@ ); } - /// /// Baseline Grid Mixin /// --------------------------------------------------------------------------- -/// +/// /// Provides a customizable baseline grid overlay with both vertical /// and horizontal grid lines, useful for designing layouts with consistent /// column widths and baseline spacing. -/// +/// /// @name guide_baseline /// @param {Length} $column_width - The width of each column in the grid. /// @param {Length} $baseline_height - The height of each baseline. /// @param {Color} $column_color - The color of the column lines. Defaults to rgba(200, 0, 0, 0.2). /// @param {Color} $baseline_color - The color of the baseline lines. Defaults to rgba(56, 255, 255, 0.8). -/// +/// /// @example scss - Usage /// .guide_baseline { /// @include guide_baseline(60px, 20px); /// } -/// +/// @mixin guide_baseline( $column_width, $baseline_height, $column_color: rgba(200, 0, 0, 0.2), - $baseline_color: $guide_color, + $baseline_color: $guide_color ) { background-image: linear-gradient( - to right, - $column_color 0 $column_width, - transparent $column_width transparent - ), - linear-gradient( - to bottom, - transparent calc(100% - 1px), - $baseline_color 100% - ); - background-size: $column_width 100%, 100% $baseline_height; + to right, + $column_color 0 $column_width, + transparent $column_width transparent + ), + linear-gradient( + to bottom, + transparent calc(100% - 1px), + $baseline_color 100% + ); + background-size: + $column_width 100%, + 100% $baseline_height; } - /// /// Centered Guide Mixin /// --------------------------------------------------------------------------- -/// +/// /// Creates a centered guide box useful for ensuring elements are /// aligned to the center of the viewport. -/// +/// /// @name guide_centered /// @param {Length} $width - The width of the centered guide box. /// @param {Length} $height - The height of the centered guide box. /// @param {Color} $color - The color of the guide box border. Defaults to red. -/// +/// /// @example scss - Usage /// .guide_centered { /// @include guide_centered(100px, 100px, red); /// } -/// -@mixin guide_centered( - $width, - $height, - $color: red -) { +/// +@mixin guide_centered($width, $height, $color: red) { @include guide; width: $width; height: $height; @@ -199,27 +181,23 @@ border: 2px solid $color; } - -/// +/// /// Margin Guide Mixin /// --------------------------------------------------------------------------- -/// +/// /// Visualizes the margins around content, helping to ensure /// consistent spacing. -/// +/// /// @name guide_margin /// @param {Length} $margin - The size of the margin to visualize. /// @param {Color} $color - The color of the margin area. Defaults to rgba(0, 255, 0, 0.1). -/// +/// /// @example scss - Usage /// .guide_margin { /// @include guide_margin(20px, rgba(0, 255, 0, 0.1)); /// } -/// -@mixin guide_margin( - $margin, - $color: rgba(0, 255, 0, 0.1) -) { +/// +@mixin guide_margin($margin, $color: rgba(0, 255, 0, 0.1)) { @include guide; top: $margin; left: $margin; diff --git a/dist/scss/mixins/_helper.scss b/dist/scss/mixins/_helper.scss index 9b7f19b..9425204 100644 --- a/dist/scss/mixins/_helper.scss +++ b/dist/scss/mixins/_helper.scss @@ -3,71 +3,68 @@ // ============================================================================ //// -/// +/// /// Helper Mixins Module /// =========================================================================== -/// +/// /// This module provides a collection of utility mixins for common CSS /// properties like width, height, font size, padding, margin, and border /// properties. These mixins leverage a `q()` function (presumably defined /// elsewhere) to standardize the application of units across the project, /// promoting consistency and scalability. -/// +/// /// @group Helper /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +@use "../functions" as *; @use "../variables" as *; - +@use "../maps" as *; // ============================================================================ // Mixins // ============================================================================ - // Dimensions // ============================================================================ - -/// +/// /// Sets the width of an element using the provided value. -/// +/// /// @name set_width /// @group Dimensions /// @param {Length} $value - The width value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_width(100px); /// } -/// +/// @mixin set_width($value) { @include q($value, width); } - -/// +/// /// Sets the height of an element using the provided value. -/// +/// /// @name set_height /// @group Dimensions /// @param {Length} $value - The height value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_height(200px); /// } -/// +/// @mixin set_height($value) { @include q($value, height); } @@ -75,53 +72,50 @@ // TYPOGRAPHY // ---------------------------------------------------------------------------- - -/// +/// /// Sets the font size of an element using the provided value. -/// +/// /// @name set_font-size /// @group Typography /// @param {Length} $value - The font size value to apply. -/// +/// /// @example scss - Usage /// .text { /// @include set_font-size(16px); /// } -/// +/// @mixin set_font-size($value) { @include q($value, font-size); } - -/// +/// /// Sets the line height of an element using the provided value. -/// +/// /// @name set_line_height /// @group Typography /// @param {Length} $value - The line height value to apply. -/// +/// /// @example scss - Usage /// .text { /// @include set_line_height(1.5); /// } -/// +/// @mixin set_line_height($value) { @include q($value, line_height); } - -/// +/// /// Sets the letter spacing of an element using the provided value. /// @name set_letter-spacing -/// +/// /// @group Typography /// @param {Length} $value - The letter spacing value to apply. -/// +/// /// @example scss - Usage /// .text { /// @include set_letter-spacing(0.1em); /// } -/// +/// @mixin set_letter-spacing($value) { @include q($value, letter-spacing); } @@ -129,36 +123,34 @@ // BORDERS // ---------------------------------------------------------------------------- - -/// +/// /// Sets the border width of an element using the provided value. -/// +/// /// @name set_border_width /// @group Borders /// @param {Length} $value - The border width value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_border_width(2px); /// } -/// +/// @mixin set_border_width($value) { @include q($value, border_width); } - -/// +/// /// Sets the border radius of an element using the provided value. -/// +/// /// @name set_border_radius /// @group Borders /// @param {Length} $value - The border radius value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_border_radius(8px); /// } -/// +/// @mixin set_border_radius($value) { @include q($value, border_radius); } @@ -166,87 +158,82 @@ // PADDING // ---------------------------------------------------------------------------- - -/// +/// /// Sets the padding of an element using the provided value. -/// +/// /// @name set_padding /// @group Spacing /// @param {Length} $value - The padding value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_padding(10px); /// } -/// +/// @mixin set_padding($value) { @include q($value, padding); } - -/// +/// /// Sets the top padding of an element using the provided value. -/// +/// /// @name set_padding_top /// @group Spacing /// @param {Length} $value - The padding_top value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_padding_top(10px); /// } -/// +/// @mixin set_padding_top($value) { @include q($value, padding_top); } - -/// +/// /// Sets the right padding of an element using the provided value. -/// +/// /// @name set_padding_right /// @group Spacing /// @param {Length} $value - The padding_right value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_padding_right(10px); /// } -/// +/// @mixin set_padding_right($value) { @include q($value, padding_right); } - -/// +/// /// Sets the bottom padding of an element using the provided value. -/// +/// /// @name set_padding_bottom /// @group Spacing /// @param {Length} $value - The padding_bottom value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_padding_bottom(10px); /// } -/// +/// @mixin set_padding_bottom($value) { @include q($value, padding_bottom); } - -/// +/// /// Sets the left padding of an element using the provided value. -/// +/// /// @name set_padding_left /// @group Spacing /// @param {Length} $value - The padding_left value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_padding_left(10px); /// } -/// +/// @mixin set_padding_left($value) { @include q($value, padding_left); } @@ -254,87 +241,82 @@ // MARGIN // ---------------------------------------------------------------------------- - -/// +/// /// Sets the margin of an element using the provided value. -/// +/// /// @name set_margin /// @group Spacing /// @param {Length} $value - The margin value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_margin(10px); /// } -/// +/// @mixin set_margin($value) { @include q($value, margin); } - -/// +/// /// Sets the top margin of an element using the provided value. -/// +/// /// @name set_margin_top /// @group Spacing /// @param {Length} $value - The margin_top value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_margin_top(10px); /// } -/// +/// @mixin set_margin_top($value) { @include q($value, margin_top); } - -/// +/// /// Sets the right margin of an element using the provided value. -/// +/// /// @name set_margin_right /// @group Spacing /// @param {Length} $value - The margin_right value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_margin_right(10px); /// } -/// +/// @mixin set_margin_right($value) { @include q($value, margin_right); } - -/// +/// /// Sets the bottom margin of an element using the provided value. -/// +/// /// @name set_margin_bottom /// @group Spacing /// @param {Length} $value - The margin_bottom value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_margin_bottom(10px); /// } -/// +/// @mixin set_margin_bottom($value) { @include q($value, margin_bottom); } - -/// +/// /// Sets the left margin of an element using the provided value. -/// +/// /// @name set_margin_left /// @group Spacing /// @param {Length} $value - The margin_left value to apply. -/// +/// /// @example scss - Usage /// .box { /// @include set_margin_left(10px); /// } -/// +/// @mixin set_margin_left($value) { @include q($value, margin_left); } diff --git a/dist/scss/mixins/_index.scss b/dist/scss/mixins/_index.scss index 82b9adc..64b6160 100644 --- a/dist/scss/mixins/_index.scss +++ b/dist/scss/mixins/_index.scss @@ -3,17 +3,17 @@ // ============================================================================ //// -/// +/// /// Mixins Module /// =========================================================================== -/// +/// /// This file centralizes the forwarding of various SCSS partials/modules used /// across the project. By aggregating these forwards, it simplifies imports /// in other parts of the codebase, promoting better modularity and /// organization. -/// +/// /// This module forwards several other modules to streamline imports -/// and maintain a clean, modular structure. Each forwarded module contains +/// and maintain a clean, modular structure. Each forwarded module contains /// specific functionalities, from managing viewports to handling aspect /// ratios. /// @@ -25,32 +25,30 @@ /// - display: Display-related settings and utilities, including typography. /// - guide: Utilities for creating visual guides and overlays. /// - helper: General helper functions and mixins for common tasks. -/// +/// /// @group Mixins /// @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"; -@forward "paper"; // Handles paper sizes and related utilities -@forward "view"; // Manages viewport and breakpoint variables -@forward "ratio"; // Provides aspect ratio utilities -@forward "device"; // Device-specific responsive configurations +@forward "paper"; // Handles paper sizes and related utilities +@forward "view"; // Manages viewport and breakpoint variables +@forward "ratio"; // Provides aspect ratio utilities +@forward "device"; // Device-specific responsive configurations @forward "display"; // Typography and display settings -@forward "guide"; // Visual guide and overlay utilities -@forward "helper"; // General-purpose helper functions and mixins \ No newline at end of file +@forward "guide"; // Visual guide and overlay utilities +@forward "helper"; // General-purpose helper functions and mixins diff --git a/dist/scss/mixins/_paper.scss b/dist/scss/mixins/_paper.scss index 172f831..2f064f8 100644 --- a/dist/scss/mixins/_paper.scss +++ b/dist/scss/mixins/_paper.scss @@ -3,48 +3,47 @@ // ============================================================================ //// -/// +/// /// Paper Mixins Module /// =========================================================================== -/// +/// /// This module provides utilities for applying standard paper sizes to /// elements. The sizes are defined in the $paper-sizes map and can be applied /// using the `set-paper-size` mixin. -/// +/// /// @group Paper /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +@use "../functions" as *; @use "../variables" as *; - +@use "../maps" as *; // ============================================================================ // Mixins // ============================================================================ - -/// +/// /// Applies the width and height of the specified paper size to the /// element. The paper sizes must be predefined in the $paper-sizes map. -/// +/// /// @name set_paper_size /// @param {String} $size - The key representing the paper size in the $paper-sizes map. -/// +/// /// @example scss - Usage /// .document { /// @include set-paper-size('A4'); /// } -/// +/// @mixin set_paper_size($size) { @if map-has-key($paper-sizes, $size) { $size-map: map-get($paper-sizes, $size); diff --git a/dist/scss/mixins/_ratio.scss b/dist/scss/mixins/_ratio.scss index 503136d..34015e4 100644 --- a/dist/scss/mixins/_ratio.scss +++ b/dist/scss/mixins/_ratio.scss @@ -3,10 +3,10 @@ // ============================================================================ //// -/// +/// /// Ratio Mixins Module /// =========================================================================== -/// +/// /// This module provides mixins for creating aspect ratio containers. /// These containers maintain a specific width-to-height ratio, ensuring /// that elements scale proportionally across different screen sizes. @@ -14,35 +14,34 @@ /// There are two approaches provided: one using the `aspect-ratio` CSS /// property, and another using padding percentages for broader browser /// support. -/// +/// /// @group Ratio /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +@use "../functions" as *; @use "../variables" as *; - +@use "../maps" as *; // ============================================================================ // Mixins // ============================================================================ - // Aspect Ratio Box: // Creates a container with a specific aspect ratio. // @mixin aspect-ratio($width, $height) { // position: relative; // &:before { -// content: ''; +// content: ""; // display: block; // padding-top: calc(($height / $width) * 100%); // } @@ -59,8 +58,7 @@ // @include aspect-ratio(16, 9); // } - -@mixin ratio ($val01, $val02) { +@mixin ratio($val01, $val02) { aspect-ratio: calc($val01 / $val02); width: 100%; position: relative; @@ -69,37 +67,87 @@ // vertical-align: top; } -@mixin ratio_1x1 { @include ratio(1, 1); } -@mixin ratio_1x2 { @include ratio(1, 2); } -@mixin ratio_2x1 { @include ratio(2, 1); } -@mixin ratio_1x3 { @include ratio(1, 3); } -@mixin ratio_3x1 { @include ratio(3, 1); } -@mixin ratio_1x4 { @include ratio(1, 4); } -@mixin ratio_4x1 { @include ratio(4, 1); } -@mixin ratio_3x2 { @include ratio(3, 2); } -@mixin ratio_2x3 { @include ratio(2, 3); } -@mixin ratio_4x3 { @include ratio(4, 3); } -@mixin ratio_3x4 { @include ratio(3, 4); } -@mixin ratio_16x9 { @include ratio(16, 9); } -@mixin ratio_16x10 { @include ratio(16, 10); } - -.ratio_1x1 { @include ratio_1x1; } -.ratio_1x2 { @include ratio_1x2; } -.ratio_2x1 { @include ratio_2x1; } -.ratio_1x3 { @include ratio_1x3; } -.ratio_3x1 { @include ratio_3x1; } -.ratio_1x4 { @include ratio_1x4; } -.ratio_4x1 { @include ratio_4x1; } -.ratio_3x2 { @include ratio_3x2; } -.ratio_2x3 { @include ratio_2x3; } -.ratio_4x3 { @include ratio_4x3; } -.ratio_3x4 { @include ratio_3x4; } -.ratio_16x9 { @include ratio_16x9; } -.ratio_16x10 { @include ratio_16x10; } - - - -@mixin ratio_p ($val01) { +@mixin ratio_1x1 { + @include ratio(1, 1); +} +@mixin ratio_1x2 { + @include ratio(1, 2); +} +@mixin ratio_2x1 { + @include ratio(2, 1); +} +@mixin ratio_1x3 { + @include ratio(1, 3); +} +@mixin ratio_3x1 { + @include ratio(3, 1); +} +@mixin ratio_1x4 { + @include ratio(1, 4); +} +@mixin ratio_4x1 { + @include ratio(4, 1); +} +@mixin ratio_3x2 { + @include ratio(3, 2); +} +@mixin ratio_2x3 { + @include ratio(2, 3); +} +@mixin ratio_4x3 { + @include ratio(4, 3); +} +@mixin ratio_3x4 { + @include ratio(3, 4); +} +@mixin ratio_16x9 { + @include ratio(16, 9); +} +@mixin ratio_16x10 { + @include ratio(16, 10); +} + +.ratio_1x1 { + @include ratio_1x1; +} +.ratio_1x2 { + @include ratio_1x2; +} +.ratio_2x1 { + @include ratio_2x1; +} +.ratio_1x3 { + @include ratio_1x3; +} +.ratio_3x1 { + @include ratio_3x1; +} +.ratio_1x4 { + @include ratio_1x4; +} +.ratio_4x1 { + @include ratio_4x1; +} +.ratio_3x2 { + @include ratio_3x2; +} +.ratio_2x3 { + @include ratio_2x3; +} +.ratio_4x3 { + @include ratio_4x3; +} +.ratio_3x4 { + @include ratio_3x4; +} +.ratio_16x9 { + @include ratio_16x9; +} +.ratio_16x10 { + @include ratio_16x10; +} + +@mixin ratio_p($val01) { padding-bottom: $val01; width: 100%; position: relative; @@ -108,39 +156,88 @@ // vertical-align: top; } -@mixin ratio_p_1x1 { @include ratio_p(100.00%); } -@mixin ratio_p_1x2 { @include ratio_p(200.00%); } -@mixin ratio_p_2x1 { @include ratio_p( 50.00%); } -@mixin ratio_p_1x3 { @include ratio_p(300.00%); } -@mixin ratio_p_3x1 { @include ratio_p( 33.33%); } -@mixin ratio_p_1x4 { @include ratio_p(400.00%); } -@mixin ratio_p_4x1 { @include ratio_p( 25.00%); } -@mixin ratio_p_2x3 { @include ratio_p(150.00%); } -@mixin ratio_p_3x2 { @include ratio_p( 66.67%); } -@mixin ratio_p_3x4 { @include ratio_p(133.33%); } -@mixin ratio_p_4x3 { @include ratio_p( 75.00%); } -@mixin ratio_p_16x9 { @include ratio_p( 56.25%); } -@mixin ratio_p_16x10 { @include ratio_p( 62.50%); } - -.ratio_p_1x1 { @include ratio_p_1x1; } -.ratio_p_1x2 { @include ratio_p_1x2; } -.ratio_p_2x1 { @include ratio_p_2x1; } -.ratio_p_1x3 { @include ratio_p_1x3; } -.ratio_p_3x1 { @include ratio_p_3x1; } -.ratio_p_1x4 { @include ratio_p_1x4; } -.ratio_p_4x1 { @include ratio_p_4x1; } -.ratio_p_3x2 { @include ratio_p_3x2; } -.ratio_p_2x3 { @include ratio_p_2x3; } -.ratio_p_4x3 { @include ratio_p_4x3; } -.ratio_p_3x4 { @include ratio_p_3x4; } -.ratio_p_16x9 { @include ratio_p_16x9; } -.ratio_p_16x10 { @include ratio_p_16x10; } - - - - - // https://github.com/twbs/bootstrap/blob/main/scss/helpers/_ratio.scss - // Credit: Nicolas Gallagher and SUIT CSS. +@mixin ratio_p_1x1 { + @include ratio_p(100%); +} +@mixin ratio_p_1x2 { + @include ratio_p(200%); +} +@mixin ratio_p_2x1 { + @include ratio_p(50%); +} +@mixin ratio_p_1x3 { + @include ratio_p(300%); +} +@mixin ratio_p_3x1 { + @include ratio_p(33.33%); +} +@mixin ratio_p_1x4 { + @include ratio_p(400%); +} +@mixin ratio_p_4x1 { + @include ratio_p(25%); +} +@mixin ratio_p_2x3 { + @include ratio_p(150%); +} +@mixin ratio_p_3x2 { + @include ratio_p(66.67%); +} +@mixin ratio_p_3x4 { + @include ratio_p(133.33%); +} +@mixin ratio_p_4x3 { + @include ratio_p(75%); +} +@mixin ratio_p_16x9 { + @include ratio_p(56.25%); +} +@mixin ratio_p_16x10 { + @include ratio_p(62.5%); +} + +.ratio_p_1x1 { + @include ratio_p_1x1; +} +.ratio_p_1x2 { + @include ratio_p_1x2; +} +.ratio_p_2x1 { + @include ratio_p_2x1; +} +.ratio_p_1x3 { + @include ratio_p_1x3; +} +.ratio_p_3x1 { + @include ratio_p_3x1; +} +.ratio_p_1x4 { + @include ratio_p_1x4; +} +.ratio_p_4x1 { + @include ratio_p_4x1; +} +.ratio_p_3x2 { + @include ratio_p_3x2; +} +.ratio_p_2x3 { + @include ratio_p_2x3; +} +.ratio_p_4x3 { + @include ratio_p_4x3; +} +.ratio_p_3x4 { + @include ratio_p_3x4; +} +.ratio_p_16x9 { + @include ratio_p_16x9; +} +.ratio_p_16x10 { + @include ratio_p_16x10; +} + +// https://github.com/twbs/bootstrap/blob/main/scss/helpers/_ratio.scss +// Credit: Nicolas Gallagher and SUIT CSS. // .ratio { // position: relative; @@ -167,7 +264,6 @@ // } // } - // @mixin aspect-ratio($width, $height) { // position: relative; @@ -185,4 +281,4 @@ // bottom: 0; // left: 0; // } -// } \ No newline at end of file +// } diff --git a/dist/scss/mixins/_unit.scss b/dist/scss/mixins/_unit.scss index b32901c..e316f7b 100644 --- a/dist/scss/mixins/_unit.scss +++ b/dist/scss/mixins/_unit.scss @@ -3,76 +3,79 @@ // ============================================================================ //// -/// +/// /// 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 *; +@use "sass:math"; +@use "../functions" as *; +@use "../variables" as *; +@use "../maps" 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 +/// @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 + $max_font_size, ) { + // $u1: unit($min_vw); + // $u2: unit($max_vw); + // $u3: unit($min_font_size); + // $u4: unit($max_font_size); - $u1: unit($min_vw); - $u2: unit($max_vw); - $u3: unit($min_font_size); - $u4: unit($max_font_size); + $u1: math.unit($min_vw); + $u2: math.unit($max_vw); + $u3: math.unit($min_font_size); + $u4: math.unit($max_font_size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { & { @@ -80,7 +83,14 @@ @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)}) + #{$min_font_size} + #{unit_strip( + $max_font_size - $min_font_size + )} * + ( + (100vw - #{$min_vw}) / #{unit_strip( + $max_vw - $min_vw + )} + ) ); } diff --git a/dist/scss/mixins/_view.scss b/dist/scss/mixins/_view.scss index dab1dbf..cc478f2 100644 --- a/dist/scss/mixins/_view.scss +++ b/dist/scss/mixins/_view.scss @@ -3,12 +3,12 @@ // ============================================================================ //// -/// +/// /// 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 +/// predefined breakpoints. These mixins allow for a clean, semantic way to /// handle responsive design across different screen sizes. /// /// @group View @@ -16,37 +16,36 @@ /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None -/// @require "../variables" - for access to the $breakpoints map and related variables. +/// @require "../variables" - for access to the $breakpoints map and related +/// variables. /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ @use "../variables" as *; - // ============================================================================ // Mixins // ============================================================================ - -/// -/// Applies styles for the specified breakpoint. If the breakpoint +/// +/// 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. +/// @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)) { @@ -57,102 +56,96 @@ } } - -/// +/// /// 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; } } diff --git a/dist/scss/_global.scss b/dist/scss/tags/_global.scss similarity index 82% rename from dist/scss/_global.scss rename to dist/scss/tags/_global.scss index 99b0140..1739148 100644 --- a/dist/scss/_global.scss +++ b/dist/scss/tags/_global.scss @@ -3,7 +3,8 @@ html { box-sizing: border-box; - -webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS + // Prevent adjustments of font size after orientation changes in iOS + -webkit-text-size-adjust: 100%; word-break: normal; -moz-tab-size: 4; tab-size: 4; @@ -20,21 +21,25 @@ body { width: 100vw; } -html, body { +html, +body { height: 100%; - margin: 0; + margin: 0; } *, ::before, ::after { - background-repeat: no-repeat; // Set `background-repeat: no-repeat` to all elements and pseudo elements + // Set `background-repeat: no-repeat` to all elements and pseudo elements + background-repeat: no-repeat; box-sizing: inherit; } ::before, ::after { - text-decoration: inherit; // Inherit text-decoration and vertical align to ::before and ::after pseudo elements + // Inherit text-decoration and vertical align to ::before + // and ::after pseudo elements + text-decoration: inherit; vertical-align: inherit; } @@ -43,11 +48,8 @@ html, body { margin: 0; } - - - // body { -// font-family: 'Urbanist', sans-serif !important; +// font-family: "Urbanist", sans-serif !important; // font-weight: 500; // font-size: 1rem; // min-height: 100%; @@ -79,7 +81,6 @@ html, body { // // @include font_settings; // // } - // // body { // // @include paragraph_normal; // // } @@ -108,4 +109,4 @@ html, body { // // -webkit-font-smoothing: antialiased; // // -moz-osx-font-smoothing: grayscale; -// } \ No newline at end of file +// } diff --git a/dist/scss/tags/_index.scss b/dist/scss/tags/_index.scss index 9f10d25..f03c8f0 100644 --- a/dist/scss/tags/_index.scss +++ b/dist/scss/tags/_index.scss @@ -3,28 +3,27 @@ // ============================================================================ //// -/// +/// /// 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"; \ No newline at end of file +@forward "unit"; +@forward "global"; diff --git a/dist/scss/tags/_unit.scss b/dist/scss/tags/_unit.scss index ece3180..aefba63 100644 --- a/dist/scss/tags/_unit.scss +++ b/dist/scss/tags/_unit.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,17 +23,11 @@ @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 - ); + @include fluid_type($media_xs, $media_sl, $font_min, $font_max); } diff --git a/dist/scss/utilities/_guides.scss b/dist/scss/utilities/_guides.scss deleted file mode 100644 index 0c8bace..0000000 --- a/dist/scss/utilities/_guides.scss +++ /dev/null @@ -1,103 +0,0 @@ -@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 { -} diff --git a/dist/scss/utilities/_index.scss b/dist/scss/utilities/_index.scss deleted file mode 100644 index 6cdbe58..0000000 --- a/dist/scss/utilities/_index.scss +++ /dev/null @@ -1,6 +0,0 @@ -// ============================================================================ -// Utilities | Main -// ============================================================================ - - -// @forward "guides"; diff --git a/dist/scss/variables/_color.scss b/dist/scss/variables/_color.scss index e56dd56..70b50ce 100644 --- a/dist/scss/variables/_color.scss +++ b/dist/scss/variables/_color.scss @@ -3,21 +3,21 @@ // ============================================================================ //// -/// +/// /// 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 +/// +/// 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 -/// +/// //// @@ -25,7 +25,6 @@ // Use // ============================================================================ - // ============================================================================ // Variables // ============================================================================ @@ -33,21 +32,20 @@ $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); /// @@ -55,29 +53,29 @@ $guide_color_secondary: rgba(178, 51, 170, 0.5); /// --------------------------------------------------------------------------- /// /// 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); diff --git a/dist/scss/variables/_device.scss b/dist/scss/variables/_device.scss index 1a58026..26711cf 100644 --- a/dist/scss/variables/_device.scss +++ b/dist/scss/variables/_device.scss @@ -3,7 +3,7 @@ // ============================================================================ //// -/// +/// /// Device Variables Module /// =========================================================================== /// @@ -11,19 +11,19 @@ /// and pixel ratios, for a variety of devices. This map is structured for /// easy access and modification, ensuring responsive designs that cater to /// a wide range of devices. -/// +/// /// @group Color /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// /// @example scss - Usage Example /// @media (min-width: map-get($devices, "iphone-x")["min-width"]) { /// // Styles specific to iPhone X /// } -/// +/// //// @@ -31,21 +31,19 @@ // Use // ============================================================================ - // ============================================================================ // Variables // ============================================================================ - -/// +/// /// Device Attribute Map /// --------------------------------------------------------------------------- -/// +/// /// A map containing attributes for various devices. Each entry includes the -/// device's minimum and maximum screen widths, as well as the pixel ratio. +/// device"s minimum and maximum screen widths, as well as the pixel ratio. /// The map is divided into categories for smartphones, tablets, and /// desktops/laptops. -/// +/// /// This map contains attributes for various devices, including screen /// dimensions and pixel ratios. It is structured for easy access and /// modification, ensuring responsive designs that cater to a wide range @@ -54,114 +52,222 @@ /// @type Map /// @access public /// @property iPhones - iPhones with varying screen sizes and pixel densities. -/// +/// /// @example scss - Usage Example /// @media (min-width: map-get($devices, "iphone-x")["min-width"]) { /// // Styles specific to iPhone X /// } /// $devices: ( - // Phones // ======================================================================== - // iPhones // ------------------------------------------------------------------------ - - /// iPhones /// iPhones with varying screen sizes and pixel densities. - "iphone-5": ("min-width": 320px, "max-width": 568px, "pixel-ratio": 2.0), - "iphone-6": ("min-width": 375px, "max-width": 667px, "pixel-ratio": 2.0), - "iphone-7": ("min-width": 375px, "max-width": 667px, "pixel-ratio": 2.0), - "iphone-8": ("min-width": 375px, "max-width": 667px, "pixel-ratio": 2.0), - "iphone-x": ("min-width": 375px, "max-width": 812px, "pixel-ratio": 3.0), - "iphone-11": ("min-width": 414px, "max-width": 896px, "pixel-ratio": 2.0), - "iphone-12": ("min-width": 390px, "max-width": 844px, "pixel-ratio": 3.0), - "iphone-13": ("min-width": 428px, "max-width": 926px, "pixel-ratio": 3.0), - + "iphone-5": ( + "min-width": 320px, + "max-width": 568px, + "pixel-ratio": 2, + ), + "iphone-6": ( + "min-width": 375px, + "max-width": 667px, + "pixel-ratio": 2, + ), + "iphone-7": ( + "min-width": 375px, + "max-width": 667px, + "pixel-ratio": 2, + ), + "iphone-8": ( + "min-width": 375px, + "max-width": 667px, + "pixel-ratio": 2, + ), + "iphone-x": ( + "min-width": 375px, + "max-width": 812px, + "pixel-ratio": 3, + ), + "iphone-11": ( + "min-width": 414px, + "max-width": 896px, + "pixel-ratio": 2, + ), + "iphone-12": ( + "min-width": 390px, + "max-width": 844px, + "pixel-ratio": 3, + ), + "iphone-13": ( + "min-width": 428px, + "max-width": 926px, + "pixel-ratio": 3, + ), // Samsung Galaxy // ------------------------------------------------------------------------ - /// iPhones /// iPhones with varying screen sizes and pixel densities. - "samsung-s10": ("min-width": 360px, "max-width": 760px, "pixel-ratio": 3.0), - "samsung-s20": ("min-width": 320px, "max-width": 720px, "pixel-ratio": 4.0), - "samsung-s21": ("min-width": 320px, "max-width": 780px, "pixel-ratio": 3.0), - + "samsung-s10": ( + "min-width": 360px, + "max-width": 760px, + "pixel-ratio": 3, + ), + "samsung-s20": ( + "min-width": 320px, + "max-width": 720px, + "pixel-ratio": 4, + ), + "samsung-s21": ( + "min-width": 320px, + "max-width": 780px, + "pixel-ratio": 3, + ), // Samsung Galaxy Fold // ------------------------------------------------------------------------ - /// Samsung Galaxy Fold /// Samsung Galaxy Fold devices with foldable screens. - "galaxy-fold": ("min-width": 280px, "max-width": 653px, "pixel-ratio": 3.0), - + "galaxy-fold": ( + "min-width": 280px, + "max-width": 653px, + "pixel-ratio": 3, + ), // Google Pixel // ------------------------------------------------------------------------ - /// Google Pixel /// Google Pixel devices with varying screen sizes and pixel densities. - "google-pixel": ("min-width": 411px, "max-width": 731px, "pixel-ratio": 2.6), - "google-pixel-5": ("min-width": 393px, "max-width": 851px, "pixel-ratio": 3.0), - - + "google-pixel": ( + "min-width": 411px, + "max-width": 731px, + "pixel-ratio": 2.6, + ), + "google-pixel-5": ( + "min-width": 393px, + "max-width": 851px, + "pixel-ratio": 3, + ), /// Other Smartphones /// Other popular smartphones with varying screen sizes and pixel densities. - "lg-g6": ("min-width": 360px, "max-width": 720px, "pixel-ratio": 4.0), - "oneplus-7t": ("min-width": 412px, "max-width": 732px, "pixel-ratio": 2.5), - "sony-xperia-1": ("min-width": 384px, "max-width": 643px, "pixel-ratio": 3.0), - "huawei-p30": ("min-width": 360px, "max-width": 780px, "pixel-ratio": 3.0), - "xiaomi-mi9": ("min-width": 393px, "max-width": 851px, "pixel-ratio": 3.0), - + "lg-g6": ( + "min-width": 360px, + "max-width": 720px, + "pixel-ratio": 4, + ), + "oneplus-7t": ( + "min-width": 412px, + "max-width": 732px, + "pixel-ratio": 2.5, + ), + "sony-xperia-1": ( + "min-width": 384px, + "max-width": 643px, + "pixel-ratio": 3, + ), + "huawei-p30": ( + "min-width": 360px, + "max-width": 780px, + "pixel-ratio": 3, + ), + "xiaomi-mi9": ( + "min-width": 393px, + "max-width": 851px, + "pixel-ratio": 3, + ), // Tablets // ======================================================================== - // iPads // ------------------------------------------------------------------------ - - /// iPads - /// Various models of Apple's iPad, including iPad, iPad Pro, iPad Mini, and iPad Air. - "ipad": ("min-width": 768px, "max-width": 1024px, "pixel-ratio": 2.0), - "ipad-pro": ("min-width": 1024px, "max-width": 1366px, "pixel-ratio": 2.0), - "ipad-mini": ("min-width": 768px, "max-width": 1024px, "pixel-ratio": 2.0), - "ipad-air": ("min-width": 820px, "max-width": 1180px, "pixel-ratio": 2.0), - + /// Various models of Apple"s iPad, including iPad, iPad Pro, iPad Mini, and iPad Air. + "ipad": ( + "min-width": 768px, + "max-width": 1024px, + "pixel-ratio": 2, + ), + "ipad-pro": ( + "min-width": 1024px, + "max-width": 1366px, + "pixel-ratio": 2, + ), + "ipad-mini": ( + "min-width": 768px, + "max-width": 1024px, + "pixel-ratio": 2, + ), + "ipad-air": ( + "min-width": 820px, + "max-width": 1180px, + "pixel-ratio": 2, + ), // Microsoft Surface // ------------------------------------------------------------------------ - /// Microsoft Surface - /// Microsoft's Surface devices, including Surface Duo and Surface Pro. - "surface-duo": ("min-width": 540px, "max-width": 720px, "pixel-ratio": 2.5), - "surface-pro": ("min-width": 768px, "max-width": 1366px, "pixel-ratio": 2.0), - + /// Microsoft"s Surface devices, including Surface Duo and Surface Pro. + "surface-duo": ( + "min-width": 540px, + "max-width": 720px, + "pixel-ratio": 2.5, + ), + "surface-pro": ( + "min-width": 768px, + "max-width": 1366px, + "pixel-ratio": 2, + ), // Desktops & Laptops // ======================================================================== - // Desktops & Larger Tablets // ------------------------------------------------------------------------ - /// Desktops & Larger Tablets /// Larger devices like desktops and large tablets. - "amazon-fire-hd": ("min-width": 800px, "max-width": 1280px, "pixel-ratio": 1.5), - "microsoft-laptop": ("min-width": 1504px, "max-width": 2256px, "pixel-ratio": 1.5), - + "amazon-fire-hd": ( + "min-width": 800px, + "max-width": 1280px, + "pixel-ratio": 1.5, + ), + "microsoft-laptop": ( + "min-width": 1504px, + "max-width": 2256px, + "pixel-ratio": 1.5, + ), // Mac Devices // ------------------------------------------------------------------------ - /// Mac Devices /// Various Apple Mac devices, including MacBook Air, MacBook Pro, and iMac. - "macbook-air": ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2.0), - "macbook-pro": ("min-width": 1680px, "max-width": 3072px, "pixel-ratio": 2.0), - "imac": ("min-width": 1920px, "max-width": 5120px, "pixel-ratio": 2.0), + "macbook-air": ( + "min-width": 1440px, + "max-width": 2560px, + "pixel-ratio": 2, + ), + "macbook-pro": ( + "min-width": 1680px, + "max-width": 3072px, + "pixel-ratio": 2, + ), + "imac": ( + "min-width": 1920px, + "max-width": 5120px, + "pixel-ratio": 2, + ), // Additional Devices // ------------------------------------------------------------------------ - /// Other Laptops - /// Other popular laptops, including Surface Book, Dell XPS, and Lenovo ThinkPad. - "surface-book": ("min-width": 1500px, "max-width": 2000px, "pixel-ratio": 2.0), - "dell-xps": ("min-width": 1920px, "max-width": 3840px, "pixel-ratio": 2.0), - "lenovo-thinkpad": ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2.0) - -); \ No newline at end of file + /// Other popular laptops, including Surface Book, Dell XPS, + /// and Lenovo ThinkPad. + "surface-book": ( + "min-width": 1500px, + "max-width": 2000px, + "pixel-ratio": 2, + ), + "dell-xps": ( + "min-width": 1920px, + "max-width": 3840px, + "pixel-ratio": 2, + ), + "lenovo-thinkpad": ( + "min-width": 1440px, + "max-width": 2560px, + "pixel-ratio": 2, + ) +); diff --git a/dist/scss/variables/_index.scss b/dist/scss/variables/_index.scss index 2f97bb8..744ce5c 100644 --- a/dist/scss/variables/_index.scss +++ b/dist/scss/variables/_index.scss @@ -3,15 +3,15 @@ // ============================================================================ //// -/// +/// /// Variables Module /// =========================================================================== -/// +/// /// This module consolidates and forwards SCSS partials that define variables /// for consistent use throughout the project. Each forwarded file encapsulates /// a specific category of variables, ensuring modularity, clarity, and ease of /// maintenance. -/// +/// /// Forwarded Modules Overview: /// - `layer`: Variables related to layout layers and z-indexing. /// - `paper`: Defines color palettes, textures, and backgrounds. @@ -21,14 +21,14 @@ /// - `device`: Device-specific configurations to enhance responsive design. /// - `color`: Centralized color definitions for consistent theming. /// - `ratio`: Aspect ratio configurations for responsive elements. -/// +/// /// @group Variables /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// @@ -42,58 +42,57 @@ // ============================================================================ -/// +/// /// Forwards variables related to layout layers and z-indexing, ensuring /// consistent layering and stacking order throughout the project. -/// +/// @forward "layer"; // Layout layers and z-index variables -/// +/// /// Forwards variables defining paper sizes etc. -/// +/// @forward "paper"; -/// +/// /// Forwards variables managing scaling factors for typography and responsive /// elements, ensuring that elements scale proportionally across different /// viewports. -/// +/// @forward "scale"; // Typography scaling and responsive element sizing -/// +/// /// Forwards viewport-specific variables, such as breakpoints, to facilitate /// responsive design practices. -/// +/// @forward "view"; // Viewport-specific variables and breakpoints -/// +/// /// Forwards device-specific configurations that aid in creating responsive /// designs tailored to various devices. -/// +/// @forward "device"; // Device-specific responsive design variables -/// +/// /// Forwards centralized color definitions, providing a consistent color scheme /// across the project. -/// +/// @forward "color"; // Centralized color definitions for the project -/// +/// /// Forwards aspect ratio configurations that ensure responsive elements /// maintain their intended proportions across different devices and viewports. -/// +/// @forward "ratio"; // Aspect ratio configurations for responsive elements -/// +/// /// Forwards variables related to measurement units, spacing, and size /// definitions. Useful for maintaining consistent sizing across different /// components. -/// +/// @forward "unit"; // Measurement units and spacing - diff --git a/dist/scss/variables/_layer.scss b/dist/scss/variables/_layer.scss index bef5f03..7b50326 100644 --- a/dist/scss/variables/_layer.scss +++ b/dist/scss/variables/_layer.scss @@ -3,17 +3,17 @@ // ============================================================================ //// -/// +/// /// Layer Variables Module /// =========================================================================== -/// +/// /// @group Layer /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// @@ -27,33 +27,33 @@ // ============================================================================ -/// +/// /// Z-Index Layer Map /// --------------------------------------------------------------------------- /// /// A map defining the z-index layers used to manage the stacking order of UI /// elements. Each key in the map represents a specific layer, with an /// associated numeric value indicating its z-index. -/// +/// /// This map defines the z-index layers used throughout the project to manage /// the stacking order of various interface elements. Adjustments can be made /// by modifying the values associated with each layer. -/// +/// /// - **Guides**: High-priority overlays for design guides. /// - **Overlays**: Elements like modals that need to appear above other content. /// - **Interface Elements**: General UI components, ribbons, and controls. /// - **Content**: Main content areas, typically stacked below UI elements. /// - **Background Layers**: Base layers like canvases, typically behind content. /// - **Special Values**: Special z-index values for maximum, minimum, and baseline. -/// +/// /// @name layers /// @type Map -/// +/// /// @example scss - Usage Example /// .element { -/// z-index: z('modal'); +/// z-index: z("modal"); /// } -/// +/// /// @todo Add more layers as needed, ensuring consistent and clear naming. /// $layers: ( @@ -61,95 +61,86 @@ $layers: ( // ======================================================================== // Guides // ======================================================================== - + /// High-priority guide overlays for design and debugging. /// @name guides /// @type Number - "guides": 9998, // High priority guide overlays + "guides": 9998, - /// Baseline guide used for text alignment and visual rhythm. /// @name guide_baseline /// @type Number - "guide_baseline": 3000, // Baseline guide for text alignment + "guide_baseline": 3000, - /// Graphical guides, such as grid overlays, used in design. /// @name guide_graph /// @type Number - "guide_graph": 3100, // Graphical guides, such as grids + "guide_graph": 3100, // ======================================================================== // Overlays // ======================================================================== - - /// Z-index for modals and dialog boxes, ensuring they appear above other content. + /// Z-index for modals and dialog boxes, ensuring they appear above other + /// content. /// @name modal /// @type Number - "modal": 7000, // Modals and dialog boxes + "modal": 7000, // ======================================================================== // Interface Elements // ======================================================================== - /// Z-index for top ribbons and banners that overlay other UI elements. /// @name ribbon /// @type Number - "ribbon": 5000, // Top ribbons, banners + "ribbon": 5000, - /// General interface elements like headers, footers, and sidebars. /// @name interface /// @type Number - "interface": 4000, // General interface elements + "interface": 4000, - /// Controls like buttons, sliders, and other interactive elements. /// @name control /// @type Number - "control": 3000, // Controls like buttons, sliders + "control": 3000, // ======================================================================== // Content // ======================================================================== - /// Main content area, typically stacked below UI elements. /// @name content /// @type Number - "content": 2000, // Main content area + "content": 2000, // ======================================================================== // Background Layers // ======================================================================== - /// Background canvas or base layer, typically the lowest layer. /// @name canvas /// @type Number - "canvas": -1000, // Background canvas or base layer + "canvas": -1000, // ======================================================================== // Special Values // ======================================================================== - + /// Maximum possible z-index value. /// @name max /// @type Number - "max": 9999, // Maximum possible z-index + "max": 9999, - /// Default, baseline z-index value. /// @name mid /// @type Number - "mid": 0, // Default, baseline z-index + "mid": 0, - /// Minimum possible z-index value. /// @name min /// @type Number - "min":m-9999, // Minimum possible z-index + "min": -9999, ) !default; diff --git a/dist/scss/variables/_paper.scss b/dist/scss/variables/_paper.scss index d0c2c8a..de67588 100644 --- a/dist/scss/variables/_paper.scss +++ b/dist/scss/variables/_paper.scss @@ -3,10 +3,10 @@ // ============================================================================ //// -/// +/// /// Paper Variables Module /// =========================================================================== -/// +/// /// This module defines standard paper sizes, organized into various series and /// categories. These sizes are stored in the `$paper_sizes` map, making them /// easily accessible throughout the project for consistent layout and design. @@ -17,13 +17,13 @@ /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// /// @example /// .element { -/// width: map-get($paper_sizes, 'a4')['width']; -/// height: map-get($paper_sizes, 'a4')['height']; +/// width: map-get($paper_sizes, "a4")["width"]; +/// height: map-get($paper_sizes, "a4")["height"]; /// } -/// +/// //// @@ -31,21 +31,19 @@ // Use // ============================================================================ - // ============================================================================ // Variables // ============================================================================ - /// /// Paper Size Map /// ============================================================================ /// /// A map of standard paper sizes, categorized by various series. -/// +/// /// @name $paper_sizes /// @type Map -/// +/// /// @prop {Map} q0 [width: 720.00mm, height: 1080.00mm] - Q0 paper size. /// @prop {Map} q1 [width: 540.00mm, height: 720.00mm] - Q1 paper size. /// @prop {Map} q2 [width: 360.00mm, height: 540.00mm] - Q2 paper size. @@ -250,285 +248,1068 @@ /// @prop {Map} music_sheet [width: 9in, height: 12in] - Standard music sheet size. /// @prop {Map} playing_card [width: 2.5in, height: 3.5in] - Standard playing card size. $paper_sizes: ( - // Q Series (Custom) // ------------------------------------------------------------------------ - "q0": (width: 720.00mm, height: 1080.00mm), // Q0 - "q1": (width: 540.00mm, height: 720.00mm), // Q1 - "q2": (width: 360.00mm, height: 540.00mm), // Q2 - "q3": (width: 270.00mm, height: 360.00mm), // Q3 - "q4": (width: 180.00mm, height: 270.00mm), // Q4 - "q5": (width: 135.00mm, height: 180.00mm), // Q5 - "q6": (width: 90.00mm, height: 135.00mm), // Q6 - "q7": (width: 62.50mm, height: 90.00mm), // Q7 - "q8": (width: 45.00mm, height: 62.50mm), // Q8 - "q9": (width: 31.25mm, height: 45.00mm), // Q9 - "q10": (width: 22.50mm, height: 31.25mm), // Q10 - + "q0": ( + width: 720mm, + height: 1080mm, + ), + // Q0 + "q1": ( + width: 540mm, + height: 720mm, + ), + // Q1 + "q2": ( + width: 360mm, + height: 540mm, + ), + // Q2 + "q3": ( + width: 270mm, + height: 360mm, + ), + // Q3 + "q4": ( + width: 180mm, + height: 270mm, + ), + // Q4 + "q5": ( + width: 135mm, + height: 180mm, + ), + // Q5 + "q6": ( + width: 90mm, + height: 135mm, + ), + // Q6 + "q7": ( + width: 62.5mm, + height: 90mm, + ), + // Q7 + "q8": ( + width: 45mm, + height: 62.5mm, + ), + // Q8 + "q9": ( + width: 31.25mm, + height: 45mm, + ), + // Q9 + "q10": ( + width: 22.5mm, + height: 31.25mm, + ), + // Q10 // ANSI Series // ------------------------------------------------------------------------ - "ansi_a": (width: 8.50in, height: 11.00in), // ANSI A (Letter) - "ansi_b": (width: 11.00in, height: 17.00in), // ANSI B (Ledger) - "ansi_c": (width: 17.00in, height: 22.00in), // ANSI C - "ansi_d": (width: 22.00in, height: 34.00in), // ANSI D - "ansi_e": (width: 34.00in, height: 44.00in), // ANSI E - + "ansi_a": ( + width: 8.5in, + height: 11in, + ), + // ANSI A (Letter) + "ansi_b": ( + width: 11in, + height: 17in, + ), + // ANSI B (Ledger) + "ansi_c": ( + width: 17in, + height: 22in, + ), + // ANSI C + "ansi_d": ( + width: 22in, + height: 34in, + ), + // ANSI D + "ansi_e": ( + width: 34in, + height: 44in, + ), + // ANSI E // Arch Series (Engineering Drawing Sizes) // ------------------------------------------------------------------------ - "arch_a": (width: 9.00in, height: 12.00in), // Arch A - "arch_b": (width: 12.00in, height: 18.00in), // Arch B - "arch_c": (width: 18.00in, height: 24.00in), // Arch C - "arch_d": (width: 24.00in, height: 36.00in), // Arch D - "arch_e": (width: 36.00in, height: 48.00in), // Arch E - + "arch_a": ( + width: 9in, + height: 12in, + ), + // Arch A + "arch_b": ( + width: 12in, + height: 18in, + ), + // Arch B + "arch_c": ( + width: 18in, + height: 24in, + ), + // Arch C + "arch_d": ( + width: 24in, + height: 36in, + ), + // Arch D + "arch_e": ( + width: 36in, + height: 48in, + ), + // Arch E // DIN A Series // ------------------------------------------------------------------------ - "din_a0": (width: 841.00mm, height: 1189.00mm), // DIN A0 - "din_a1": (width: 594.00mm, height: 841.00mm), // DIN A1 - "din_a2": (width: 420.00mm, height: 594.00mm), // DIN A2 - "din_a3": (width: 297.00mm, height: 420.00mm), // DIN A3 - "din_a4": (width: 210.00mm, height: 297.00mm), // DIN A4 - "din_a5": (width: 148.00mm, height: 210.00mm), // DIN A5 - "din_a6": (width: 105.00mm, height: 148.00mm), // DIN A6 - "din_a7": (width: 74.00mm, height: 105.00mm), // DIN A7 - "din_a8": (width: 52.00mm, height: 74.00mm), // DIN A8 - "din_a9": (width: 37.00mm, height: 52.00mm), // DIN A9 - "din_a10": (width: 26.00mm, height: 37.00mm), // DIN A10 - + "din_a0": ( + width: 841mm, + height: 1189mm, + ), + // DIN A0 + "din_a1": ( + width: 594mm, + height: 841mm, + ), + // DIN A1 + "din_a2": ( + width: 420mm, + height: 594mm, + ), + // DIN A2 + "din_a3": ( + width: 297mm, + height: 420mm, + ), + // DIN A3 + "din_a4": ( + width: 210mm, + height: 297mm, + ), + // DIN A4 + "din_a5": ( + width: 148mm, + height: 210mm, + ), + // DIN A5 + "din_a6": ( + width: 105mm, + height: 148mm, + ), + // DIN A6 + "din_a7": ( + width: 74mm, + height: 105mm, + ), + // DIN A7 + "din_a8": ( + width: 52mm, + height: 74mm, + ), + // DIN A8 + "din_a9": ( + width: 37mm, + height: 52mm, + ), + // DIN A9 + "din_a10": ( + width: 26mm, + height: 37mm, + ), + // DIN A10 // ISO A Series // ------------------------------------------------------------------------ - "iso_a0": (width: 841.00mm, height: 1189.00mm), // ISO A0 - "iso_a1": (width: 594.00mm, height: 841.00mm), // ISO A1 - "iso_a2": (width: 420.00mm, height: 594.00mm), // ISO A2 - "iso_a3": (width: 297.00mm, height: 420.00mm), // ISO A3 - "iso_a4": (width: 210.00mm, height: 297.00mm), // ISO A4 - "iso_a5": (width: 148.00mm, height: 210.00mm), // ISO A5 - "iso_a6": (width: 105.00mm, height: 148.00mm), // ISO A6 - "iso_a7": (width: 74.00mm, height: 105.00mm), // ISO A7 - "iso_a8": (width: 52.00mm, height: 74.00mm), // ISO A8 - "iso_a9": (width: 37.00mm, height: 52.00mm), // ISO A9 - "iso_a10": (width: 26.00mm, height: 37.00mm), // ISO A10 - + "iso_a0": ( + width: 841mm, + height: 1189mm, + ), + // ISO A0 + "iso_a1": ( + width: 594mm, + height: 841mm, + ), + // ISO A1 + "iso_a2": ( + width: 420mm, + height: 594mm, + ), + // ISO A2 + "iso_a3": ( + width: 297mm, + height: 420mm, + ), + // ISO A3 + "iso_a4": ( + width: 210mm, + height: 297mm, + ), + // ISO A4 + "iso_a5": ( + width: 148mm, + height: 210mm, + ), + // ISO A5 + "iso_a6": ( + width: 105mm, + height: 148mm, + ), + // ISO A6 + "iso_a7": ( + width: 74mm, + height: 105mm, + ), + // ISO A7 + "iso_a8": ( + width: 52mm, + height: 74mm, + ), + // ISO A8 + "iso_a9": ( + width: 37mm, + height: 52mm, + ), + // ISO A9 + "iso_a10": ( + width: 26mm, + height: 37mm, + ), + // ISO A10 // ISO B Series // ------------------------------------------------------------------------ - "iso_b0": (width: 1000.00mm, height: 1414.00mm), // ISO B0 - "iso_b1": (width: 707.00mm, height: 1000.00mm), // ISO B1 - "iso_b2": (width: 500.00mm, height: 707.00mm), // ISO B2 - "iso_b3": (width: 353.00mm, height: 500.00mm), // ISO B3 - "iso_b4": (width: 250.00mm, height: 353.00mm), // ISO B4 - "iso_b5": (width: 176.00mm, height: 250.00mm), // ISO B5 - "iso_b6": (width: 125.00mm, height: 176.00mm), // ISO B6 - "iso_b7": (width: 88.00mm, height: 125.00mm), // ISO B7 - "iso_b8": (width: 62.00mm, height: 88.00mm), // ISO B8 - "iso_b9": (width: 44.00mm, height: 62.00mm), // ISO B9 - "iso_b10": (width: 31.00mm, height: 44.00mm), // ISO B10 - + "iso_b0": ( + width: 1000mm, + height: 1414mm, + ), + // ISO B0 + "iso_b1": ( + width: 707mm, + height: 1000mm, + ), + // ISO B1 + "iso_b2": ( + width: 500mm, + height: 707mm, + ), + // ISO B2 + "iso_b3": ( + width: 353mm, + height: 500mm, + ), + // ISO B3 + "iso_b4": ( + width: 250mm, + height: 353mm, + ), + // ISO B4 + "iso_b5": ( + width: 176mm, + height: 250mm, + ), + // ISO B5 + "iso_b6": ( + width: 125mm, + height: 176mm, + ), + // ISO B6 + "iso_b7": ( + width: 88mm, + height: 125mm, + ), + // ISO B7 + "iso_b8": ( + width: 62mm, + height: 88mm, + ), + // ISO B8 + "iso_b9": ( + width: 44mm, + height: 62mm, + ), + // ISO B9 + "iso_b10": ( + width: 31mm, + height: 44mm, + ), + // ISO B10 // ISO C Series (International Envelope Sizes) // ------------------------------------------------------------------------ - "iso_c0": (width: 917.00mm, height: 1297.00mm), // ISO C0 - "iso_c1": (width: 648.00mm, height: 917.00mm), // ISO C1 - "iso_c2": (width: 458.00mm, height: 648.00mm), // ISO C2 - "iso_c3": (width: 324.00mm, height: 458.00mm), // ISO C3 - "iso_c4": (width: 229.00mm, height: 324.00mm), // ISO C4 - "iso_c5": (width: 162.00mm, height: 229.00mm), // ISO C5 - "iso_c6": (width: 114.00mm, height: 162.00mm), // ISO C6 - "iso_c7": (width: 81.00mm, height: 114.00mm), // ISO C7 - "iso_c8": (width: 57.00mm, height: 81.00mm), // ISO C8 - "iso_c9": (width: 40.00mm, height: 57.00mm), // ISO C9 - "iso_c10": (width: 28.00mm, height: 40.00mm), // ISO C10 - + "iso_c0": ( + width: 917mm, + height: 1297mm, + ), + // ISO C0 + "iso_c1": ( + width: 648mm, + height: 917mm, + ), + // ISO C1 + "iso_c2": ( + width: 458mm, + height: 648mm, + ), + // ISO C2 + "iso_c3": ( + width: 324mm, + height: 458mm, + ), + // ISO C3 + "iso_c4": ( + width: 229mm, + height: 324mm, + ), + // ISO C4 + "iso_c5": ( + width: 162mm, + height: 229mm, + ), + // ISO C5 + "iso_c6": ( + width: 114mm, + height: 162mm, + ), + // ISO C6 + "iso_c7": ( + width: 81mm, + height: 114mm, + ), + // ISO C7 + "iso_c8": ( + width: 57mm, + height: 81mm, + ), + // ISO C8 + "iso_c9": ( + width: 40mm, + height: 57mm, + ), + // ISO C9 + "iso_c10": ( + width: 28mm, + height: 40mm, + ), + // ISO C10 // ISO RA Series (ISO 217:2013) // ------------------------------------------------------------------------ - "iso_ra0": (width: 860.00mm, height: 1220.00mm), // ISO RA0 - "iso_ra1": (width: 610.00mm, height: 860.00mm), // ISO RA1 - "iso_ra2": (width: 430.00mm, height: 610.00mm), // ISO RA2 - "iso_ra3": (width: 305.00mm, height: 430.00mm), // ISO RA3 - "iso_ra4": (width: 215.00mm, height: 305.00mm), // ISO RA4 - + "iso_ra0": ( + width: 860mm, + height: 1220mm, + ), + // ISO RA0 + "iso_ra1": ( + width: 610mm, + height: 860mm, + ), + // ISO RA1 + "iso_ra2": ( + width: 430mm, + height: 610mm, + ), + // ISO RA2 + "iso_ra3": ( + width: 305mm, + height: 430mm, + ), + // ISO RA3 + "iso_ra4": ( + width: 215mm, + height: 305mm, + ), + // ISO RA4 // ISO SRA Series (ISO 217:2013) // ------------------------------------------------------------------------ - "iso_sra0": (width: 900.00mm, height: 1280.00mm), // ISO SRA0 - "iso_sra1": (width: 640.00mm, height: 900.00mm), // ISO SRA1 - "iso_sra2": (width: 450.00mm, height: 640.00mm), // ISO SRA2 - "iso_sra3": (width: 320.00mm, height: 450.00mm), // ISO SRA3 - "iso_sra4": (width: 225.00mm, height: 320.00mm), // ISO SRA4 - + "iso_sra0": ( + width: 900mm, + height: 1280mm, + ), + // ISO SRA0 + "iso_sra1": ( + width: 640mm, + height: 900mm, + ), + // ISO SRA1 + "iso_sra2": ( + width: 450mm, + height: 640mm, + ), + // ISO SRA2 + "iso_sra3": ( + width: 320mm, + height: 450mm, + ), + // ISO SRA3 + "iso_sra4": ( + width: 225mm, + height: 320mm, + ), + // ISO SRA4 // JIS A Series // ------------------------------------------------------------------------ - "jis_a0": (width: 841.00mm, height: 1189.00mm), // JIS A0 - "jis_a1": (width: 594.00mm, height: 841.00mm), // JIS A1 - "jis_a2": (width: 420.00mm, height: 594.00mm), // JIS A2 - "jis_a3": (width: 297.00mm, height: 420.00mm), // JIS A3 - "jis_a4": (width: 210.00mm, height: 297.00mm), // JIS A4 - "jis_a5": (width: 148.00mm, height: 210.00mm), // JIS A5 - "jis_a6": (width: 105.00mm, height: 148.00mm), // JIS A6 - "jis_a7": (width: 74.00mm, height: 105.00mm), // JIS A7 - "jis_a8": (width: 52.00mm, height: 74.00mm), // JIS A8 - "jis_a9": (width: 37.00mm, height: 52.00mm), // JIS A9 - "jis_a10": (width: 26.00mm, height: 37.00mm), // JIS A10 - + "jis_a0": ( + width: 841mm, + height: 1189mm, + ), + // JIS A0 + "jis_a1": ( + width: 594mm, + height: 841mm, + ), + // JIS A1 + "jis_a2": ( + width: 420mm, + height: 594mm, + ), + // JIS A2 + "jis_a3": ( + width: 297mm, + height: 420mm, + ), + // JIS A3 + "jis_a4": ( + width: 210mm, + height: 297mm, + ), + // JIS A4 + "jis_a5": ( + width: 148mm, + height: 210mm, + ), + // JIS A5 + "jis_a6": ( + width: 105mm, + height: 148mm, + ), + // JIS A6 + "jis_a7": ( + width: 74mm, + height: 105mm, + ), + // JIS A7 + "jis_a8": ( + width: 52mm, + height: 74mm, + ), + // JIS A8 + "jis_a9": ( + width: 37mm, + height: 52mm, + ), + // JIS A9 + "jis_a10": ( + width: 26mm, + height: 37mm, + ), + // JIS A10 // JIS B Series // ------------------------------------------------------------------------ - "jis_b0": (width: 1030.00mm, height: 1456.00mm), // JIS B0 - "jis_b1": (width: 728.00mm, height: 1030.00mm), // JIS B1 - "jis_b2": (width: 515.00mm, height: 728.00mm), // JIS B2 - "jis_b3": (width: 364.00mm, height: 515.00mm), // JIS B3 - "jis_b4": (width: 257.00mm, height: 364.00mm), // JIS B4 - "jis_b5": (width: 182.00mm, height: 257.00mm), // JIS B5 - "jis_b6": (width: 128.00mm, height: 182.00mm), // JIS B6 - "jis_b7": (width: 91.00mm, height: 128.00mm), // JIS B7 - "jis_b8": (width: 64.00mm, height: 91.00mm), // JIS B8 - "jis_b9": (width: 45.00mm, height: 64.00mm), // JIS B9 - "jis_b10": (width: 32.00mm, height: 45.00mm), // JIS B10 - + "jis_b0": ( + width: 1030mm, + height: 1456mm, + ), + // JIS B0 + "jis_b1": ( + width: 728mm, + height: 1030mm, + ), + // JIS B1 + "jis_b2": ( + width: 515mm, + height: 728mm, + ), + // JIS B2 + "jis_b3": ( + width: 364mm, + height: 515mm, + ), + // JIS B3 + "jis_b4": ( + width: 257mm, + height: 364mm, + ), + // JIS B4 + "jis_b5": ( + width: 182mm, + height: 257mm, + ), + // JIS B5 + "jis_b6": ( + width: 128mm, + height: 182mm, + ), + // JIS B6 + "jis_b7": ( + width: 91mm, + height: 128mm, + ), + // JIS B7 + "jis_b8": ( + width: 64mm, + height: 91mm, + ), + // JIS B8 + "jis_b9": ( + width: 45mm, + height: 64mm, + ), + // JIS B9 + "jis_b10": ( + width: 32mm, + height: 45mm, + ), + // JIS B10 // JIS C Series // ------------------------------------------------------------------------ - "jis_c0": (width: 917.00mm, height: 1297.00mm), // JIS C0 - "jis_c1": (width: 648.00mm, height: 917.00mm), // JIS C1 - "jis_c2": (width: 458.00mm, height: 648.00mm), // JIS C2 - "jis_c3": (width: 324.00mm, height: 458.00mm), // JIS C3 - "jis_c4": (width: 229.00mm, height: 324.00mm), // JIS C4 - "jis_c5": (width: 162.00mm, height: 229.00mm), // JIS C5 - "jis_c6": (width: 114.00mm, height: 162.00mm), // JIS C6 - "jis_c7": (width: 81.00mm, height: 114.00mm), // JIS C7 - "jis_c8": (width: 57.00mm, height: 81.00mm), // JIS C8 - "jis_c9": (width: 40.00mm, height: 57.00mm), // JIS C9 - "jis_c10": (width: 28.00mm, height: 40.00mm), // JIS C10 - + "jis_c0": ( + width: 917mm, + height: 1297mm, + ), + // JIS C0 + "jis_c1": ( + width: 648mm, + height: 917mm, + ), + // JIS C1 + "jis_c2": ( + width: 458mm, + height: 648mm, + ), + // JIS C2 + "jis_c3": ( + width: 324mm, + height: 458mm, + ), + // JIS C3 + "jis_c4": ( + width: 229mm, + height: 324mm, + ), + // JIS C4 + "jis_c5": ( + width: 162mm, + height: 229mm, + ), + // JIS C5 + "jis_c6": ( + width: 114mm, + height: 162mm, + ), + // JIS C6 + "jis_c7": ( + width: 81mm, + height: 114mm, + ), + // JIS C7 + "jis_c8": ( + width: 57mm, + height: 81mm, + ), + // JIS C8 + "jis_c9": ( + width: 40mm, + height: 57mm, + ), + // JIS C9 + "jis_c10": ( + width: 28mm, + height: 40mm, + ), + // JIS C10 // PA (Alternate) Series // ------------------------------------------------------------------------ - "pa0": (width: 840.00mm, height: 1120.00mm), // PA0 - "pa1": (width: 560.00mm, height: 840.00mm), // PA1 - "pa2": (width: 420.00mm, height: 560.00mm), // PA2 - "pa3": (width: 280.00mm, height: 420.00mm), // PA3 - "pa4": (width: 210.00mm, height: 280.00mm), // PA4 - "pa5": (width: 140.00mm, height: 210.00mm), // PA5 - "pa6": (width: 105.00mm, height: 140.00mm), // PA6 - "pa7": (width: 70.00mm, height: 105.00mm), // PA7 - "pa8": (width: 52.00mm, height: 70.00mm), // PA8 - "pa9": (width: 35.00mm, height: 52.00mm), // PA9 - "pa10": (width: 26.00mm, height: 35.00mm), // PA10 - + "pa0": ( + width: 840mm, + height: 1120mm, + ), + // PA0 + "pa1": ( + width: 560mm, + height: 840mm, + ), + // PA1 + "pa2": ( + width: 420mm, + height: 560mm, + ), + // PA2 + "pa3": ( + width: 280mm, + height: 420mm, + ), + // PA3 + "pa4": ( + width: 210mm, + height: 280mm, + ), + // PA4 + "pa5": ( + width: 140mm, + height: 210mm, + ), + // PA5 + "pa6": ( + width: 105mm, + height: 140mm, + ), + // PA6 + "pa7": ( + width: 70mm, + height: 105mm, + ), + // PA7 + "pa8": ( + width: 52mm, + height: 70mm, + ), + // PA8 + "pa9": ( + width: 35mm, + height: 52mm, + ), + // PA9 + "pa10": ( + width: 26mm, + height: 35mm, + ), + // PA10 // Photographic Paper Sizes (ISO 1008) // ------------------------------------------------------------------------ - "photo_3x3": (width: 3.00in, height: 3.00in), // 3" x 3" - "photo_4x5": (width: 4.00in, height: 5.00in), // 4" x 5" - "photo_5x7": (width: 5.00in, height: 7.00in), // 5" x 7" - "photo_8x10": (width: 8.00in, height: 10.00in), // 8" x 10" - "photo_10x12": (width: 10.00in, height: 12.00in), // 10" x 12" - "photo_16x20": (width: 16.00in, height: 20.00in), // 16" x 20" - + "photo_3x3": ( + width: 3in, + height: 3in, + ), + // 3" x 3" + "photo_4x5": ( + width: 4in, + height: 5in, + ), + // 4" x 5" + "photo_5x7": ( + width: 5in, + height: 7in, + ), + // 5" x 7" + "photo_8x10": ( + width: 8in, + height: 10in, + ), + // 8" x 10" + "photo_10x12": ( + width: 10in, + height: 12in, + ), + // 10" x 12" + "photo_16x20": ( + width: 16in, + height: 20in, + ), + // 16" x 20" // Photographic Paper Sizes (US) // ------------------------------------------------------------------------ - "photo_2r": (width: 2.50in, height: 3.50in), // 2R (Wallet) - "photo_3r": (width: 3.50in, height: 5.00in), // 3R - "photo_4r": (width: 4.00in, height: 6.00in), // 4R - "photo_5r": (width: 5.00in, height: 7.00in), // 5R - "photo_6r": (width: 6.00in, height: 8.00in), // 6R - "photo_8r": (width: 8.00in, height: 10.00in), // 8R - "photo_8r_plus": (width: 8.00in, height: 12.00in), // 8R+ - "photo_10r": (width: 10.00in, height: 12.00in), // 10R - "photo_10r_plus": (width: 10.00in, height: 15.00in), // 10R+ - "photo_11r": (width: 11.00in, height: 14.00in), // 11R - "photo_11r_plus": (width: 11.00in, height: 17.00in), // 11R+ - "photo_12r": (width: 12.00in, height: 15.00in), // 12R - "photo_12r_plus": (width: 12.00in, height: 18.00in), // 12R+ - "photo_14r": (width: 14.00in, height: 17.00in), // 14R - "photo_16r": (width: 16.00in, height: 20.00in), // 16R - "photo_16r_plus": (width: 16.00in, height: 24.00in), // 16R+ - "photo_20r": (width: 20.00in, height: 24.00in), // 20R - "photo_20r_plus": (width: 20.00in, height: 28.00in), // 20R+ - "photo_22r": (width: 20.00in, height: 29.50in), // 22R - "photo_24r": (width: 24.00in, height: 31.50in), // 24R - "photo_24r_plus": (width: 24.00in, height: 35.50in), // 24R+ - "photo_30r": (width: 30.00in, height: 40.00in), // 30R - + "photo_2r": ( + width: 2.5in, + height: 3.5in, + ), + // 2R (Wallet) + "photo_3r": ( + width: 3.5in, + height: 5in, + ), + // 3R + "photo_4r": ( + width: 4in, + height: 6in, + ), + // 4R + "photo_5r": ( + width: 5in, + height: 7in, + ), + // 5R + "photo_6r": ( + width: 6in, + height: 8in, + ), + // 6R + "photo_8r": ( + width: 8in, + height: 10in, + ), + // 8R + "photo_8r_plus": ( + width: 8in, + height: 12in, + ), + // 8R+ + "photo_10r": ( + width: 10in, + height: 12in, + ), + // 10R + "photo_10r_plus": ( + width: 10in, + height: 15in, + ), + // 10R+ + "photo_11r": ( + width: 11in, + height: 14in, + ), + // 11R + "photo_11r_plus": ( + width: 11in, + height: 17in, + ), + // 11R+ + "photo_12r": ( + width: 12in, + height: 15in, + ), + // 12R + "photo_12r_plus": ( + width: 12in, + height: 18in, + ), + // 12R+ + "photo_14r": ( + width: 14in, + height: 17in, + ), + // 14R + "photo_16r": ( + width: 16in, + height: 20in, + ), + // 16R + "photo_16r_plus": ( + width: 16in, + height: 24in, + ), + // 16R+ + "photo_20r": ( + width: 20in, + height: 24in, + ), + // 20R + "photo_20r_plus": ( + width: 20in, + height: 28in, + ), + // 20R+ + "photo_22r": ( + width: 20in, + height: 29.5in, + ), + // 22R + "photo_24r": ( + width: 24in, + height: 31.5in, + ), + // 24R + "photo_24r_plus": ( + width: 24in, + height: 35.5in, + ), + // 24R+ + "photo_30r": ( + width: 30in, + height: 40in, + ), + // 30R // US Paper Sizes // ------------------------------------------------------------------------ - "us_letter": (width: 8.50in, height: 11.00in), // US Letter - "us_legal": (width: 8.50in, height: 14.00in), // US Legal - "us_ledger": (width: 11.00in, height: 17.00in), // US Ledger/Tabloid - "us_junior": (width: 5.00in, height: 8.00in), // US Junior Legal - "us_half_letter": (width: 5.50in, height: 8.50in), // US Half Letter - "us_government_letter": (width: 8.00in, height: 10.50in), // US Government Letter - "us_executive": (width: 7.25in, height: 10.50in), // US Executive - "us_statement": (width: 5.50in, height: 8.50in), // US Statement - "us_folio": (width: 8.50in, height: 13.00in), // US Folio - "us_quarto": (width: 8.00in, height: 10.00in), // US Quarto - "us_tabloid_extra": (width: 12.00in, height: 18.00in), // US Tabloid Extra - + "us_letter": ( + width: 8.5in, + height: 11in, + ), + // US Letter + "us_legal": ( + width: 8.5in, + height: 14in, + ), + // US Legal + "us_ledger": ( + width: 11in, + height: 17in, + ), + // US Ledger/Tabloid + "us_junior": ( + width: 5in, + height: 8in, + ), + // US Junior Legal + "us_half_letter": ( + width: 5.5in, + height: 8.5in, + ), + // US Half Letter + "us_government_letter": ( + width: 8in, + height: 10.5in, + ), + // US Government Letter + "us_executive": ( + width: 7.25in, + height: 10.5in, + ), + // US Executive + "us_statement": ( + width: 5.5in, + height: 8.5in, + ), + // US Statement + "us_folio": ( + width: 8.5in, + height: 13in, + ), + // US Folio + "us_quarto": ( + width: 8in, + height: 10in, + ), + // US Quarto + "us_tabloid_extra": ( + width: 12in, + height: 18in, + ), + // US Tabloid Extra // US Poster Sizes // ------------------------------------------------------------------------ - 'poster_small': (width: 11.00in, height: 17.00in), // Small Poster - 'poster_medium': (width: 18.00in, height: 24.00in), // Medium Poster - 'poster_large': (width: 24.00in, height: 36.00in), // Large Poster - 'poster_movie': (width: 27.00in, height: 40.00in), // Movie Poster - 'poster_xlarge': (width: 36.00in, height: 48.00in), // Extra Large Poster - + "poster_small": ( + width: 11in, + height: 17in, + ), + // Small Poster + "poster_medium": ( + width: 18in, + height: 24in, + ), + // Medium Poster + "poster_large": ( + width: 24in, + height: 36in, + ), + // Large Poster + "poster_movie": ( + width: 27in, + height: 40in, + ), + // Movie Poster + "poster_xlarge": ( + width: 36in, + height: 48in, + ), + // Extra Large Poster // Art Canvas Sizes // ------------------------------------------------------------------------ - "canvas_8x10": (width: 8.00in, height: 10.00in), // 8" x 10" (4:5 ratio) - "canvas_10x14": (width: 10.00in, height: 14.00in), // 10" x 14" - "canvas_10x24": (width: 10.00in, height: 24.00in), // 10" x 24" (5:12 ratio) - "canvas_12x12": (width: 12.00in, height: 12.00in), // 12" x 12" (1:1 ratio) - "canvas_12x36": (width: 12.00in, height: 36.00in), // 12" x 36" (1:3 ratio) - "canvas_16x16": (width: 16.00in, height: 16.00in), // 16" x 16" (1:1 ratio) - "canvas_16x20": (width: 16.00in, height: 20.00in), // 16" x 20" (4:5 ratio) - "canvas_18x24": (width: 18.00in, height: 24.00in), // 18" x 24" (3:4 ratio) - "canvas_20x30": (width: 20.00in, height: 30.00in), // 20" x 30" (2:3 ratio) - "canvas_20x60": (width: 20.00in, height: 60.00in), // 20" x 60" (1:3 ratio) - "canvas_24x36": (width: 24.00in, height: 36.00in), // 24" x 36" (2:3 ratio) - "canvas_30x40": (width: 30.00in, height: 40.00in), // 30" x 40" (3:4 ratio) - "canvas_30x90": (width: 30.00in, height: 90.00in), // 30" x 90" (1:3 ratio) - "canvas_36x48": (width: 36.00in, height: 48.00in), // 36" x 48" (3:4 ratio) - "canvas_40x40": (width: 40.00in, height: 40.00in), // 40" x 40" (1:1 ratio) - "canvas_40x60": (width: 40.00in, height: 60.00in), // 40" x 60" (2:3 ratio) - "canvas_48x72": (width: 48.00in, height: 72.00in), // 48" x 72" (2:3 ratio) - + "canvas_8x10": ( + width: 8in, + height: 10in, + ), + // 8" x 10" (4:5 ratio) + "canvas_10x14": ( + width: 10in, + height: 14in, + ), + // 10" x 14" + "canvas_10x24": ( + width: 10in, + height: 24in, + ), + // 10" x 24" (5:12 ratio) + "canvas_12x12": ( + width: 12in, + height: 12in, + ), + // 12" x 12" (1:1 ratio) + "canvas_12x36": ( + width: 12in, + height: 36in, + ), + // 12" x 36" (1:3 ratio) + "canvas_16x16": ( + width: 16in, + height: 16in, + ), + // 16" x 16" (1:1 ratio) + "canvas_16x20": ( + width: 16in, + height: 20in, + ), + // 16" x 20" (4:5 ratio) + "canvas_18x24": ( + width: 18in, + height: 24in, + ), + // 18" x 24" (3:4 ratio) + "canvas_20x30": ( + width: 20in, + height: 30in, + ), + // 20" x 30" (2:3 ratio) + "canvas_20x60": ( + width: 20in, + height: 60in, + ), + // 20" x 60" (1:3 ratio) + "canvas_24x36": ( + width: 24in, + height: 36in, + ), + // 24" x 36" (2:3 ratio) + "canvas_30x40": ( + width: 30in, + height: 40in, + ), + // 30" x 40" (3:4 ratio) + "canvas_30x90": ( + width: 30in, + height: 90in, + ), + // 30" x 90" (1:3 ratio) + "canvas_36x48": ( + width: 36in, + height: 48in, + ), + // 36" x 48" (3:4 ratio) + "canvas_40x40": ( + width: 40in, + height: 40in, + ), + // 40" x 40" (1:1 ratio) + "canvas_40x60": ( + width: 40in, + height: 60in, + ), + // 40" x 60" (2:3 ratio) + "canvas_48x72": ( + width: 48in, + height: 72in, + ), + // 48" x 72" (2:3 ratio) // Book Sizes (Common in Publishing) // ------------------------------------------------------------------------ - 'book_small': (width: 5in, height: 8in), // Small Book - 'book_medium': (width: 6in, height: 9in), // Medium Book - 'book_large': (width: 7in, height: 10in), // Large Book - 'book_collectors': (width: 9in, height: 12in), // Collectors Edition Book - 'book_coffee_table': (width: 12in, height: 15in), // Coffee Table Book - + "book_small": ( + width: 5in, + height: 8in, + ), + // Small Book + "book_medium": ( + width: 6in, + height: 9in, + ), + // Medium Book + "book_large": ( + width: 7in, + height: 10in, + ), + // Large Book + "book_collectors": ( + width: 9in, + height: 12in, + ), + // Collectors Edition Book + "book_coffee_table": ( + width: 12in, + height: 15in, + ), + // Coffee Table Book // Business Card Standard Sizes // ------------------------------------------------------------------------ - 'business_card_us': (width: 3.5in, height: 2in), // US Standard Business Card - 'business_card_eu': (width: 85mm, height: 55mm), // EU Standard Business Card - 'business_card_iso': (width: 90mm, height: 55mm), // ISO Standard Business Card - + "business_card_us": ( + width: 3.5in, + height: 2in, + ), + // US Standard Business Card + "business_card_eu": ( + width: 85mm, + height: 55mm, + ), + // EU Standard Business Card + "business_card_iso": ( + width: 90mm, + height: 55mm, + ), + // ISO Standard Business Card // Index Card Sizes // ------------------------------------------------------------------------ - 'index_card_3x5': (width: 3in, height: 5in), // 3" x 5" Index Card - 'index_card_4x6': (width: 4in, height: 6in), // 4" x 6" Index Card - 'index_card_5x8': (width: 5in, height: 8in), // 5" x 8" Index Card - + "index_card_3x5": ( + width: 3in, + height: 5in, + ), + // 3" x 5" Index Card + "index_card_4x6": ( + width: 4in, + height: 6in, + ), + // 4" x 6" Index Card + "index_card_5x8": ( + width: 5in, + height: 8in, + ), + // 5" x 8" Index Card // Commercial Printing Sizes // ------------------------------------------------------------------------ - 'brochure_8x10': (width: 8in, height: 10in), // 8" x 10" Brochure - 'brochure_11x17': (width: 11in, height: 17in), // 11" x 17" Brochure - + "brochure_8x10": ( + width: 8in, + height: 10in, + ), + // 8" x 10" Brochure + "brochure_11x17": ( + width: 11in, + height: 17in, + ), + // 11" x 17" Brochure // Advertising Flyer Sizes // ------------------------------------------------------------------------ - 'flyer_small': (width: 4.25in, height: 5.5in), // Small Flyer - 'flyer_medium': (width: 5.5in, height: 8.5in), // Medium Flyer - 'flyer_large': (width: 8.5in, height: 11in), // Large Flyer - - + "flyer_small": ( + width: 4.25in, + height: 5.5in, + ), + // Small Flyer + "flyer_medium": ( + width: 5.5in, + height: 8.5in, + ), + // Medium Flyer + "flyer_large": ( + width: 8.5in, + height: 11in, + ), + // Large Flyer // Academic Paper Sizes // ------------------------------------------------------------------------ - 'journal_standard': (width: 6in, height: 9in), // Standard Academic Journal - 'journal_large': (width: 7in, height: 10in), // Large Academic Journal - 'thesis_standard': (width: 8.5in, height: 11in), // Standard Thesis Paper - 'thesis_large': (width: 11in, height: 17in), // Large Thesis Paper - - + "journal_standard": ( + width: 6in, + height: 9in, + ), + // Standard Academic Journal + "journal_large": ( + width: 7in, + height: 10in, + ), + // Large Academic Journal + "thesis_standard": ( + width: 8.5in, + height: 11in, + ), + // Standard Thesis Paper + "thesis_large": ( + width: 11in, + height: 17in, + ), + // Large Thesis Paper // Other Standard Sizes // ------------------------------------------------------------------------ - 'comic_book': (width: 6.625in, height: 10.25in), // Standard Comic Book - 'music_sheet': (width: 9in, height: 12in), // Standard Music Sheet - 'playing_card': (width: 2.5in, height: 3.5in), // Standard Playing Card - + "comic_book": ( + width: 6.625in, + height: 10.25in, + ), + // Standard Comic Book + "music_sheet": ( + width: 9in, + height: 12in, + ), + // Standard Music Sheet + "playing_card": ( + width: 2.5in, + height: 3.5in, + ) // Standard Playing Card ) !default; diff --git a/dist/scss/variables/_ratio.scss b/dist/scss/variables/_ratio.scss index b80115b..226a65e 100644 --- a/dist/scss/variables/_ratio.scss +++ b/dist/scss/variables/_ratio.scss @@ -3,17 +3,17 @@ // ============================================================================ //// -/// +/// /// Ratio Variables Module /// =========================================================================== -/// +/// /// @group Ratio /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// @@ -21,24 +21,22 @@ // Use // ============================================================================ - // ============================================================================ // Variables // ============================================================================ - -/// +/// /// A map of common ratios used for modular scale calculations, organized by /// categories such as musical intervals, mathematical constants, and special /// ratios used in design and architecture. -/// This map defines a variety of ratios used in modular scale calculations for -/// responsive typography, layout design, and other scaling needs. These ratios +/// This map defines a variety of ratios used in modular scale calculations for +/// responsive typography, layout design, and other scaling needs. These ratios /// are drawn from musical intervals, mathematical constants, and design /// principles. -/// +/// /// @name $ratio_map /// @type Map -/// +/// /// @prop {Number} minor_second [1.067] - Minor second interval. /// @prop {Number} minor_third [1.2] - Minor third interval. /// @prop {Number} minor_fourth [1.334] - Minor fourth interval (also known as diminished fifth). @@ -95,7 +93,7 @@ /// @prop {Number} bronze_ratio [1.927] - Analogous to silver and golden ratios. /// @prop {Number} phi [1.618] - Another name for the golden ratio. /// @prop {Number} pi [3.142] - Mathematical Pi value. -/// @prop {Number} euler [2.718] - Euler's number. +/// @prop {Number} euler [2.718] - Euler"s number. /// @prop {Number} pythagorean [1.732] - Pythagorean constant, square root of 3. /// @prop {Number} square [1.414] - Square root of 2. /// @prop {Number} fibonacci [1.618] - Fibonacci sequence ratio. @@ -105,120 +103,180 @@ /// @prop {Number} cosmic_ratio [1.273] - Based on cosmic geometry. /// @prop {Number} egyptian_fraction [1.571] - Ancient Egyptian architecture ratio. /// @prop {Number} harmonic_mean [1.455] - Harmonic mean, a type of average. -/// @prop {Number} gauss_constant [0.834] - Gauss's constant related to the arithmetic-geometric mean. +/// @prop {Number} gauss_constant [0.834] - Gauss"s constant related to the arithmetic-geometric mean. /// @prop {Number} super_golden [2.058] - Super golden ratio, a higher order of the golden ratio. /// @prop {Number} parthenon_ratio [1.618] - Ratio used in the architecture of the Parthenon. /// @prop {Number} le_corbusier [1.618] - Le Corbusier’s modulor ratio, used in modernist architecture. /// @prop {Number} vesica_piscis [1.732] - Ratio derived from the vesica piscis shape, often used in sacred geometry. $ratio_map: ( - // Musical Intervals // ======================================================================== // Commonly used in creating harmonious designs based on musical theory. - // Musical Minor Interval // ------------------------------------------------------------------------ - "minor_second": 1.067, // Minor second interval - "minor_third": 1.2, // Minor third interval - "minor_fourth": 1.334, // Minor fourth interval (also known as diminished fifth) - "minor_fifth": 1.5, // Minor fifth interval - "minor_sixth": 1.6, // Minor sixth interval - "minor_seventh": 1.778, // Minor seventh interval - "minor_octave": 2, // Minor octave interval + "minor_second": 1.067, + // Minor second interval + "minor_third": 1.2, + // Minor third interval + "minor_fourth": 1.334, + // Minor fourth interval (also known as diminished fifth) + "minor_fifth": 1.5, + // Minor fifth interval + "minor_sixth": 1.6, + // Minor sixth interval + "minor_seventh": 1.778, + // Minor seventh interval + "minor_octave": 2, + // Minor octave interval // Musical Major Interval // ------------------------------------------------------------------------ - "major_second": 1.125, // Major second interval - "major_third": 1.25, // Major third interval - "major_fourth": 1.333, // Major fourth interval (perfect fourth) - "major_fifth": 1.5, // Major fifth interval (perfect fifth) - "major_sixth": 1.667, // Major sixth interval - "major_seventh": 1.875, // Major seventh interval - "major_octave": 2, // Major octave interval (perfect octave) + "major_second": 1.125, + // Major second interval + "major_third": 1.25, + // Major third interval + "major_fourth": 1.333, + // Major fourth interval (perfect fourth) + "major_fifth": 1.5, + // Major fifth interval (perfect fifth) + "major_sixth": 1.667, + // Major sixth interval + "major_seventh": 1.875, + // Major seventh interval + "major_octave": 2, + // Major octave interval (perfect octave) // Musical Perfect Interval // ------------------------------------------------------------------------ - "perfect_unison": 1, // Perfect unison, the same note - "perfect_second": 1.125, // Perfect second interval - "perfect_third": 1.25, // Perfect third interval - "perfect_fourth": 1.333, // Perfect fourth interval - "perfect_fifth": 1.5, // Perfect fifth interval - "perfect_sixth": 1.667, // Perfect sixth interval - "perfect_seventh": 1.875, // Perfect seventh interval - "perfect_octave": 2, // Perfect octave, double the frequency - "perfect_ninth": 2.25, // Perfect ninth interval - "perfect_tenth": 2.5, // Perfect tenth interval - "perfect_eleventh": 2.667, // Perfect eleventh interval - "perfect_twelfth": 3, // Perfect twelfth interval - "perfect_thirteenth": 3.333, // Perfect thirteenth interval - "perfect_fourteenth": 3.667, // Perfect fourteenth interval - "perfect_fifteenth": 4, // Perfect fifteenth interval, double octave - "double_octave": 4, // Twice the frequency of the perfect octave - "triple_octave": 8, // Three times the frequency of the perfect octave + "perfect_unison": 1, + // Perfect unison, the same note + "perfect_second": 1.125, + // Perfect second interval + "perfect_third": 1.25, + // Perfect third interval + "perfect_fourth": 1.333, + // Perfect fourth interval + "perfect_fifth": 1.5, + // Perfect fifth interval + "perfect_sixth": 1.667, + // Perfect sixth interval + "perfect_seventh": 1.875, + // Perfect seventh interval + "perfect_octave": 2, + // Perfect octave, double the frequency + "perfect_ninth": 2.25, + // Perfect ninth interval + "perfect_tenth": 2.5, + // Perfect tenth interval + "perfect_eleventh": 2.667, + // Perfect eleventh interval + "perfect_twelfth": 3, + // Perfect twelfth interval + "perfect_thirteenth": 3.333, + // Perfect thirteenth interval + "perfect_fourteenth": 3.667, + // Perfect fourteenth interval + "perfect_fifteenth": 4, + // Perfect fifteenth interval, double octave + "double_octave": 4, + // Twice the frequency of the perfect octave + "triple_octave": 8, + // Three times the frequency of the perfect octave // Musical Augmented Interval // ------------------------------------------------------------------------ - "augmented_unison": 1.059, // Slightly higher than perfect unison - "augmented_second": 1.122, // Slightly higher than major second - "augmented_third": 1.189, // Slightly higher than major third - "augmented_fourth": 1.414, // Augmented fourth, also known as tritone - "augmented_fifth": 1.587, // Slightly higher than perfect fifth - "augmented_sixth": 1.682, // Slightly higher than major sixth - "augmented_seventh": 1.782, // Slightly higher than major seventh - "augmented_octave": 2.059, // Slightly higher than perfect octave + "augmented_unison": 1.059, + // Slightly higher than perfect unison + "augmented_second": 1.122, + // Slightly higher than major second + "augmented_third": 1.189, + // Slightly higher than major third + "augmented_fourth": 1.414, + // Augmented fourth, also known as tritone + "augmented_fifth": 1.587, + // Slightly higher than perfect fifth + "augmented_sixth": 1.682, + // Slightly higher than major sixth + "augmented_seventh": 1.782, + // Slightly higher than major seventh + "augmented_octave": 2.059, + // Slightly higher than perfect octave // Musical Diminished Interval // ------------------------------------------------------------------------ - "diminished_unison": 0.943, // A diminished unison, slightly less than a perfect unison - "diminished_second": 1.053, // Diminished second interval, slightly less than a minor second - "diminished_third": 1.122, // Diminished third interval, slightly less than a minor third - "diminished_fourth": 1.260, // Diminished fourth, slightly less than a perfect fourth - "diminished_fifth": 1.414, // Tritone, halfway between a perfect fourth and perfect fifth - "diminished_sixth": 1.587, // Diminished sixth interval, slightly less than a major sixth - "diminished_seventh": 1.782, // Diminished seventh interval, slightly less than a major seventh - "diminished_octave": 1.961, // A diminished octave, slightly less than a perfect octave - + "diminished_unison": 0.943, + // A diminished unison, slightly less than a perfect unison + "diminished_second": 1.053, + // Diminished second interval, slightly less than a minor second + "diminished_third": 1.122, + // Diminished third interval, slightly less than a minor third + "diminished_fourth": 1.26, + // Diminished fourth, slightly less than a perfect fourth + "diminished_fifth": 1.414, + // Tritone, halfway between a perfect fourth and perfect fifth + "diminished_sixth": 1.587, + // Diminished sixth interval, slightly less than a major sixth + "diminished_seventh": 1.782, + // Diminished seventh interval, slightly less than a major seventh + "diminished_octave": 1.961, + // A diminished octave, slightly less than a perfect octave // Mathematical Constants // ======================================================================== // These ratios are derived from important mathematical constants. - // Root // ------------------------------------------------------------------------ - "root_two": 1.414, // Square root of 2 - "root_three": 1.732, // Square root of 3 - "root_four": 2, // Square root of 4 - "root_five": 2.236, // Square root of 5 - "golden_ratio": 1.618, - "silver_ratio": 2.414, // Analogous to the golden ratio - "bronze_ratio": 1.927, // Analogous to silver and golden ratios - "phi": 1.618, // Another name for the golden ratio - "pi": 3.142, // Mathematical Pi value - "euler": 2.718, // Euler's number + "root_two": 1.414, + // Square root of 2 + "root_three": 1.732, + // Square root of 3 + "root_four": 2, + // Square root of 4 + "root_five": 2.236, + // Square root of 5 + "golden_ratio": 1.618, + "silver_ratio": 2.414, + // Analogous to the golden ratio + "bronze_ratio": 1.927, + // Analogous to silver and golden ratios + "phi": 1.618, + // Another name for the golden ratio + "pi": 3.142, + // Mathematical Pi value + "euler": 2.718, + // Euler"s number // Special Ratios // ======================================================================== // Unique ratios derived from specific design, architectural, or theoretical contexts. - // Special // ------------------------------------------------------------------------ - "pythagorean": 1.732, // Pythagorean constant, square root of 3 - "square": 1.414, // Square root of 2 - "fibonacci": 1.618, // Fibonacci sequence ratio - "plastic_number": 1.324, // Plastic constant, another unique irrational number - "feigenbaum": 4.669, // Feigenbaum constant in chaos theory - "apollonian": 1.306, // Apollonian gasket, related to circle packing - "cosmic_ratio": 1.273, // Based on cosmic geometry - "egyptian_fraction": 1.571, // Ancient Egyptian architecture ratio - "harmonic_mean": 1.455, // Harmonic mean, a type of average - "gauss_constant": 0.834, // Gauss's constant related to the arithmetic-geometric mean - "super_golden": 2.058, // Super golden ratio, a higher order of the golden ratio + "pythagorean": 1.732, + // Pythagorean constant, square root of 3 + "square": 1.414, + // Square root of 2 + "fibonacci": 1.618, + // Fibonacci sequence ratio + "plastic_number": 1.324, + // Plastic constant, another unique irrational number + "feigenbaum": 4.669, + // Feigenbaum constant in chaos theory + "apollonian": 1.306, + // Apollonian gasket, related to circle packing + "cosmic_ratio": 1.273, + // Based on cosmic geometry + "egyptian_fraction": 1.571, + // Ancient Egyptian architecture ratio + "harmonic_mean": 1.455, + // Harmonic mean, a type of average + "gauss_constant": 0.834, + // Gauss"s constant related to the arithmetic-geometric mean + "super_golden": 2.058, + // Super golden ratio, a higher order of the golden ratio // Design & Architecture Ratios // ------------------------------------------------------------------------ - - "parthenon_ratio": 1.618, - "le_corbusier": 1.618, - "vesica_piscis": 1.732 - + "parthenon_ratio": 1.618, + "le_corbusier": 1.618, + "vesica_piscis": 1.732 ) !default; diff --git a/dist/scss/variables/_scale.scss b/dist/scss/variables/_scale.scss index 2003a78..ae15157 100644 --- a/dist/scss/variables/_scale.scss +++ b/dist/scss/variables/_scale.scss @@ -3,15 +3,15 @@ // ============================================================================ //// -/// +/// /// Scale Variables Module /// =========================================================================== -/// +/// /// This module defines the base typographic and spacing scales used throughout -/// the project, leveraging a rhythm-based approach for consistent vertical -/// spacing and typographic hierarchy. The Kyū Point and Baseline scales +/// the project, leveraging a rhythm-based approach for consistent vertical +/// spacing and typographic hierarchy. The Kyū Point and Baseline scales /// provide a flexible system for responsive design. -/// +/// /// @group Scale /// @author Scape Agency /// @link https://unit.gl @@ -19,7 +19,7 @@ /// @todo None /// @requires "unit" - module for unit conversion and scaling functions. /// @access public -/// +/// //// @@ -29,129 +29,133 @@ @use "unit" as *; - // ============================================================================ // Variables // ============================================================================ - -/// +/// /// The base rhythm unit used for vertical spacing and typography. -/// +/// /// @name $rhythm_base /// @type Length -/// +/// $rhythm_base: $q * 4 !default; - -/// +/// /// The ratio of line height to font size, defining the line height. -/// +/// /// @name $line_height_ratio /// @type Number -/// +/// $line_height_ratio: 1.5 !default; - -/// +/// /// A scalar to define the base font size relative to the rhythm base. -/// +/// /// @name $font_size_scalar /// @type Number -/// +/// $font_size_scalar: 4 !default; - -/// +/// /// A scalar to define the base line height, calculated from the line height /// ratio and font size scalar. -/// +/// /// @name $line_height_scalar /// @type Length -/// +/// $line_height_scalar: calc($line_height_ratio * $font_size_scalar) !default; - -/// +/// /// The base font size, calculated as a multiple of the rhythm base. -/// +/// /// @name $font_size_base /// @type Length -/// +/// $font_size_base: calc($font_size_scalar * $rhythm_base) !default; - -/// +/// /// The base line height, calculated from the line height scalar and rhythm /// base. -/// +/// /// @name $line_height_base /// @type Length -/// +/// $line_height_base: calc($line_height_scalar * $rhythm_base) !default; - -/// +/// /// Typographic Scale Map /// --------------------------------------------------------------------------- -/// +/// /// A modular scale for typography, based on rhythm units. Each step in the /// scale is a multiple of the rhythm base. -/// +/// /// @name $typographic_scale /// @type Map -/// +/// $typographic_scale: ( - 1: q(4), - 2: q(6), // +2 units - 3: q(8), // +2 units - 4: q(10), // +2 units - 5: q(12), // +2 units - 6: q(14), // +2 units - 7: q(16), // +2 units - 8: q(20), // +4 units - 9: q(24), // +4 units - 10: q(28), // +4 units - 11: q(32), // +4 units - 12: q(36), // +4 units - 13: q(40), // +4 units - 14: q(48), // +8 units - 15: q(56), // +8 units - 16: q(64), // +8 units - 17: q(72) // +8 units + 1: q(4), + 2: q(6), + // +2 units + 3: q(8), + // +2 units + 4: q(10), + // +2 units + 5: q(12), + // +2 units + 6: q(14), + // +2 units + 7: q(16), + // +2 units + 8: q(20), + // +4 units + 9: q(24), + // +4 units + 10: q(28), + // +4 units + 11: q(32), + // +4 units + 12: q(36), + // +4 units + 13: q(40), + // +4 units + 14: q(48), + // +8 units + 15: q(56), + // +8 units + 16: q(64), + // +8 units + 17: q(72), // +8 units ) !default; - /// /// Kyū Point Scale /// --------------------------------------------------------------------------- -/// +/// /// The base scaling factor for the Kyū point scale. -/// +/// /// @name $basepoint_scale /// @type Number -/// +/// $basepoint_scale: 4 !default; - -/// +/// /// Calculates a Kyū point value based on the basepoint scale. -/// +/// /// @name basepoint /// @param {Number} $value - The multiplier to apply to the base point scale. /// @return {Length} The calculated Kyū point value. -/// +/// @function basepoint($value) { @return calc($q * $value * $basepoint_scale); } - -/// +/// /// A scale of Kyū points, used for fine-tuned spacing and sizing. -/// +/// /// @name $basepoint /// @type Map -/// +/// $basepoint: ( 1: basepoint(1), 2: basepoint(2), @@ -164,41 +168,39 @@ $basepoint: ( 9: basepoint(9), 10: basepoint(10), 11: basepoint(11), - 12: basepoint(12) + 12: basepoint(12), ) !default; - /// /// Kyū Baseline Scale /// --------------------------------------------------------------------------- -/// +/// /// The base scaling factor for the Kyū baseline grid. -/// +/// /// @name $baseline_scale /// @type Number -/// +/// $baseline_scale: 5 !default; - -/// +/// /// Calculates a baseline grid value based on the baseline scale. -/// +/// /// @name baseline /// @type Function /// @param {Number} $value - The multiplier to apply to the baseline scale. /// @return {Length} The calculated baseline grid value. -/// +/// @function baseline($value) { @return calc($q * $value * $baseline_scale); } -/// +/// /// A scale for the baseline grid, used for consistent vertical rhythm in /// layouts. -/// +/// /// @name $baseline /// @type Map -/// +/// $baseline: ( 1: baseline(1), 2: baseline(2), @@ -211,62 +213,86 @@ $baseline: ( 9: baseline(9), 10: baseline(10), 11: baseline(11), - 12: baseline(12) + 12: baseline(12), ) !default; - -/// +/// /// Musical Scales Map /// --------------------------------------------------------------------------- -/// +/// /// A map representing various musical scales by their degree. /// These scales can be used to inform design decisions, such as rhythm-based /// spacing or modular scale ratios in typography. -/// +/// /// @name scale_musical /// @type Map -/// +/// $scale_musical: ( - "monotonic": 1, // Single tone scale - "ditonic": 2, // Two-tone scale - "tritonic": 3, // Three-tone scale - "tetratonic": 4, // Four-tone scale - "pentatonic": 5, // Five-tone scale, commonly used in music - "hexatonic": 6, // Six-tone scale - "peptatonic": 7, // Seven-tone scale - "octatonic": 8, // Eight-tone scale - "nonatonic": 9, // Nine-tone scale - "dodecatonic": 12 // Twelve-tone scale, covers all semitones in an octave + "monotonic": 1, + // Single tone scale + "ditonic": 2, + // Two-tone scale + "tritonic": 3, + // Three-tone scale + "tetratonic": 4, + // Four-tone scale + "pentatonic": 5, + // Five-tone scale, commonly used in music + "hexatonic": 6, + // Six-tone scale + "peptatonic": 7, + // Seven-tone scale + "octatonic": 8, + // Eight-tone scale + "nonatonic": 9, + // Nine-tone scale + "dodecatonic": 12, // Twelve-tone scale, covers all semitones in an octave ) !default; - /// Classic Typographic Scale /// --------------------------------------------------------------------------- -/// +/// /// A classic typographic scale that has historical significance, /// often used in design software and by typographers since the Renaissance. /// This scale ensures harmonious and aesthetically pleasing text sizing. -/// +/// /// @name typographic_scale_classic /// @type Map -/// +/// $typographic_scale_classic: ( - 1: q( 6), // 6q - 2: q( 7), // 7q (+1) - 3: q( 8), // 8q (+1) - 4: q( 9), // 9q (+1) - 5: q(10), // 10q (+1) - 6: q(11), // 11q (+1) - 7: q(12), // 12q (+1) - 8: q(14), // 14q (+2) - 9: q(16), // 16q (+2) - 10: q(18), // 18q (+2) - 11: q(21), // 21q (+3) - 12: q(24), // 24q (+3) - 13: q(36), // 36q (+12) - 14: q(48), // 48q (+12) - 15: q(60), // 60q (+12) - 16: q(72), // 72q (+12) - 17: q(84), // 84q (+12) - 18: q(96) // 96q (+12) + 1: q(6), + // 6q + 2: q(7), + // 7q (+1) + 3: q(8), + // 8q (+1) + 4: q(9), + // 9q (+1) + 5: q(10), + // 10q (+1) + 6: q(11), + // 11q (+1) + 7: q(12), + // 12q (+1) + 8: q(14), + // 14q (+2) + 9: q(16), + // 16q (+2) + 10: q(18), + // 18q (+2) + 11: q(21), + // 21q (+3) + 12: q(24), + // 24q (+3) + 13: q(36), + // 36q (+12) + 14: q(48), + // 48q (+12) + 15: q(60), + // 60q (+12) + 16: q(72), + // 72q (+12) + 17: q(84), + // 84q (+12) + 18: q(96), // 96q (+12) ) !default; diff --git a/dist/scss/variables/_unit.scss b/dist/scss/variables/_unit.scss index 274fbc2..a1255ea 100644 --- a/dist/scss/variables/_unit.scss +++ b/dist/scss/variables/_unit.scss @@ -3,15 +3,15 @@ // ============================================================================ //// -/// +/// /// Unit Variables Module /// =========================================================================== -/// +/// /// This module defines a responsive typography system using the Kyū /// measurement system. The system is based on the rem unit and provides /// utility functions and mixins to apply fluid typography across various /// screen sizes. -/// +/// /// Dependencies: /// - view: For viewport-related variables. /// - functions: For utility functions such as `unit_strip`. @@ -22,7 +22,7 @@ /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// @@ -34,74 +34,59 @@ @use "view" as *; @use "../functions" as *; - // ============================================================================ // Variables // ============================================================================ - /// /// The base unit in the Kyū measurement system. It represents 1/16th of a rem, /// which is equivalent to 1px or 0.25mm. -/// +/// /// @name $q /// @type Length -/// -$q: 0.0625rem !default; // 1px, or 0.25mm - +/// +$q: 0.0625rem !default; // 1px, or 0.25mm -/// +/// /// The minimum Kyū size used for fluid typography. -/// +/// /// @type Length /// @name $q_min -/// +/// $q_min: 0.75px !default; - -/// +/// /// The maximum Kyū size used for fluid typography. -/// +/// /// @type Length /// @name $q_max -$q_max: 1.50px !default; +$q_max: 1.5px !default; - -/// +/// /// The minimum font size calculated using the minimum Kyū size, based on /// the rem unit. -/// +/// /// @type Length /// @name $font_min -/// +/// $font_min: calc((1rem / $q) * $q_min) !default; - /// /// The maximum font size calculated using the maximum Kyū size, based on /// the rem unit. -/// +/// /// @type Length /// @name $font_max $font_max: calc((1rem / $q) * $q_max) !default; - - - - - - - - - -/// +/// /// This function returns a calculated value in Kyū units, making it easy to /// apply multiples of the base unit. -/// +/// /// @name q /// @param {Number} $multiplier - The multiplier to apply to the base Kyū unit. /// @return {Length} The calculated value in Kyū units. -/// +/// @function q($multiplier) { @return calc($q * $multiplier); } diff --git a/dist/scss/variables/_view.scss b/dist/scss/variables/_view.scss index 1a6f229..ac2daac 100644 --- a/dist/scss/variables/_view.scss +++ b/dist/scss/variables/_view.scss @@ -3,10 +3,10 @@ // ============================================================================ //// -/// +/// /// View Variables Module /// =========================================================================== -/// +/// /// This module defines the breakpoints for responsive design, categorized by /// device types. It leverages a base unit to calculate breakpoint values for /// consistency across various screen sizes. @@ -24,55 +24,55 @@ /// calculating breakpoints. /// /// Example Usage: -/// @media (min-width: map-get($breakpoints, md)) { +/// @media (min-width: map.get($breakpoints, md)) { /// // Styles for medium devices and up /// } -/// +/// /// @group View /// @author Scape Agency /// @link https://unit.gl /// @since 0.1.0 initial release /// @todo None /// @access public -/// +/// //// - // ============================================================================ // Use // ============================================================================ +@use "sass:map"; // ============================================================================ // Variables // ============================================================================ - -/// +/// /// Base unit size used for calculating breakpoints. Defaults to 16px. -/// +/// /// @name $base_screen_unit /// @type Length -/// +/// $base_screen_unit: 16px !default; - - -/// +/// /// A map defining the breakpoints for responsive design. Each key represents /// a different device category, with the value calculated using the base /// screen unit. -/// +/// /// - **xs**: 320px (Extra small devices like mobile phones) /// - **sm**: 480px (Small devices like tablets) /// - **md**: 768px (Medium devices like laptops) /// - **lg**: 1024px (Large devices like desktops) /// - **xl**: 1280px (Extra large devices like TVs) /// - **sl**: 1440px (Super large devices like large TVs) -/// +/// /// @name $breakpoints /// @type Map -/// +/// + + + // $breakpoints: ( // xs: calc_breakpoint($base_screen_unit, 20), // 320px - Extra small devices (Mobile) // sm: calc_breakpoint($base_screen_unit, 30), // 480px - Small devices (Tablets) @@ -83,78 +83,75 @@ $base_screen_unit: 16px !default; // ) !default; $breakpoints: ( - xs: 320px, // 320px - Extra small devices (Mobile) - sm: 480px, // 480px - Small devices (Tablets) - md: 768px, // 768px - Medium devices (Laptops) - lg: 1024px, // 1024px - Large devices (Desktops) - xl: 1280px, // 1280px - Extra large devices (TV) - sl: 1440px, // 1440px - Super large devices (Large TV) + xs: 320px, + // 320px - Extra small devices (Mobile) + sm: 480px, + // 480px - Small devices (Tablets) + md: 768px, + // 768px - Medium devices (Laptops) + lg: 1024px, + // 1024px - Large devices (Desktops) + xl: 1280px, + // 1280px - Extra large devices (TV) + sl: 1440px, // 1440px - Super large devices (Large TV) ) !default; - -/// +/// /// Exposes the value of the `xs` breakpoint for direct access. -/// +/// /// @name $media_xs /// @type Length -/// -$media_xs: map-get($breakpoints, xs) !default; - +/// +$media_xs: map.get($breakpoints, xs) !default; -/// +/// /// Exposes the value of the `sm` breakpoint for direct access. -/// +/// /// @name $media_sm /// @type Length -/// -$media_sm: map-get($breakpoints, sm) !default; - +/// +$media_sm: map.get($breakpoints, sm) !default; -/// +/// /// Exposes the value of the `md` breakpoint for direct access. -/// +/// /// @name $media_md /// @type Length -/// -$media_md: map-get($breakpoints, md) !default; - +/// +$media_md: map.get($breakpoints, md) !default; -/// +/// /// Exposes the value of the `lg` breakpoint for direct access. -/// +/// /// @name $media_lg /// @type Length -/// -$media_lg: map-get($breakpoints, lg) !default; - +/// +$media_lg: map.get($breakpoints, lg) !default; -/// +/// /// Exposes the value of the `xl` breakpoint for direct access. -/// +/// /// @name $media_xl /// @type Length -/// -$media_xl: map-get($breakpoints, xl) !default; - +/// +$media_xl: map.get($breakpoints, xl) !default; -/// +/// /// Exposes the value of the `sl` breakpoint for direct access. -/// +/// /// @name $media_sl /// @type Length -/// -$media_sl: map-get($breakpoints, sl) !default; - +/// +$media_sl: map.get($breakpoints, sl) !default; -/// +/// /// Calculates the difference between the `sl` and `xs` breakpoints. -/// +/// /// @name $media_dif /// @type Length -/// +/// $media_dif: calc($media_sl - $media_xs); - // Uncomment below if you want to use the following predefined breakpoints for various devices: // $media_min: 320px !default; // Mobile diff --git a/dist/ts/AspectRatio.ts b/dist/ts/AspectRatio.ts index 7aad4fc..120a94c 100644 --- a/dist/ts/AspectRatio.ts +++ b/dist/ts/AspectRatio.ts @@ -1,25 +1,46 @@ -class AspectRatio { +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class AspectRatio { + + // Parameters + // ======================================================================== + width: Unit; height: Unit; + // Constructor + // ======================================================================== + constructor(width: Unit, height: Unit) { this.width = width; this.height = height; } + // Methods + // ======================================================================== + calculateRatio(): number { return this.width.value / this.height.value; } scaleToWidth(newWidth: Unit): Unit { - const ratio = this.calculateRatio(); - const newHeightValue = newWidth.value / ratio; + const ratio: number = this.calculateRatio(); + const newHeightValue: number = newWidth.value / ratio; return new Unit(newHeightValue, newWidth.unit); } scaleToHeight(newHeight: Unit): Unit { - const ratio = this.calculateRatio(); - const newWidthValue = newHeight.value * ratio; + const ratio: number = this.calculateRatio(); + const newWidthValue: number = newHeight.value * ratio; return new Unit(newWidthValue, newHeight.unit); } diff --git a/dist/ts/Border.ts b/dist/ts/Border.ts index 522accc..86aefab 100644 --- a/dist/ts/Border.ts +++ b/dist/ts/Border.ts @@ -1,16 +1,46 @@ -type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none'; +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + +// ============================================================================ +// Types +// ============================================================================ + +type BorderStyle = "solid" | "dashed" | "dotted" | "double" | "none"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Border { + + // Parameters + // ======================================================================== -class Border { width: Unit; style: BorderStyle; color: string; - constructor(width: Unit, style: BorderStyle, color: string) { + + // Constructor + // ======================================================================== + + constructor( + width: Unit, + style: BorderStyle, + color: string + ) { this.width = width; this.style = style; this.color = color; } + // Methods + // ======================================================================== + setWidth(newWidth: Unit): void { this.width = newWidth; } @@ -26,4 +56,5 @@ class Border { toString(): string { return `Border: ${this.width.toString()} ${this.style} ${this.color}`; } -} \ No newline at end of file + +} diff --git a/dist/ts/BoxModel.ts b/dist/ts/BoxModel.ts index d61bbae..7637de1 100644 --- a/dist/ts/BoxModel.ts +++ b/dist/ts/BoxModel.ts @@ -1,16 +1,40 @@ -class BoxModel { +// ============================================================================ +// Import +// ============================================================================ + +import Border from "./Border"; +import Size from "./Size"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class BoxModel { + + // Parameters + // ======================================================================== + margin: Margin; padding: Padding; border: Border; size: Size; - constructor(margin: Margin, padding: Padding, border: Border, size: Size) { + // Constructor + // ======================================================================== + + constructor( + margin: Margin, + padding: Padding, + border: Border, + size: Size + ) { if ( margin.top.unit !== size.width.unit || padding.top.unit !== size.width.unit || border.width.unit !== size.width.unit ) { - throw new Error('All units in BoxModel must match'); + throw new Error("All units in BoxModel must match"); } this.margin = margin; this.padding = padding; @@ -18,6 +42,10 @@ class BoxModel { this.size = size; } + + // Methods + // ======================================================================== + setMargin(margin: Margin): void { this.margin = margin; } @@ -37,4 +65,4 @@ class BoxModel { toString(): string { return `BoxModel:\n Size: ${this.size.toString()}\n Margin: ${this.margin.toString()}\n Padding: ${this.padding.toString()}\n Border: ${this.border.toString()}`; } -} \ No newline at end of file +} diff --git a/dist/ts/FlexContainer.ts b/dist/ts/FlexContainer.ts index 5d794ca..51db828 100644 --- a/dist/ts/FlexContainer.ts +++ b/dist/ts/FlexContainer.ts @@ -1,19 +1,42 @@ -type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; -type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'; +// ============================================================================ +// Import +// ============================================================================ + + +// ============================================================================ +// Types +// ============================================================================ + +type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse"; +type FlexWrap = "nowrap" | "wrap" | "wrap-reverse"; + +// ============================================================================ +// Classes +// ============================================================================ + + + +export default class FlexContainer { + + // Parameters + // ======================================================================== -class FlexContainer { flexDirection: FlexDirection; flexWrap: FlexWrap; justifyContent: Justify; alignItems: Align; alignContent: Align; + + // Constructor + // ======================================================================== + constructor( - flexDirection: FlexDirection = 'row', - flexWrap: FlexWrap = 'nowrap', - justifyContent: Justify = 'start', - alignItems: Align = 'stretch', - alignContent: Align = 'stretch' + flexDirection: FlexDirection = "row", + flexWrap: FlexWrap = "nowrap", + justifyContent: Justify = "start", + alignItems: Align = "stretch", + alignContent: Align = "stretch" ) { this.flexDirection = flexDirection; this.flexWrap = flexWrap; @@ -22,6 +45,10 @@ class FlexContainer { this.alignContent = alignContent; } + + // Methods + // ======================================================================== + setDirection(direction: FlexDirection): void { this.flexDirection = direction; } @@ -45,4 +72,4 @@ class FlexContainer { toString(): string { return `FlexContainer: direction ${this.flexDirection}, wrap ${this.flexWrap}, justify ${this.justifyContent}, align-items ${this.alignItems}, align-content ${this.alignContent}`; } -} \ No newline at end of file +} diff --git a/dist/ts/Grid.ts b/dist/ts/Grid.ts index 1628306..83f282e 100644 --- a/dist/ts/Grid.ts +++ b/dist/ts/Grid.ts @@ -1,14 +1,39 @@ -class Grid { +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Grid { + + // Parameters + // ======================================================================== + columns: number; gutter: Unit; rowHeight: Unit; - constructor(columns: number, gutter: Unit, rowHeight: Unit) { + // Constructor + // ======================================================================== + + constructor( + columns: number, + gutter: Unit, + rowHeight: Unit + ) { this.columns = columns; this.gutter = gutter; this.rowHeight = rowHeight; } + // Methods + // ======================================================================== + getColumnWidth(containerWidth: Unit): Unit { const totalGutterWidth = this.gutter.value * (this.columns - 1); const columnWidth = (containerWidth.value - totalGutterWidth) / this.columns; @@ -18,4 +43,4 @@ class Grid { toString(): string { return `Grid: ${this.columns} columns, gutter ${this.gutter.toString()}, row height ${this.rowHeight.toString()}`; } -} \ No newline at end of file +} diff --git a/dist/ts/GridContainer.ts b/dist/ts/GridContainer.ts index da865d0..be6cae2 100644 --- a/dist/ts/GridContainer.ts +++ b/dist/ts/GridContainer.ts @@ -1,16 +1,42 @@ -class GridContainer { +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class GridContainer { + + // Parameters + // ======================================================================== + rows: number; columns: number; rowGap: Unit; columnGap: Unit; - constructor(rows: number, columns: number, rowGap: Unit, columnGap: Unit) { + // Constructor + // ======================================================================== + + constructor( + rows: number, + columns: number, + rowGap: Unit, + columnGap: Unit + ) { this.rows = rows; this.columns = columns; this.rowGap = rowGap; this.columnGap = columnGap; } + // Methods + // ======================================================================== + setRows(rows: number): void { this.rows = rows; } @@ -30,4 +56,4 @@ class GridContainer { toString(): string { return `GridContainer: ${this.rows} rows, ${this.columns} columns, row-gap ${this.rowGap.toString()}, column-gap ${this.columnGap.toString()}`; } -} \ No newline at end of file +} diff --git a/dist/ts/Layout.ts b/dist/ts/Layout.ts index 7d935d4..3264be8 100644 --- a/dist/ts/Layout.ts +++ b/dist/ts/Layout.ts @@ -1,14 +1,41 @@ -type Align = 'start' | 'center' | 'end' | 'stretch'; -type Justify = 'start' | 'center' | 'end' | 'space-between' | 'space-around'; +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Types +// ============================================================================ + +type Align = "start" | "center" | "end" | "stretch"; +type Justify = "start" | "center" | "end" | "space-between" | "space-around"; + +// ============================================================================ +// Classes +// ============================================================================ + + + +export default class Layout { + + // Parameters + // ======================================================================== -class Layout { width: Unit; height: Unit; align: Align; justify: Justify; - direction: 'row' | 'column'; + direction: "row" | "column"; - constructor(width: Unit, height: Unit, align: Align = 'stretch', justify: Justify = 'start', direction: 'row' | 'column' = 'row') { + // Constructor + // ======================================================================== + + constructor( + width: Unit, + height: Unit, + align: Align = "stretch", justify: Justify = "start", direction: "row" | "column" = "row") { this.width = width; this.height = height; this.align = align; @@ -16,6 +43,9 @@ class Layout { this.direction = direction; } + // Methods + // ======================================================================== + setAlign(align: Align): void { this.align = align; } @@ -24,11 +54,11 @@ class Layout { this.justify = justify; } - setDirection(direction: 'row' | 'column'): void { + setDirection(direction: "row" | "column"): void { this.direction = direction; } toString(): string { return `Layout: ${this.direction}, width ${this.width.toString()}, height ${this.height.toString()}, align ${this.align}, justify ${this.justify}`; } -} \ No newline at end of file +} diff --git a/dist/ts/Position.ts b/dist/ts/Position.ts index a1ce0df..d8ce762 100644 --- a/dist/ts/Position.ts +++ b/dist/ts/Position.ts @@ -1,15 +1,39 @@ -class Position { +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Position { + + // Parameters + // ======================================================================== + x: Unit; y: Unit; - constructor(x: Unit, y: Unit) { + // Constructor + // ======================================================================== + + constructor( + x: Unit, + y: Unit + ) { if (x.unit !== y.unit) { - throw new Error('X and Y must have the same unit'); + throw new Error("X and Y must have the same unit"); } this.x = x; this.y = y; } + // Methods + // ======================================================================== + add(other: Position): Position { return new Position(this.x.add(other.x), this.y.add(other.y)); } @@ -25,4 +49,5 @@ class Position { toString(): string { return `Position: (${this.x.toString()}, ${this.y.toString()})`; } -} \ No newline at end of file + +} diff --git a/dist/ts/Rectangle.ts b/dist/ts/Rectangle.ts index 4523fc7..a6691ed 100644 --- a/dist/ts/Rectangle.ts +++ b/dist/ts/Rectangle.ts @@ -1,15 +1,38 @@ -class Rectangle { +// ============================================================================ +// Import +// ============================================================================ + +import Position from "./Position"; +import Size from "./Size"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Rectangle { + + // Parameters + // ======================================================================== + position: Position; size: Size; + // Constructor + // ======================================================================== + constructor(position: Position, size: Size) { if (position.x.unit !== size.width.unit || position.y.unit !== size.height.unit) { - throw new Error('Position and Size units must match'); + throw new Error("Position and Size units must match"); } this.position = position; this.size = size; } + + // Methods + // ======================================================================== + move(newPosition: Position): Rectangle { return new Rectangle(newPosition, this.size); } @@ -25,4 +48,4 @@ class Rectangle { toString(): string { return `Rectangle: Position(${this.position.toString()}), Size(${this.size.toString()})`; } -} \ No newline at end of file +} diff --git a/dist/ts/ResponsiveImage.ts b/dist/ts/ResponsiveImage.ts index 0ecd767..3ea022c 100644 --- a/dist/ts/ResponsiveImage.ts +++ b/dist/ts/ResponsiveImage.ts @@ -1,18 +1,37 @@ -class ResponsiveImage { +// ============================================================================ +// Import +// ============================================================================ + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class ResponsiveImage { + + // Parameters + // ======================================================================== + sources: Map; // Map of breakpoint to image URL altText: string; + // Constructor + // ======================================================================== + constructor(altText: string) { this.sources = new Map(); this.altText = altText; } + // Methods + // ======================================================================== + addSource(breakpoint: number, url: string): void { this.sources.set(breakpoint, url); } getSource(viewportWidth: number): string { - let selectedSource = ''; + let selectedSource = ""; this.sources.forEach((url, breakpoint) => { if (viewportWidth >= breakpoint) { selectedSource = url; @@ -25,4 +44,4 @@ class ResponsiveImage { const source = this.getSource(viewportWidth); return `${this.altText}`; } -} \ No newline at end of file +} diff --git a/dist/ts/ResponsiveScale.ts b/dist/ts/ResponsiveScale.ts index 9a78b07..f20ad92 100644 --- a/dist/ts/ResponsiveScale.ts +++ b/dist/ts/ResponsiveScale.ts @@ -1,14 +1,37 @@ -class ResponsiveScale { +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; +import Viewport from "./Viewport"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class ResponsiveScale { + + // Parameters + // ======================================================================== + viewport: Viewport; baseSize: Unit; scaleFactor: number; + // Constructor + // ======================================================================== + constructor(viewport: Viewport, baseSize: Unit, scaleFactor: number) { this.viewport = viewport; this.baseSize = baseSize; this.scaleFactor = scaleFactor; } + + // Methods + // ======================================================================== + calculateResponsiveSize(): Unit { const ratio = this.viewport.width.value / 1920; // Assuming 1920px is the base const scaledValue = this.baseSize.value * Math.pow(this.scaleFactor, ratio); diff --git a/dist/ts/Size.ts b/dist/ts/Size.ts index a505005..4d4698f 100644 --- a/dist/ts/Size.ts +++ b/dist/ts/Size.ts @@ -1,15 +1,36 @@ -class Size { +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Size { + + // Parameters + // ======================================================================== + width: Unit; height: Unit; + // Constructor + // ======================================================================== + constructor(width: Unit, height: Unit) { if (width.unit !== height.unit) { - throw new Error('Width and height must have the same unit'); + throw new Error("Width and height must have the same unit"); } this.width = width; this.height = height; } + // Methods + // ======================================================================== + add(other: Size): Size { return new Size(this.width.add(other.width), this.height.add(other.height)); } @@ -29,4 +50,5 @@ class Size { toString(): string { return `Size: ${this.width.toString()} x ${this.height.toString()}`; } -} \ No newline at end of file + +} diff --git a/dist/ts/Spacing.ts b/dist/ts/Spacing.ts index 9bf329d..36b37fa 100644 --- a/dist/ts/Spacing.ts +++ b/dist/ts/Spacing.ts @@ -1,12 +1,37 @@ -class Spacing { +// ============================================================================ +// Import +// ============================================================================ + +import { default as Unit, default as UnitType } from "./Unit"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Spacing { + + // Parameters + // ======================================================================== + top: Unit; right: Unit; bottom: Unit; left: Unit; - constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) { - if (top.unit !== right.unit || top.unit !== bottom.unit || top.unit !== left.unit) { - throw new Error('All sides must have the same unit'); + // Constructor + // ======================================================================== + + constructor( + top: Unit, + right: Unit, + bottom: Unit, + left: Unit + ) { + if ( + top.unit !== right.unit || top.unit !== bottom.unit || top.unit !== left.unit + ) { + throw new Error("All sides must have the same unit"); } this.top = top; this.right = right; @@ -14,6 +39,9 @@ class Spacing { this.left = left; } + // Methods + // ======================================================================== + add(other: Spacing): Spacing { return new Spacing( this.top.add(other.top), @@ -56,13 +84,23 @@ class Spacing { } class Margin extends Spacing { - constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) { + constructor( + top: Unit, + right: Unit, + bottom: Unit, + left: Unit, + ) { super(top, right, bottom, left); } } class Padding extends Spacing { - constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) { + constructor( + top: Unit, + right: Unit, + bottom: Unit, + left: Unit, + ) { super(top, right, bottom, left); } -} \ No newline at end of file +} diff --git a/dist/ts/Transform.ts b/dist/ts/Transform.ts index 751910e..646589c 100644 --- a/dist/ts/Transform.ts +++ b/dist/ts/Transform.ts @@ -1,6 +1,26 @@ -type AngleUnit = 'deg' | 'rad'; +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Types +// ============================================================================ + +type AngleUnit = "deg" | "rad"; + +// ============================================================================ +// Classes +// ============================================================================ + + +export default class Transform { + + // Parameters + // ======================================================================== -class Transform { translateX: Unit; translateY: Unit; rotate: number; @@ -8,7 +28,17 @@ class Transform { scaleX: number; scaleY: number; - constructor(translateX: Unit, translateY: Unit, rotate: number, rotateUnit: AngleUnit, scaleX: number, scaleY: number) { + // Constructor + // ======================================================================== + + constructor( + translateX: Unit, + translateY: Unit, + rotate: number, + rotateUnit: AngleUnit, + scaleX: number, + scaleY: number + ) { this.translateX = translateX; this.translateY = translateY; this.rotate = rotate; @@ -17,6 +47,9 @@ class Transform { this.scaleY = scaleY; } + // Methods + // ======================================================================== + setTranslation(translateX: Unit, translateY: Unit): void { this.translateX = translateX; this.translateY = translateY; @@ -35,4 +68,4 @@ class Transform { toString(): string { return `Transform: translate(${this.translateX.toString()}, ${this.translateY.toString()}) rotate(${this.rotate}${this.rotateUnit}) scale(${this.scaleX}, ${this.scaleY})`; } -} \ No newline at end of file +} diff --git a/dist/ts/Typography.ts b/dist/ts/Typography.ts index 6e30272..e07355b 100644 --- a/dist/ts/Typography.ts +++ b/dist/ts/Typography.ts @@ -1,13 +1,42 @@ -type FontWeight = 'normal' | 'bold' | number; +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Types +// ============================================================================ + +type FontWeight = "normal" | "bold" | number; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Typography { + + // Parameters + // ======================================================================== -class Typography { fontSize: Unit; fontWeight: FontWeight; lineHeight: Unit; letterSpacing: Unit; - textAlign: 'left' | 'right' | 'center' | 'justify'; + textAlign: "left" | "right" | "center" | "justify"; + + // Constructor + // ======================================================================== - constructor(fontSize: Unit, fontWeight: FontWeight = 'normal', lineHeight: Unit, letterSpacing: Unit, textAlign: 'left' | 'right' | 'center' | 'justify' = 'left') { + constructor( + fontSize: Unit, + fontWeight: FontWeight = "normal", + lineHeight: Unit, + letterSpacing: Unit, + textAlign: "left" | "right" | "center" | "justify" = "left" + ) { this.fontSize = fontSize; this.fontWeight = fontWeight; this.lineHeight = lineHeight; @@ -15,6 +44,10 @@ class Typography { this.textAlign = textAlign; } + + // Methods + // ======================================================================== + setFontSize(fontSize: Unit): void { this.fontSize = fontSize; } @@ -31,11 +64,12 @@ class Typography { this.letterSpacing = letterSpacing; } - setTextAlign(textAlign: 'left' | 'right' | 'center' | 'justify'): void { + setTextAlign(textAlign: "left" | "right" | "center" | "justify"): void { this.textAlign = textAlign; } toString(): string { return `Typography: font-size ${this.fontSize.toString()}, weight ${this.fontWeight}, line-height ${this.lineHeight.toString()}, letter-spacing ${this.letterSpacing.toString()}, text-align ${this.textAlign}`; } -} \ No newline at end of file + +} diff --git a/dist/ts/Unit.ts b/dist/ts/Unit.ts index bd30a45..3edb7ad 100644 --- a/dist/ts/Unit.ts +++ b/dist/ts/Unit.ts @@ -1,14 +1,38 @@ -type UnitType = 'px' | 'em' | '%' | 'rem' | 'mm' | 'cm' | 'in'; +// ============================================================================ +// Import +// ============================================================================ + + +// ============================================================================ +// Types +// ============================================================================ + +type UnitType = "px" | "em" | "%" | "rem" | "mm" | "cm" | "in"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Unit { + + // Parameters + // ======================================================================== -class Unit { value: number; unit: UnitType; + // Constructor + // ======================================================================== + constructor(value: number, unit: UnitType) { this.value = value; this.unit = unit; } + // Methods + // ======================================================================== + add(other: Unit): Unit { if (this.unit !== other.unit) { throw new Error(`Cannot add units of different types: ${this.unit} and ${other.unit}`); @@ -34,13 +58,13 @@ class Unit { convert(toUnit: UnitType): Unit { // Example conversion: assumes 1in = 96px, 1cm = 37.7953px, etc. const conversionRates: { [key in UnitType]?: number } = { - 'px': 1, - 'em': 16, - 'rem': 16, - 'in': 96, - 'cm': 37.7953, - 'mm': 3.77953, - '%': 1 // Conversion for percentages might be contextual + "px": 1, + "em": 16, + "rem": 16, + "in": 96, + "cm": 37.7953, + "mm": 3.77953, + "%": 1 // Conversion for percentages might be contextual }; if (!conversionRates[this.unit] || !conversionRates[toUnit]) { @@ -54,4 +78,4 @@ class Unit { toString(): string { return `${this.value}${this.unit}`; } -} \ No newline at end of file +} diff --git a/dist/ts/Viewport.ts b/dist/ts/Viewport.ts index 952ef85..eef0522 100644 --- a/dist/ts/Viewport.ts +++ b/dist/ts/Viewport.ts @@ -1,14 +1,41 @@ -class Viewport { +// ============================================================================ +// Import +// ============================================================================ + +import Unit from "./Unit"; + + +// ============================================================================ +// Classes +// ============================================================================ + +export default class Viewport { + + // Parameters + // ======================================================================== + width: Unit; height: Unit; pixelRatio: number; - constructor(width: Unit, height: Unit, pixelRatio: number = 1) { + + // Constructor + // ======================================================================== + + constructor( + width: Unit, + height: Unit, + pixelRatio: number = 1, + ) { this.width = width; this.height = height; this.pixelRatio = pixelRatio; } + + // Methods + // ======================================================================== + resize(newWidth: Unit, newHeight: Unit): void { this.width = newWidth; this.height = newHeight; @@ -21,4 +48,5 @@ class Viewport { toString(): string { return `Viewport: ${this.width.toString()} x ${this.height.toString()} @ ${this.pixelRatio}x pixel ratio`; } -} \ No newline at end of file + +} diff --git a/dist/ts/index.ts b/dist/ts/index.ts index 69fd572..2234b9c 100644 --- a/dist/ts/index.ts +++ b/dist/ts/index.ts @@ -1,3 +1 @@ - - export { };