From 9a3ae99e7df16d82377bca84326d782f6266966d Mon Sep 17 00:00:00 2001 From: Lars van Vianen Date: Mon, 5 Feb 2024 03:32:13 +0100 Subject: [PATCH] v0.0.35 --- VERSION | 2 +- dist/css/unit.gl.css | 476 +++++++----------- dist/css/unit.gl.min.css | 2 +- dist/js/index.d.ts | 1 - dist/js/index.js | 3 - dist/js/unit.gl.min.js | 1 - dist/package.json | 2 +- dist/scss/_global.scss | 2 - dist/scss/_reset.scss | 1 - dist/scss/dev/_banner.scss | 11 + dist/scss/functions/_index.scss | 2 + .../_unit_conversion.scss | 0 .../_unit_functions.scss | 0 dist/scss/index.scss | 18 +- dist/scss/variables/_device.scss | 5 +- dist/scss/variables/_index.scss | 3 +- dist/scss/variables/_scale.scss | 2 +- dist/scss/variables/_unit.scss | 20 +- dist/scss/variables/_view.scss | 8 + package.json | 2 +- src/scss/_global.scss | 2 - src/scss/_reset.scss | 1 - src/scss/dev/_banner.scss | 11 + src/scss/functions/_index.scss | 2 + .../_unit_conversion.scss | 0 .../_unit_functions.scss | 0 src/scss/index.scss | 18 +- src/scss/variables/_device.scss | 5 +- src/scss/variables/_index.scss | 3 +- src/scss/variables/_scale.scss | 2 +- src/scss/variables/_unit.scss | 20 +- src/scss/variables/_view.scss | 8 + test/index.html | 2 + test/index.scss | 2 +- 34 files changed, 272 insertions(+), 365 deletions(-) delete mode 100644 dist/js/index.d.ts delete mode 100644 dist/js/index.js delete mode 100644 dist/js/unit.gl.min.js create mode 100644 dist/scss/dev/_banner.scss rename dist/scss/{variables => functions}/_unit_conversion.scss (100%) rename dist/scss/{variables => functions}/_unit_functions.scss (100%) create mode 100644 src/scss/dev/_banner.scss rename src/scss/{variables => functions}/_unit_conversion.scss (100%) rename src/scss/{variables => functions}/_unit_functions.scss (100%) diff --git a/VERSION b/VERSION index cdd2fd6..e9d5322 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.0.34 \ No newline at end of file +0.0.35 \ No newline at end of file diff --git a/dist/css/unit.gl.css b/dist/css/unit.gl.css index 5a9ed47..d4540da 100644 --- a/dist/css/unit.gl.css +++ b/dist/css/unit.gl.css @@ -1,14 +1,179 @@ -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ +*, +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 { + margin: 0; + -webkit-margin-before: 0; + margin-block-start: 0; + -webkit-margin-after: 0; + margin-block-end: 0; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 0; + margin-inline-end: 0; + padding: 0; +} + +html { + box-sizing: border-box; + -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */ + 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; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */ + box-sizing: inherit; +} + +::before, +::after { + text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ + vertical-align: inherit; +} + +* { + padding: 0; /* Reset `padding` and `margin` of all elements */ + margin: 0; +} + :root { --q: $q; } @@ -18,7 +183,7 @@ html { } @media screen and (min-width: 320px) { html { - font-size: calc(12px + unit_strip(12px) * (100vw - 320px) / unit_strip(1120px)); + font-size: calc(12px + 12 * (100vw - 320px) / 1120); } } @media screen and (min-width: 1440px) { @@ -27,39 +192,6 @@ html { } } -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ .ratio_1x1 { aspect-ratio: 1; width: 100%; @@ -268,39 +400,6 @@ html { display: inline-block; } -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ .guide { position: absolute; top: 0; @@ -337,225 +436,4 @@ html { background-size: 100% 1.5rem; background-image: repeating-linear-gradient(to bottom, cyan 0 1px, transparent 1px 100%); } - -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ -*, -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 { - margin: 0; - -webkit-margin-before: 0; - margin-block-start: 0; - -webkit-margin-after: 0; - margin-block-end: 0; - -webkit-margin-start: 0; - margin-inline-start: 0; - -webkit-margin-end: 0; - margin-inline-end: 0; - padding: 0; -} - -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ -html { - box-sizing: border-box; - -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */ - 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; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */ - box-sizing: inherit; -} - -::before, -::after { - text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */ - vertical-align: inherit; -} - -* { - padding: 0; /* Reset `padding` and `margin` of all elements */ - margin: 0; -} - -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ /*# 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 e787b52..05c19b2 100644 --- a/dist/css/unit.gl.min.css +++ b/dist/css/unit.gl.min.css @@ -1,2 +1,2 @@ -:root{--q:$q}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(12px + unit_strip(12px)*(100vw - 320px)/unit_strip(1120px))}}@media screen and (min-width:1440px){html{font-size:24px}}.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%}.guide,.guide_graph{height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph{background-image:repeating-linear-gradient(180deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%);background-size:.25rem .25rem}.guide_baseline{background-image:repeating-linear-gradient(180deg,cyan 0 1px,transparent 1px 100%);background-size:100% 1.5rem;height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}*,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{margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0}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} +*,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{margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0}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}:root{--q:$q}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}}.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%}.guide,.guide_graph{height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph{background-image:repeating-linear-gradient(180deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%);background-size:.25rem .25rem}.guide_baseline{background-image:repeating-linear-gradient(180deg,cyan 0 1px,transparent 1px 100%);background-size:100% 1.5rem;height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999} /*# sourceMappingURL=to.css.map */ \ No newline at end of file diff --git a/dist/js/index.d.ts b/dist/js/index.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/dist/js/index.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/dist/js/index.js b/dist/js/index.js deleted file mode 100644 index fd2774c..0000000 --- a/dist/js/index.js +++ /dev/null @@ -1,3 +0,0 @@ -"use strict"; -// Copyright 2020 Scape Agency BV -Object.defineProperty(exports, "__esModule", { value: true }); diff --git a/dist/js/unit.gl.min.js b/dist/js/unit.gl.min.js deleted file mode 100644 index 0ae1b53..0000000 --- a/dist/js/unit.gl.min.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";Object.defineProperty(exports,"t",{value:!0}); \ No newline at end of file diff --git a/dist/package.json b/dist/package.json index b4b0753..2d1766d 100644 --- a/dist/package.json +++ b/dist/package.json @@ -1,6 +1,6 @@ { "name": "unit.gl", - "version": "0.0.34", + "version": "0.0.35", "description": "Layout Engine.", "keywords": [ "unit.gl", diff --git a/dist/scss/_global.scss b/dist/scss/_global.scss index 80aa96e..e33a9bf 100644 --- a/dist/scss/_global.scss +++ b/dist/scss/_global.scss @@ -13,8 +13,6 @@ // limitations under the License. -@use "variables" as *; - // Base | Body // ============================================================================ diff --git a/dist/scss/_reset.scss b/dist/scss/_reset.scss index cbdb45c..a8072e5 100644 --- a/dist/scss/_reset.scss +++ b/dist/scss/_reset.scss @@ -12,7 +12,6 @@ // See the License for the specific language governing permissions and // limitations under the License. -@use "variables" as *; // ============================================================================ // Base | Reset diff --git a/dist/scss/dev/_banner.scss b/dist/scss/dev/_banner.scss new file mode 100644 index 0000000..0011fce --- /dev/null +++ b/dist/scss/dev/_banner.scss @@ -0,0 +1,11 @@ +/** +* unit.gl +* +* @description Layout Engine +* @author Scape Agency (https://www.scape.agency) +* @version v1.0.0 +* @copyright 2020-2024 Scape Agency (https://www.scape.agency) +* @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/functions/_index.scss b/dist/scss/functions/_index.scss index 37bf853..aec691b 100644 --- a/dist/scss/functions/_index.scss +++ b/dist/scss/functions/_index.scss @@ -18,3 +18,5 @@ @forward "scale"; @forward "sequence"; +@forward "unit_conversion"; +@forward "unit_functions"; \ No newline at end of file diff --git a/dist/scss/variables/_unit_conversion.scss b/dist/scss/functions/_unit_conversion.scss similarity index 100% rename from dist/scss/variables/_unit_conversion.scss rename to dist/scss/functions/_unit_conversion.scss diff --git a/dist/scss/variables/_unit_functions.scss b/dist/scss/functions/_unit_functions.scss similarity index 100% rename from dist/scss/variables/_unit_functions.scss rename to dist/scss/functions/_unit_functions.scss diff --git a/dist/scss/index.scss b/dist/scss/index.scss index dceb672..1d80247 100644 --- a/dist/scss/index.scss +++ b/dist/scss/index.scss @@ -13,27 +13,15 @@ // limitations under the License. -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ - @charset "utf-8"; @use "sass:math"; +@forward "reset"; +@forward "global"; + @forward "variables"; @forward "functions"; @forward "mixins"; -@forward "reset"; -@forward "global"; - @forward "classes"; diff --git a/dist/scss/variables/_device.scss b/dist/scss/variables/_device.scss index c0725ae..e41b288 100644 --- a/dist/scss/variables/_device.scss +++ b/dist/scss/variables/_device.scss @@ -13,9 +13,8 @@ // limitations under the License. - - // Device Attribute Map +// ============================================================================ $devices: ( // iPhones // ------------------------------------------------------------------------ @@ -76,5 +75,3 @@ $devices: ( "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 60bce3d..d7e95cf 100644 --- a/dist/scss/variables/_index.scss +++ b/dist/scss/variables/_index.scss @@ -20,8 +20,7 @@ @forward "layer"; @forward "paper"; -@forward "unit_conversion"; -@forward "unit_functions"; + @forward "unit"; diff --git a/dist/scss/variables/_scale.scss b/dist/scss/variables/_scale.scss index e12df76..c8f3058 100644 --- a/dist/scss/variables/_scale.scss +++ b/dist/scss/variables/_scale.scss @@ -74,7 +74,7 @@ $typographic_scale: ( $basepoint_scale: 4; @function basepoint($value) { - @return calc($q * $value * $basepoint_scale); + @return calc($q * $value * $basepoint_scale); } $basepoint_01: basepoint( 1) !default; diff --git a/dist/scss/variables/_unit.scss b/dist/scss/variables/_unit.scss index ebe7ccb..dec6e34 100644 --- a/dist/scss/variables/_unit.scss +++ b/dist/scss/variables/_unit.scss @@ -19,8 +19,8 @@ // ============================================================================ @use "sass:math"; - @use "view" as *; +@use "../functions" as *; // Kyū Measurement System for Responsive Typography @@ -50,7 +50,6 @@ $q: 0.0625rem !default; // 1px, or 0.25mm } - // Minimum and maximum Kyū sizes $q_min: 0.75px !default; $q_max: 1.50px !default; @@ -59,6 +58,20 @@ $q_max: 1.50px !default; $font_min: calc((1rem / $q) * $q_min) !default; $font_max: calc((1rem / $q) * $q_max) !default; +// @mixin fluid_type($min-vw, $max-vw, $min-font-size, $max-font-size) { +// // Assign font-size for the starting viewport width +// font-size: $min-font-size; + +// // Apply fluid scaling between the minimum and maximum viewport widths +// @media screen and (min-width: $min-vw) { +// font-size: calc(#{$min-font-size} + #{unitless($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{unitless($max-vw - $min-vw)})); +// } + +// // Fix the font-size at the maximum size beyond the maximum viewport width +// @media screen and (min-width: $max-vw) { +// font-size: $max-font-size; +// } +// } @mixin fluid_type($min-vw, $max-vw, $min-font-size, $max-font-size) { $u1: unit($min-vw); @@ -80,8 +93,9 @@ $font_max: calc((1rem / $q) * $q_max) !default; } + 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/variables/_view.scss b/dist/scss/variables/_view.scss index 04e0d4e..f16228d 100644 --- a/dist/scss/variables/_view.scss +++ b/dist/scss/variables/_view.scss @@ -43,6 +43,7 @@ $breakpoints: ( sl: calc_breakpoint(90), // 1440px - Super large devices (Large TV) ) !default; + // Expose individual breakpoints for easier direct access $media_xs: map-get($breakpoints, xs) !default; $media_sm: map-get($breakpoints, sm) !default; @@ -51,6 +52,13 @@ $media_lg: map-get($breakpoints, lg) !default; $media_xl: map-get($breakpoints, xl) !default; $media_sl: map-get($breakpoints, sl) !default; +// $media_xs: 320px !default; +// $media_sm: 480px !default; +// $media_md: 768px !default; +// $media_lg: 1024px !default; +// $media_xl: 1280px !default; +// $media_sl: 1440px !default; + $media_dif: calc($media_sl - $media_xs); // $media_min: 320px !default; // Mobile diff --git a/package.json b/package.json index 3e9d0dd..9ca7d2f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "unit.gl", "description": "Layout Engine.", - "version": "0.0.34", + "version": "0.0.35", "config": { "version_short": "0.0" }, diff --git a/src/scss/_global.scss b/src/scss/_global.scss index 80aa96e..e33a9bf 100644 --- a/src/scss/_global.scss +++ b/src/scss/_global.scss @@ -13,8 +13,6 @@ // limitations under the License. -@use "variables" as *; - // Base | Body // ============================================================================ diff --git a/src/scss/_reset.scss b/src/scss/_reset.scss index cbdb45c..a8072e5 100644 --- a/src/scss/_reset.scss +++ b/src/scss/_reset.scss @@ -12,7 +12,6 @@ // See the License for the specific language governing permissions and // limitations under the License. -@use "variables" as *; // ============================================================================ // Base | Reset diff --git a/src/scss/dev/_banner.scss b/src/scss/dev/_banner.scss new file mode 100644 index 0000000..0011fce --- /dev/null +++ b/src/scss/dev/_banner.scss @@ -0,0 +1,11 @@ +/** +* unit.gl +* +* @description Layout Engine +* @author Scape Agency (https://www.scape.agency) +* @version v1.0.0 +* @copyright 2020-2024 Scape Agency (https://www.scape.agency) +* @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/src/scss/functions/_index.scss b/src/scss/functions/_index.scss index 37bf853..aec691b 100644 --- a/src/scss/functions/_index.scss +++ b/src/scss/functions/_index.scss @@ -18,3 +18,5 @@ @forward "scale"; @forward "sequence"; +@forward "unit_conversion"; +@forward "unit_functions"; \ No newline at end of file diff --git a/src/scss/variables/_unit_conversion.scss b/src/scss/functions/_unit_conversion.scss similarity index 100% rename from src/scss/variables/_unit_conversion.scss rename to src/scss/functions/_unit_conversion.scss diff --git a/src/scss/variables/_unit_functions.scss b/src/scss/functions/_unit_functions.scss similarity index 100% rename from src/scss/variables/_unit_functions.scss rename to src/scss/functions/_unit_functions.scss diff --git a/src/scss/index.scss b/src/scss/index.scss index dceb672..1d80247 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -13,27 +13,15 @@ // limitations under the License. -/** -* unit.gl -* -* @description Layout Engine -* @author Scape Agency (https://www.scape.agency) -* @version v1.0.0 -* @copyright 2020-2024 Scape Agency (https://www.scape.agency) -* @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) -*/ - @charset "utf-8"; @use "sass:math"; +@forward "reset"; +@forward "global"; + @forward "variables"; @forward "functions"; @forward "mixins"; -@forward "reset"; -@forward "global"; - @forward "classes"; diff --git a/src/scss/variables/_device.scss b/src/scss/variables/_device.scss index c0725ae..e41b288 100644 --- a/src/scss/variables/_device.scss +++ b/src/scss/variables/_device.scss @@ -13,9 +13,8 @@ // limitations under the License. - - // Device Attribute Map +// ============================================================================ $devices: ( // iPhones // ------------------------------------------------------------------------ @@ -76,5 +75,3 @@ $devices: ( "lenovo-thinkpad": ("min-width": 1440px, "max-width": 2560px, "pixel-ratio": 2), ); - - diff --git a/src/scss/variables/_index.scss b/src/scss/variables/_index.scss index 60bce3d..d7e95cf 100644 --- a/src/scss/variables/_index.scss +++ b/src/scss/variables/_index.scss @@ -20,8 +20,7 @@ @forward "layer"; @forward "paper"; -@forward "unit_conversion"; -@forward "unit_functions"; + @forward "unit"; diff --git a/src/scss/variables/_scale.scss b/src/scss/variables/_scale.scss index e12df76..c8f3058 100644 --- a/src/scss/variables/_scale.scss +++ b/src/scss/variables/_scale.scss @@ -74,7 +74,7 @@ $typographic_scale: ( $basepoint_scale: 4; @function basepoint($value) { - @return calc($q * $value * $basepoint_scale); + @return calc($q * $value * $basepoint_scale); } $basepoint_01: basepoint( 1) !default; diff --git a/src/scss/variables/_unit.scss b/src/scss/variables/_unit.scss index ebe7ccb..dec6e34 100644 --- a/src/scss/variables/_unit.scss +++ b/src/scss/variables/_unit.scss @@ -19,8 +19,8 @@ // ============================================================================ @use "sass:math"; - @use "view" as *; +@use "../functions" as *; // Kyū Measurement System for Responsive Typography @@ -50,7 +50,6 @@ $q: 0.0625rem !default; // 1px, or 0.25mm } - // Minimum and maximum Kyū sizes $q_min: 0.75px !default; $q_max: 1.50px !default; @@ -59,6 +58,20 @@ $q_max: 1.50px !default; $font_min: calc((1rem / $q) * $q_min) !default; $font_max: calc((1rem / $q) * $q_max) !default; +// @mixin fluid_type($min-vw, $max-vw, $min-font-size, $max-font-size) { +// // Assign font-size for the starting viewport width +// font-size: $min-font-size; + +// // Apply fluid scaling between the minimum and maximum viewport widths +// @media screen and (min-width: $min-vw) { +// font-size: calc(#{$min-font-size} + #{unitless($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{unitless($max-vw - $min-vw)})); +// } + +// // Fix the font-size at the maximum size beyond the maximum viewport width +// @media screen and (min-width: $max-vw) { +// font-size: $max-font-size; +// } +// } @mixin fluid_type($min-vw, $max-vw, $min-font-size, $max-font-size) { $u1: unit($min-vw); @@ -80,8 +93,9 @@ $font_max: calc((1rem / $q) * $q_max) !default; } + 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/src/scss/variables/_view.scss b/src/scss/variables/_view.scss index 04e0d4e..f16228d 100644 --- a/src/scss/variables/_view.scss +++ b/src/scss/variables/_view.scss @@ -43,6 +43,7 @@ $breakpoints: ( sl: calc_breakpoint(90), // 1440px - Super large devices (Large TV) ) !default; + // Expose individual breakpoints for easier direct access $media_xs: map-get($breakpoints, xs) !default; $media_sm: map-get($breakpoints, sm) !default; @@ -51,6 +52,13 @@ $media_lg: map-get($breakpoints, lg) !default; $media_xl: map-get($breakpoints, xl) !default; $media_sl: map-get($breakpoints, sl) !default; +// $media_xs: 320px !default; +// $media_sm: 480px !default; +// $media_md: 768px !default; +// $media_lg: 1024px !default; +// $media_xl: 1280px !default; +// $media_sl: 1440px !default; + $media_dif: calc($media_sl - $media_xs); // $media_min: 320px !default; // Mobile diff --git a/test/index.html b/test/index.html index 1ef0b0e..7519eb7 100644 --- a/test/index.html +++ b/test/index.html @@ -6,6 +6,8 @@ Test Page + + diff --git a/test/index.scss b/test/index.scss index f432454..4ad21a5 100644 --- a/test/index.scss +++ b/test/index.scss @@ -8,5 +8,5 @@ body { h1 { color: navy; } - } +} \ No newline at end of file