diff --git a/VERSION b/VERSION index f9d08f8..2b80db2 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.0.32 \ No newline at end of file +0.0.33 \ No newline at end of file diff --git a/dist/LICENSE b/dist/LICENSE new file mode 100644 index 0000000..261eeb9 --- /dev/null +++ b/dist/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/dist/README.md b/dist/README.md new file mode 100644 index 0000000..44463c8 --- /dev/null +++ b/dist/README.md @@ -0,0 +1,138 @@ +
+ +[![GitHub License](https://img.shields.io/github/license/scape-agency/unit.gl?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23041B26&color=%23041B26&link=LICENSE)](https://github.com/scape-agency/unit.gl/blob/main/LICENSE) +[![devContainer](https://img.shields.io/badge/Container-Remote?style=flat-square&logo=visualstudiocode&logoColor=%23FFFFFF&label=Remote&labelColor=%23041B26&color=%23041B26)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/scape-agency/unit.gl) + +
+ +--- + +
+ unit.gl logo +

unit.gl

+

Stylescape Layout Engine

+
+ +--- + +unit.gl cover + +### Contents + +- [Introduction](#introduction) +- [Colophon](#colophon) + +
+ +--- + +
+ +[![Report a Bug](https://img.shields.io/badge/Report%20a%20Bug-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23E1E4E5)](https://github.com/scape-agency/unit.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=bug_report.yml) +[![Request a Feature](https://img.shields.io/badge/Request%20a%20Feature-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23E1E4E5)](https://github.com/scape-agency/unit.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=feature_request.yml) +[![Ask a Question](https://img.shields.io/badge/Ask%20a%20Question-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23E1E4E5)](https://github.com/scape-agency/unit.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=question.yml) +[![Make a Suggestion](https://img.shields.io/badge/Make%20a%20Suggestion-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23E1E4E5)](https://github.com/scape-agency/unit.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=suggestion.yml) +[![Start a Discussion](https://img.shields.io/badge/Start%20a%20Discussion-GitHub?style=flat-square&&logoColor=%23FFFFFF&color=%23E1E4E5)](https://github.com/scape-agency/unit.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=discussion.yml) + +
+ +**Stylescape Layout Engine.** + +## Introduction + +`unit.gl` is a comprehensive design toolkit focused on fluid typography, responsive design, and advanced SCSS functions. It's crafted to empower designers and developers to create harmonious, scalable, and accessible web experiences efficiently. + +## Features + +- **Fluid Typography**: Utilizes the Kyū measurement system, allowing seamless scaling of text across different devices. +- **Modular Scale**: Provides functions for generating sizes (font-size, spacing) based on various musical and mathematical ratios. +- **Responsive Helpers**: Includes mixins for orientation and device-specific media queries, enabling designs that adapt to various screen sizes and resolutions. +- **Advanced SCSS Functions**: Contains a suite of functions for unit conversions, arithmetic operations, and generating sequences like Fibonacci, Lucas, and more. +- **Accessibility Considerations**: Ensures typography adheres to accessibility standards like WCAG. +- **Dynamic Scaling**: Implements CSS clamp for more dynamic scaling across a range of screen sizes. +- **Lucas and Fibonacci Series**: Functions to generate numbers from these famous sequences for use in design calculations. +- **Guides and Grids**: Mixins for creating baseline grids and guide overlays for design alignment. + +## Installation + +### HTML Script Tag + +``` html + +``` + +### NPM Module + +``` bash +npm i unit.gl +``` + +## Links + +- [Website](https://www.unit.gl) +- [NPM](https://www.npmjs.com/package/unit.gl) + + +## Unit System + +### Digital Size Conversions + + +### Physical SizeConversions + + +### Pixel Density + +| Density Bucket | Screen Density | Physical Size | Pixel Size | | +| :---------------- | ----------------: | ----------------: | ----------------: | ----------------: | +| `ldpi` | 120 *dpi* | 0.5 x 0.5 *in* | 60 x 60 *px* | 0.5 in x 120 dpi | +| `mdpi` | 160 *dpi* | 0.5 x 0.5 *in* | 80 x 80 *px* | 0.5 in x 160 dpi | +| `hdpi` | 240 *dpi* | 0.5 x 0.5 *in* | 120 x 120 *px* | 0.5 in x 240 dpi | +| `xhdpi` | 320 *dpi* | 0.5 x 0.5 *in* | 160 x 160 *px* | 0.5 in x 320 dpi | +| `xxhdpi` | 480 *dpi* | 0.5 x 0.5 *in* | 240 x 240 *px* | 0.5 in x 480 dpi | +| `xxxhdpi` | 640 *dpi* | 0.5 x 0.5 *in* | 320 x 320 *px* | 0.5 in x 640 dpi | + +More information: + +- [Understanding Density Independence In Android](https://blog.mindorks.com/understanding-density-independent-pixel-sp-dp-dip-in-android/) +- [Material Design | Pixel density](https://m2.material.io/design/layout/pixel-density.html) + +--- + +## Colophon + +### Authors + +**unit.gl** is an open-source project by **[Scape Agency](https://www.scape.agency "Scape Agency website")**. + +##### Scape Agency + +Scape Agency is a spatial innovation collective that dreams, discovers and designs the everyday of tomorrow. We blend design thinking with emerging technologies to create a brighter perspective for people and planet. Our products and services naturalise technology in liveable and sustainable –scapes that spark the imagination and inspire future generations. + +- website: [scape.agency](https://www.scape.agency "Scape Agency website") +- github: [github.com/scape-agency](https://github.com/scape-agency "Scape Agency GitHub") + +### Development Resources + +#### Contributing + +We'd love for you to contribute and to make this project even better than it is today! +Please refer to the [contribution guidelines](.github/CONTRIBUTING.md) for information. + +### Legal Information + +#### Copyright + +Copyright © 2023 [Scape Agency BV](https://www.scape.agency/ "Scape Agency website"). All Rights Reserved. + +#### License + +Except as otherwise noted, the content in this repository is licensed under the +[Creative Commons Attribution 4.0 International (CC BY 4.0) License](https://creativecommons.org/licenses/by/4.0/), and +code samples are licensed under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0). + +Also see [LICENSE](https://github.com/scape-agency/community/blob/master/src/LICENSE) and [LICENSE-CODE](https://github.com/scape-agency/community/blob/master/src/LICENSE-CODE). + +#### Disclaimer + +**THIS SOFTWARE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** diff --git a/dist/css/unit.gl.css b/dist/css/unit.gl.css new file mode 100644 index 0000000..5a9ed47 --- /dev/null +++ b/dist/css/unit.gl.css @@ -0,0 +1,561 @@ +/** +* 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) +*/ +: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; + } +} + +/** +* 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%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_1x2 { + aspect-ratio: 0.5; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_2x1 { + aspect-ratio: 2; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_1x3 { + aspect-ratio: 0.3333333333; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_3x1 { + aspect-ratio: 3; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_1x4 { + aspect-ratio: 0.25; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_4x1 { + aspect-ratio: 4; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_3x2 { + aspect-ratio: 1.5; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_2x3 { + aspect-ratio: 0.6666666667; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_4x3 { + aspect-ratio: 1.3333333333; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_3x4 { + aspect-ratio: 0.75; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_16x9 { + aspect-ratio: 1.7777777778; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_16x10 { + aspect-ratio: 1.6; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_1x1 { + padding-bottom: 100%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_1x2 { + padding-bottom: 200%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_2x1 { + padding-bottom: 50%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_1x3 { + padding-bottom: 300%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_3x1 { + padding-bottom: 33.33%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_1x4 { + padding-bottom: 400%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_4x1 { + padding-bottom: 25%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_3x2 { + padding-bottom: 66.67%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_2x3 { + padding-bottom: 150%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_4x3 { + padding-bottom: 75%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_3x4 { + padding-bottom: 133.33%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_16x9 { + padding-bottom: 56.25%; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; +} + +.ratio_p_16x10 { + padding-bottom: 62.5%; + width: 100%; + position: relative; + overflow: hidden; + 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; + left: 0; + width: 100%; + height: 100%; + margin: 0; + pointer-events: none; + z-index: 9999; +} + +.guide_graph { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + pointer-events: none; + z-index: 9999; + background-size: 0.25rem 0.25rem; + background-image: repeating-linear-gradient(to bottom, rgba(50, 50, 50, 0.25) 0 1px, transparent 1px 100%), repeating-linear-gradient(to right, rgba(50, 50, 50, 0.25) 0 1px, transparent 1px 100%); +} + +.guide_baseline { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + pointer-events: none; + z-index: 9999; + 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 new file mode 100644 index 0000000..e787b52 --- /dev/null +++ b/dist/css/unit.gl.min.css @@ -0,0 +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} +/*# sourceMappingURL=to.css.map */ \ No newline at end of file diff --git a/dist/js/index.d.ts b/dist/js/index.d.ts new file mode 100644 index 0000000..cb0ff5c --- /dev/null +++ b/dist/js/index.d.ts @@ -0,0 +1 @@ +export {}; diff --git a/dist/js/index.js b/dist/js/index.js new file mode 100644 index 0000000..fd2774c --- /dev/null +++ b/dist/js/index.js @@ -0,0 +1,3 @@ +"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 new file mode 100644 index 0000000..0ae1b53 --- /dev/null +++ b/dist/js/unit.gl.min.js @@ -0,0 +1 @@ +"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 2daf6c5..25501de 100644 --- a/dist/package.json +++ b/dist/package.json @@ -1,6 +1,6 @@ { "name": "unit.gl", - "version": "0.0.32", + "version": "0.0.33", "description": "Layout Engine.", "keywords": [ "unit.gl", diff --git a/dist/scss/_global.scss b/dist/scss/_global.scss new file mode 100644 index 0000000..80aa96e --- /dev/null +++ b/dist/scss/_global.scss @@ -0,0 +1,131 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@use "variables" as *; + +// Base | Body +// ============================================================================ + +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; + tab-size: 4; + height: 100%; + // height: 100vh; + // width: 100vw; +} + +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; +} + + + + +// body { +// font-family: 'Urbanist', sans-serif !important; +// font-weight: 500; +// font-size: 1rem; +// min-height: 100%; +// margin: 0; +// } + +// html, body { +// @include reset_bleed; +// height: 100vh; +// width: 100vw; +// //overflow-x: hidden; +// // margin: 0; +// // padding: 0; +// // -webkit-tap-highlight-color: transparent; +// // width: 100%; +// } + +// html { +// // scroll-behavior: smooth; +// // background-color: white; +// // -webkit-font-smoothing: antialiased; +// // -moz-osx-font-smoothing: grayscale; +// // text-rendering: optimizeLegibility; +// // font-family: sans-serif; +// } + +// // html, body { +// // @include bleed_reset; +// // @include font_settings; +// // } + + +// // body { +// // @include paragraph_normal; +// // } + +// body { +// background-color: $color_01; +// // line-height: 1; +// // background: #ffffff; +// // color: #777777; +// // font: normal 16px "din_regular", arial, sans-serif; +// // font-weight: 400; +// // -webkit-font-smoothing: antialiased; +// // -webkit-text-size-adjust: 100%; +// // font-family: var(--ptf-primary-font); +// // font-size: 1rem; +// // line-height: 1.625; + +// // min-width: 20rem; +// // margin: 0; +// // padding: 0; + +// // letter-spacing: -.025em; + +// // color: var(--ptf-color-2); +// // background-color: var(--q_white); + +// // -webkit-font-smoothing: antialiased; +// // -moz-osx-font-smoothing: grayscale; +// } + + + diff --git a/dist/scss/_reset.scss b/dist/scss/_reset.scss new file mode 100644 index 0000000..cbdb45c --- /dev/null +++ b/dist/scss/_reset.scss @@ -0,0 +1,183 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +@use "variables" as *; + +// ============================================================================ +// Base | Reset +// ============================================================================ + +@mixin reset_bleed { + margin: 0; + margin-block-start: 0; + margin-block-end: 0; + margin-inline-start: 0; + margin-inline-end: 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 +{ + @include reset_bleed; +} + + +// html, body, div, span, applet, object, iframe, +// h1, h2, h3, h4, h5, h6, p, blockquote, pre, +// a, abbr, acronym, address, big, cite, code, +// del, dfn, em, img, ins, kbd, q, s, samp, +// small, strike, strong, sub, sup, tt, var, +// b, u, i, center, +// dl, dt, dd, ol, ul, li, +// fieldset, form, label, legend, +// table, caption, tbody, tfoot, thead, tr, th, td, +// article, aside, canvas, details, embed, +// figure, figcaption, footer, header, hgroup, +// menu, nav, output, ruby, section, summary, +// time, mark, audio, video { +// margin: 0; +// padding: 0; +// border: 0; +// font-size: 100%; +// font: inherit; +// vertical-align: baseline; +// } + +// /* HTML5 display-role reset for older browsers */ +// article, aside, details, figcaption, figure, +// footer, header, hgroup, menu, nav, section, main { +// display: block; +// } diff --git a/dist/scss/classes/_index.scss b/dist/scss/classes/_index.scss new file mode 100644 index 0000000..57a7d19 --- /dev/null +++ b/dist/scss/classes/_index.scss @@ -0,0 +1,17 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +@forward "paper"; diff --git a/dist/scss/classes/_paper.scss b/dist/scss/classes/_paper.scss new file mode 100644 index 0000000..d8c40d0 --- /dev/null +++ b/dist/scss/classes/_paper.scss @@ -0,0 +1,97 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Paper Module +// ============================================================================ + + +@use "../variables" as *; + + +// Usage +// ============================================================================ + +// .paper { + +// // Q Series +// // ------------------------------------------------------------------------ +// &.q0 { @include set_paper_size("q0"); } +// &.q1 { @include set_paper_size("q1"); } +// &.q2 { @include set_paper_size("q2"); } +// &.q3 { @include set_paper_size("q3"); } +// &.q4 { @include set_paper_size("q4"); } +// &.q5 { @include set_paper_size("q5"); } +// &.q6 { @include set_paper_size("q6"); } +// &.q7 { @include set_paper_size("q7"); } +// &.q8 { @include set_paper_size("q8"); } +// &.q9 { @include set_paper_size("q9"); } +// &.q10 { @include set_paper_size("q10"); } + +// // ISO A Series +// // ------------------------------------------------------------------------ +// &.iso_a0 { @include set_paper_size("iso_a0"); } +// &.iso_a1 { @include set_paper_size("iso_a1"); } +// &.iso_a2 { @include set_paper_size("iso_a2"); } +// &.iso_a3 { @include set_paper_size("iso_a3"); } +// &.iso_a4 { @include set_paper_size("iso_a4"); } +// &.iso_a5 { @include set_paper_size("iso_a5"); } +// &.iso_a6 { @include set_paper_size("iso_a6"); } +// &.iso_a7 { @include set_paper_size("iso_a7"); } +// &.iso_a8 { @include set_paper_size("iso_a8"); } +// &.iso_a9 { @include set_paper_size("iso_a9"); } +// &.iso_a10 { @include set_paper_size("iso_a10"); } + +// } + +// Function to calculate ISO paper sizes +// @function iso-paper-size($number) { +// $base-width: 841mm; +// $base-height: 1189mm; + +// @for $i from 0 through $number { +// $base-width: $base-width / if($i > 0, 2, 1); +// $base-height: $base-height / if($i > 0 and $i % 2 == 0, 2, 1); +// } + +// @return (width: $base-width, height: $base-height); +// } + + +// Function to calculate ISO B-series paper sizes +// @function iso-paper-size-b($number) { +// $base-width: 1000mm; // Approximate base width for B0 +// $base-height: 1414mm; // Approximate base height for B0 + +// @for $i from 0 through $number { +// $base-width: $base-width / if($i > 0, sqrt(2), 1); +// $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1); +// } + +// @return (width: $base-width, height: $base-height); +// } + +// Function to calculate ISO C-series paper sizes +// @function iso-paper-size-c($number) { +// $base-width: 917mm; // Approximate base width for C0 +// $base-height: 1297mm; // Approximate base height for C0 + +// @for $i from 0 through $number { +// $base-width: $base-width / if($i > 0, sqrt(2), 1); +// $base-height: $base-height / if($i > 0 and $i % 2 == 0, sqrt(2), 1); +// } + +// @return (width: $base-width, height: $base-height); +// } \ No newline at end of file diff --git a/dist/scss/functions/_arithmetic.scss b/dist/scss/functions/_arithmetic.scss new file mode 100644 index 0000000..db67f94 --- /dev/null +++ b/dist/scss/functions/_arithmetic.scss @@ -0,0 +1,64 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// Unitless Arithmetic Functions +// ============================================================================ +// Functions to perform arithmetic operations while ensuring correct handling of units. + +/// Adds two values, handling units. +/// @param $value1 - First value +/// @param $value2 - Second value +/// @return - Sum of the two values +@function add($value1, $value2) { + @if unitless($value1) and unitless($value2) { + // Both values are unitless, return simple addition + @return $value1 + $value2; + } @else if unitless($value1) { + // First value is unitless, convert it to the unit of the second value + @return $value1 + unit-strip($value2); + } @else if unitless($value2) { + // Second value is unitless, convert it to the unit of the first value + @return unit-strip($value1) + $value2; + } @else if unit($value1) == unit($value2) { + // Both values have the same unit + @return $value1 + $value2; + } + // Mismatched units, return a warning + @warn "Cannot add values with different units: #{$value1} and #{$value2}"; + @return null; +} + +/// Subtracts one value from another, handling units. +/// @param $value1 - First value +/// @param $value2 - Second value +/// @return - Difference of the two values +@function subtract($value1, $value2) { + @if unitless($value1) and unitless($value2) { + // Both values are unitless, return simple subtraction + @return $value1 - $value2; + } @else if unitless($value1) { + // First value is unitless, convert it to the unit of the second value + @return $value1 - unit-strip($value2); + } @else if unitless($value2) { + // Second value is unitless, convert it to the unit of the first value + @return unit-strip($value1) - $value2; + } @else if unit($value1) == unit($value2) { + // Both values have the same unit + @return $value1 - $value2; + } + // Mismatched units, return a warning + @warn "Cannot subtract values with different units: #{$value1} and #{$value2}"; + @return null; +} diff --git a/dist/scss/functions/_index.scss b/dist/scss/functions/_index.scss new file mode 100644 index 0000000..96efd04 --- /dev/null +++ b/dist/scss/functions/_index.scss @@ -0,0 +1,13 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. diff --git a/dist/scss/functions/_ratio.scss b/dist/scss/functions/_ratio.scss new file mode 100644 index 0000000..8c7f2cf --- /dev/null +++ b/dist/scss/functions/_ratio.scss @@ -0,0 +1,172 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Math | Ratio's +// ============================================================================ + + + + +// Modular Scale Ratios Map +// This map contains common ratios used in modular scale calculations. +$ratio: ( + + // 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 + + // 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) + + // 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 + + // 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 + + // 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 + + // 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 + + // Special + // ------------------------------------------------------------------------ + "golden_ratio": 1.618, + "silver_ratio": 2.414, // Analogous to the golden ratio + "bronze_ratio": 1.927, // Analogous to silver and golden ratios + "pythagorean": 1.732, // Pythagorean constant, square root of 3 + "phi": 1.618, // Another name for the golden ratio + "pi": 3.142, // Mathematical Pi value + "euler": 2.718, // Euler's number + "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 + "parthenon_ratio": 1.618, // Ratio used in the Parthenon's architecture + "le_corbusier": 1.618, // Le Corbusier's modulor ratio + "vesica_piscis": 1.732, // Ratio from the vesica piscis shape + "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 + +) !default; + + +/// Golden Ratio Function +/// A simple function to calculate sizes using the golden ratio, which can be +/// used for spacing, sizing elements, etc. +@function golden-ratio($size, $increment: 1) { + $golden-ratio: 1.618; + @return $size * pow($golden-ratio, $increment); +} + + + + +// Modular Scale Function +/// Calculates sizes (like font-size, spacing) based on a modular scale. +/// This is useful for maintaining harmonious proportions in typography and layout. +/// @param $increment - The step on the scale, can be positive or negative. +/// @param $base - The base value to scale from, defaults to 1em (typographic base size). +/// @param $ratio - The ratio to use for scaling, defaults to the Golden Ratio. +/// @return - 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' { + @error "Step must be a number."; + } + + @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 { + @error "Ratio must be a positive number."; + } + + // Calculate the modular scale value + @return $base * pow($ratio, $increment); + } + + $ratio: map-get($ratio, $ratio-name); + + + // body { + // font-size: modular-scale(0); // Equal to the base size, 1em + // } + + // h1 { + // font-size: modular-scale(2); // Larger than the base size + // } + + // .small-text { + // font-size: modular-scale(-1); // Smaller than the base size + // } + \ No newline at end of file diff --git a/dist/scss/functions/_scale.scss b/dist/scss/functions/_scale.scss new file mode 100644 index 0000000..329e051 --- /dev/null +++ b/dist/scss/functions/_scale.scss @@ -0,0 +1,58 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Math | Scales +// ============================================================================ + + +$scale_musical: ( + "monotonic": 1, + "ditonic": 2, + "tritonic": 3, + "tetratonic": 4, + "pentatonic": 5, + "hexatonic": 6, + "peptatonic": 7, + "octatonic": 8, + "nonatonic": 9, + "dodecatonic": 12, +) !default; + + +/// Classic Typographic Scale +/// Design software, such as Adobe InDesig, usually has such a scale. +/// This scale has historical significance — used by typographers of the early +/// Renaissance; it has remained unchanged for 400 years. +$typographic_scale_classic: ( + 1: q( 6), + 2: q( 7), // +1 + 3: q( 8), // +1 + 4: q( 9), // +1 + 5: q(10), // +1 + 6: q(11), // +1 + 7: q(12), // +1 + 8: q(14), // +2 + 9: q(16), // +2 + 10: q(18), // +2 + 11: q(21), // +3 + 12: q(24), // +3 + 13: q(36), // +12 + 14: q(48), // +12 + 15: q(60), // +12 + 16: q(72), // +12 + 17: q(84), // +12 + 18: q(96), // +12 +) !default; \ No newline at end of file diff --git a/dist/scss/functions/_sequence.scss b/dist/scss/functions/_sequence.scss new file mode 100644 index 0000000..1aafb4e --- /dev/null +++ b/dist/scss/functions/_sequence.scss @@ -0,0 +1,278 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Math | Number Sequences +// ============================================================================ + + +// Fibonacci Number Sequence +// ---------------------------------------------------------------------------- + +/// Calculates the nth Fibonacci number using a recursive approach. +/// In mathematics, the Fibonacci numbers form a sequence such that each number +/// is the sum of the two preceding ones, usually starting with 0 and 1. +/// @param {Number} $n - The position in the Fibonacci sequence to calculate. +/// @return {Number} - The nth Fibonacci number. +@function sequence_fibonacci($n) { + + // Return null for negative index to avoid unnecessary recursion + @if $n < 0 { + @warn "Index #{$n} is not valid for Fibonacci sequence."; + @return null; + } + + // Base cases + @if $n == 0 { + @return 0; + } @else if $n == 1 { + @return 1; + } @else { + // Recursive case + @return sequence_fibonacci($n - 1) + sequence_fibonacci($n - 2); + } + +} + + +// Lucas Number Sequence +// ---------------------------------------------------------------------------- + +/// Calculates the nth Lucas number using a recursive approach. +/// In mathematics, the Lucas numbers are an integer sequence named after the +/// mathematician François Édouard Anatole Lucas (1842–1891), who studied both +/// that sequence and the closely related Fibonacci numbers. Lucas numbers and +/// Fibonacci numbers form complementary instances of Lucas sequences +/// @param {Number} $n - The position in the Lucas sequence to calculate. +/// @return {Number} - The nth Lucas number. +@function sequence_lucas($n) { + + // Return null for negative index to avoid unnecessary recursion + @if $n < 0 { + @warn "Index #{$n} is not valid for Lucas sequence."; + @return null; + } + + // Base cases + @if $n == 0 { + @return 2; + } @else if $n == 1 { + @return 1; + } @else { + // Recursive case + @return sequence_lucas($n - 1) + sequence_lucas($n - 2); + } + +} + + +// Prime Number Sequence +// ---------------------------------------------------------------------------- + +/// Checks if a number is a prime number. +/// Prime numbers are natural numbers greater than 1 that are not a product +/// of two smaller natural numbers. +/// This function returns true if the number is prime, otherwise false. +/// @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; + } + @for $i from 2 through math.sqrt($n) { + @if $n % $i == 0 { + @return false; + } + } + @return true; +} + + +// Catalan Number Sequence +// ---------------------------------------------------------------------------- + +/// Calculates the factorial of a number. +/// @param {Number} $n - The number to calculate factorial for. +/// @return {Number} - The factorial of $n. +@function factorial($n) { + $result: 1; + @for $i from 1 through $n { + $result: $result * $i; + } + @return $result; +} + +/// Calculates the nth Catalan number. +/// Catalan numbers are a sequence of natural numbers that have found +/// applications in various combinatorial problems. The nth Catalan number +/// is calculated using the formula C(n) = (2n)! / (n+1)!n!. +/// @param {Number} $n - The position in the Catalan series 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 reciprocals of the positive integers. +/// For simplicity, we calculate the nth term as 1/n. +/// @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 harmonic series."; + @return null; + } + @return 1 / $n; +} + + +// Geometric Sequence +// ---------------------------------------------------------------------------- + +/// Calculates the nth term of a geometric series with a ratio of 2. +/// The geometric series is a series with a constant ratio between successive +/// terms. Here we calculate the nth term for a series with a ratio of 2 +/// (doubling each term). +/// @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 geometric series."; + @return null; + } + @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. +/// @param {Number} $n - The number to calculate superfactorial for. +/// @return {Number} - The superfactorial of $n. +@function sequence_superfactorial($n) { + $result: 1; + @for $i from 1 through $n { + $factorial: 1; + @for $j from 1 through $i { + $factorial: $factorial * $j; + } + $result: $result * $factorial; + } + @return $result; +} + + +// Triangular Number Sequence +// ---------------------------------------------------------------------------- + +/// Calculates the nth triangular number. +/// In mathematics, a triangular number or triangle number counts objects arranged +/// in an equilateral triangle. The nth triangular number is the number of dots +/// Triangular numbers are the sum of the first n natural numbers. The nth +/// triangular number is n(n + 1)/2. +/// composing a triangle with n dots on a side. +/// @param {Number} $n - The position in the triangular series to calculate. +/// @return {Number} - The nth triangular number. +@function sequence_triangular($n) { + + // Return null for non-positive index to avoid invalid numbers + @if $n <= 0 { + @warn "Index #{$n} is not valid for triangular series."; + @return null; + } + + // Calculate the nth triangular number + @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 +/// integer with itself. The nth square number is n². +/// @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 square series."; + @return null; + } + @return $n * $n; +} + + +// Pentagonal Number Sequence +// ---------------------------------------------------------------------------- + +/// Calculates the nth pentagonal number. +/// In mathematics, a pentagonal number is a figurate number that extends the +/// concept of triangular and square numbers to the pentagon. +/// @param {Number} $n - The position in the pentagonal series to calculate. +/// @return {Number} - The nth pentagonal number. +@function sequence_pentagonal($n) { + + // Return null for non-positive index to avoid invalid numbers + @if $n <= 0 { + @warn "Index #{$n} is not valid for pentagonal series."; + @return null; + } + + // Calculate the nth pentagonal number + @return (3 * $n * $n - $n) / 2; + +} + + +// Hexagonal Number Sequence +// ---------------------------------------------------------------------------- + +/// Calculates the nth hexagonal number. +/// Hexagonal numbers are figurate numbers that represent a hexagon. The nth +/// hexagonal number is given by 2n² - n. +/// @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 hexagonal series."; + @return null; + } + @return 2 * $n * $n - $n; +} + + +// Cube Number Sequence +// ---------------------------------------------------------------------------- + +/// Calculates the nth cube number. +/// Cube numbers are the numbers raised to the power of three. +/// The nth cube number is n³. +/// @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 cube series."; + @return null; + } + @return $n * $n * $n; +} diff --git a/dist/scss/index.scss b/dist/scss/index.scss new file mode 100644 index 0000000..8f6c44c --- /dev/null +++ b/dist/scss/index.scss @@ -0,0 +1,38 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +/** +* 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 "variables"; +@forward "mixins"; + +@forward "reset"; +@forward "global"; + +@forward "classes"; diff --git a/dist/scss/mixins/_device.scss b/dist/scss/mixins/_device.scss new file mode 100644 index 0000000..8c2bf7b --- /dev/null +++ b/dist/scss/mixins/_device.scss @@ -0,0 +1,42 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@use "../variables" as *; + +/// Generalized Media Query Mixin +/// Creates a media query based on device attributes defined in $devices map. +/// @param $device - The key name of the device in the $devices map. +/// Usage Example: +/// @include device-media-query('iphone-6-7-8') {// Styles specific to iPhone 6, 7, 8} +@mixin device-media-query($device) { + // Retrieve the device attributes from the map + $attributes: map-get($devices, $device); + + // Extract individual attributes with default fallbacks + $min-width: if(map-has-key($attributes, "min-width"), map-get($attributes, "min-width"), null); + $max-width: if(map-has-key($attributes, "max-width"), map-get($attributes, "max-width"), null); + $pixel-ratio: if(map-has-key($attributes, "pixel-ratio"), map-get($attributes, "pixel-ratio"), 1); // Default to 1 + + // Construct the media query string + $media-query: "only screen"; + $media-query: if($min-width != null, $media-query + " and (min-device-width: #{$min-width})", $media-query); + $media-query: if($max-width != null, $media-query + " and (max-device-width: #{$max-width})", $media-query); + $media-query: if($pixel-ratio != 1, $media-query + " and (-webkit-device-pixel-ratio: #{$pixel-ratio})", $media-query); + + // Apply the media query + @media #{$media-query} { + @content; + } +} diff --git a/dist/scss/mixins/_display.scss b/dist/scss/mixins/_display.scss new file mode 100644 index 0000000..8449ce5 --- /dev/null +++ b/dist/scss/mixins/_display.scss @@ -0,0 +1,89 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@use "../variables" as *; + + + + +// Mixins for Media Queries Based on Device Orientation +// ============================================================================ +// These mixins provide a convenient way to apply styles based on the orientation of the device. +// Useful for responsive designs that need to adapt to landscape or portrait modes, especially on tablets and smartphones. + +/// Mixin for landscape orientation with optional breakpoint +/// Use this mixin to apply styles when the device is in landscape mode. +/// @param $min-width (optional) - The minimum width at which the styles should apply +/// Example usage: +/// @include orientation-landscape(1024px) { /* styles */ } +@mixin orientation-landscape($min-width: null) { + @if $min-width { + @media (orientation: landscape) and (min-width: $min-width) { + @content; + } + } @else { + @media (orientation: landscape) { + @content; // The styles inside this mixin are applied in landscape mode + } + } +} + +/// Mixin for portrait orientation with optional breakpoint +/// Use this mixin to apply styles when the device is in portrait mode. +/// @param $min-width (optional) - The minimum width at which the styles should apply +/// Example usage: +/// @include orientation-portrait { /* styles */ } +@mixin orientation-portrait($min-width: null) { + @if $min-width { + @media (orientation: portrait) and (min-width: $min-width) { + @content; + } + } @else { + @media (orientation: portrait) { + @content; + } + } +} + + + +/// Mixin for targeting specific aspect ratios +/// @param $width - Width of the aspect ratio +/// @param $height - Height of the aspect ratio +// @mixin aspect-ratio($width, $height) { +// @media (aspect-ratio: #{$width}/#{$height}) { +// @content; +// } +// } + + + + +// Mixin for High-Density (Retina) Displays +// ============================================================================ +/// This mixin targets high-density displays like Retina screens. +/// It covers various methods to detect high pixel density to ensure broad compatibility. +/// Usage: +/// @include retina { /* styles for retina displays */ } +@mixin 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 + } +} diff --git a/dist/scss/mixins/_guide.scss b/dist/scss/mixins/_guide.scss new file mode 100644 index 0000000..2cf4e92 --- /dev/null +++ b/dist/scss/mixins/_guide.scss @@ -0,0 +1,196 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@use "../variables" as *; + +// ============================================================================ +// Utilities | Guides +// ============================================================================ + +$guide_color: rgba(50, 50, 50, 0.25); +$guide_color_2: rgba(178, 51, 170, 0.5); + +@mixin guide { + z-index: z("guides"); + position: absolute; + height: 100%; + width: 100%; + margin: 0; + top:0; + left:0; + opacity: 100%; + // background-size: $baseline_04 $baseline_04; + pointer-events: none; +} + + +// Mixins for Guide Visualization +// @mixin guide($z-index: z('guides')) { + @mixin guide($z-index: 9999) { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + pointer-events: none; + z-index: $z-index; + } + +.guide { @include guide; } + + +@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% + ); + } + + @mixin guide_baseline($size, $color: cyan) { + @include guide; + background-size: 100% $size; + background-image: repeating-linear-gradient( + to bottom, + $color 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%); +// } + + + + @mixin baseline-grid($column-width, $baseline-height, $column-color: rgba(200, 0, 0, 0.2), $baseline-color: rgba(56, 255, 255, 0.8)) { + 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; + } + + +html { + // @include guide_graph(calc(16*$q)); + // @include guide_baseline($line_height_base); +} + +.guide_graph { + @include guide_graph($rhythm_base); + +} + + +.guide_baseline { + @include guide_baseline($line_height_base); + +} + +// .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/mixins/_helper.scss b/dist/scss/mixins/_helper.scss new file mode 100644 index 0000000..cf23bae --- /dev/null +++ b/dist/scss/mixins/_helper.scss @@ -0,0 +1,105 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@use "../variables" as *; + + + +// Dimensions +// ---------------------------------------------------------------------------- + +@mixin width($value) { + @include q($value, width); +} + +@mixin height($value) { + @include q($value, height); +} + + +// Typography +// ---------------------------------------------------------------------------- + +@mixin font-size($value) { + @include q($value, font-size); +} + +@mixin line-height($value) { + @include q($value, line-height); +} + +@mixin letter-spacing($value) { + @include q($value, letter-spacing); +} + + +// Border +// ---------------------------------------------------------------------------- + +@mixin border-width($value) { + @include q($value, border-width); +} + +@mixin border-radius($value) { + @include q($value, border-radius); +} + + +// Padding +// ---------------------------------------------------------------------------- + +@mixin padding($value) { + @include q($value, padding); +} + +@mixin padding-top($value) { + @include q($value, padding-top); +} + +@mixin padding-right($value) { + @include q($value, padding-right); +} + +@mixin padding-bottom($value) { + @include q($value, padding-bottom); +} + +@mixin padding-left($value) { + @include q($value, padding-left); +} + + +// Margin +// ---------------------------------------------------------------------------- + +@mixin margin($value) { + @include q($value, margin); +} + +@mixin margin-top($value) { + @include q($value, margin-top); +} + +@mixin margin-right($value) { + @include q($value, margin-right); +} + +@mixin margin-bottom($value) { + @include q($value, margin-bottom); +} + +@mixin margin-left($value) { + @include q($value, margin-left); +} diff --git a/dist/scss/mixins/_index.scss b/dist/scss/mixins/_index.scss new file mode 100644 index 0000000..3b3c66c --- /dev/null +++ b/dist/scss/mixins/_index.scss @@ -0,0 +1,23 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +@forward "paper"; +@forward "view"; +@forward "ratio"; +@forward "device"; +@forward "display"; +@forward "guide"; +@forward "helper"; diff --git a/dist/scss/mixins/_paper.scss b/dist/scss/mixins/_paper.scss new file mode 100644 index 0000000..576e575 --- /dev/null +++ b/dist/scss/mixins/_paper.scss @@ -0,0 +1,35 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Paper Module +// ============================================================================ + +@use "../variables" as *; + +// Apply Function +// ============================================================================ + +@mixin set_paper_size($size) { + @if map-has-key($paper-sizes, $size) { + $size-map: map-get($paper-sizes, $size); + width: map-get($size-map, width); + height: map-get($size-map, height); + } @else { + @warn "Invalid paper size: #{$size}."; + } +} + + diff --git a/dist/scss/mixins/_ratio.scss b/dist/scss/mixins/_ratio.scss new file mode 100644 index 0000000..a9358f8 --- /dev/null +++ b/dist/scss/mixins/_ratio.scss @@ -0,0 +1,171 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +@use "../variables" as *; + + +// ============================================================================ +// Layout | Ratio +// ============================================================================ + +// Aspect Ratio Box: +// Creates a container with a specific aspect ratio. +// @mixin aspect-ratio($width, $height) { +// position: relative; +// &:before { +// content: ''; +// display: block; +// padding-top: calc(($height / $width) * 100%); +// } +// > * { +// position: absolute; +// top: 0; +// left: 0; +// right: 0; +// bottom: 0; +// } +// } + +// .ratio-box { +// @include aspect-ratio(16, 9); +// } + +@mixin ratio ($val01, $val02) { + aspect-ratio: calc($val01 / $val02); + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; + // 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) { + padding-bottom: $val01; + width: 100%; + position: relative; + overflow: hidden; + display: inline-block; + // 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. + +// .ratio { +// position: relative; +// width: 100%; + +// &::before { +// display: block; +// padding-top: var(--#{$prefix}aspect-ratio); +// content: ""; +// } + +// > * { +// position: absolute; +// top: 0; +// left: 0; +// width: 100%; +// height: 100%; +// } +// } + +// @each $key, $ratio in $aspect-ratios { +// .ratio-#{$key} { +// --#{$prefix}aspect-ratio: #{$ratio}; +// } +// } + + +// @mixin aspect-ratio($width, $height) { +// position: relative; + +// &::before { +// display: block; +// content: ""; +// width: 100%; +// padding-top: calc((#{$height} / #{$width}) * 100%); +// } + +// > * { +// position: absolute; +// top: 0; +// right: 0; +// bottom: 0; +// left: 0; +// } +// } \ No newline at end of file diff --git a/dist/scss/mixins/_view.scss b/dist/scss/mixins/_view.scss new file mode 100644 index 0000000..412ba1a --- /dev/null +++ b/dist/scss/mixins/_view.scss @@ -0,0 +1,79 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@use "../variables" as *; + +// ============================================================================ +// Media | Screen +// ============================================================================ + +// Media Query Mixins +// ============================================================================ + +@mixin breakpoint($size) { + @if map-has-key($breakpoints, $size) { + @media (min-width: map-get($breakpoints, $size)) { + @content; + } + } @else { + @warn "Invalid breakpoint: #{$size}."; + } +} + +@mixin media_xs { + @media (min-width: $media_xs) { @content; } +} + +@mixin media_sm { + @media (min-width: $media_sm) { @content; } +} + + +@mixin media_md { + @media (min-width: $media_md) { @content; } +} + +@mixin media_lg { + @media (min-width: $media_lg) { @content; } +} + + +@mixin media_xl { + @media (min-width: $media_xl) { @content; } +} + +@mixin media_sl { + @media (min-width: $media_sl) { @content; } +} + + +// Example +// @include breakpoint(md) { +// // Styles for medium screens and up +// } + + +// Syntax +// @media media type and (condition: breakpoint) { +// // CSS rules +// } + +// @media screen, print { +// /* … */ +// } + +// @media (min-width: 30em) and (orientation: landscape) { +// /* … */ +// } diff --git a/dist/scss/variables/_device.scss b/dist/scss/variables/_device.scss new file mode 100644 index 0000000..c0725ae --- /dev/null +++ b/dist/scss/variables/_device.scss @@ -0,0 +1,80 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + + +// Device Attribute Map +$devices: ( + // iPhones + // ------------------------------------------------------------------------ + "iphone-5": ("min-width": 320px, "max-width": 568px, "pixel-ratio": 2), + "iphone-6-7-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), + + // iPads + // ------------------------------------------------------------------------ + "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), + + // Samsung Galaxy + // ------------------------------------------------------------------------ + "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), + + // Google Pixel + // ------------------------------------------------------------------------ + "google-pixel": ("min-width": 411px, "max-width": 731px, "pixel-ratio": 2.6), + "google-pixel-5": ("min-width": 393px, "max-width": 851px, "pixel-ratio": 3), + + // Microsoft Surface + // ------------------------------------------------------------------------ + "surface-duo": ("min-width": 540px, "max-width": 720px, "pixel-ratio": 2.5), + "surface-pro": ("min-width": 768px, "max-width": 1366px, "pixel-ratio": 2), + + // Samsung Galaxy Fold + // ------------------------------------------------------------------------ + "galaxy-fold": ("min-width": 280px, "max-width": 653px, "pixel-ratio": 3), + + // Other Tablets and Laptops + // ------------------------------------------------------------------------ + "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), + + // Desktops + // ------------------------------------------------------------------------ + "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 + // ------------------------------------------------------------------------ + "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), + "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 new file mode 100644 index 0000000..60bce3d --- /dev/null +++ b/dist/scss/variables/_index.scss @@ -0,0 +1,32 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Unit.gl | Variables +// ============================================================================ + +@forward "layer"; +@forward "paper"; + +@forward "unit_conversion"; +@forward "unit_functions"; + +@forward "unit"; + +@forward "scale"; + +@forward "view"; + +@forward "device"; diff --git a/dist/scss/variables/_layer.scss b/dist/scss/variables/_layer.scss new file mode 100644 index 0000000..87d7c2e --- /dev/null +++ b/dist/scss/variables/_layer.scss @@ -0,0 +1,39 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +/// Layer Map +/// Z-index Layers +$layers: ( + 'guides': 1000, + + // + "max": 9999, + "mid": 0, + "min": -9999, + + // Add more layers as needed + +) !default; + + +/// Layer Function +/// Retrieve z-index from the layers map +@function z($layer) { + @if not map-has-key($layers, $layer) { + @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted."; + } + @return map-get($layers, $layer); +} diff --git a/dist/scss/variables/_paper.scss b/dist/scss/variables/_paper.scss new file mode 100644 index 0000000..2a6cc6f --- /dev/null +++ b/dist/scss/variables/_paper.scss @@ -0,0 +1,308 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Paper Module +// ============================================================================ + + +// Paper Size Map +// ============================================================================ + +$paper_sizes: ( + + // Q Series + // ------------------------------------------------------------------------ + "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 + + // 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 + + // 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 + + // 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 + + // 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 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 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 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 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 + + // 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 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 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 + + // 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 + + // 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" + + // 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 + + // 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 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 + + // 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) + + // 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 + + // 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 + + // 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 + + // Commercial Printing Sizes + // ------------------------------------------------------------------------ + '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 + + + // 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 + + + // 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 + +) !default; + + diff --git a/dist/scss/variables/_scale.scss b/dist/scss/variables/_scale.scss new file mode 100644 index 0000000..e12df76 --- /dev/null +++ b/dist/scss/variables/_scale.scss @@ -0,0 +1,146 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +@use "unit" as *; + + +// $rhythm_base: q(4); +$rhythm_base: $q *4; + +$line_height_ratio: 1.5; + +$font_size_scalar: 4; +$line_height_scalar: calc($line_height_ratio * $font_size_scalar); + + + +$font_size_base: calc($font_size_scalar * $rhythm_base); // Base font size +$line_height_base: calc($line_height_scalar * $rhythm_base); // Base line height (1.5 times the font size is a good start) + + + +// Typography ladder map +$typographic_scale: ( + 1: q( 4), + 2: q( 6), // +2 + 3: q( 8), // +2 + 4: q(10), // +2 + 5: q(12), // +2 + 6: q(14), // +2 + 7: q(16), // +2 + 8: q(20), // +4 + 9: q(24), // +4 + 10: q(28), // +4 + 11: q(32), // +4 + 12: q(36), // +4 + 13: q(40), // +4 + 14: q(48), // +8 + 15: q(56), // +8 + 16: q(64), // +8 + 17: q(72), // +8 +) !default; + +// 'display': $q-base * 96, // For large display text +// 'h1': $q-base * 48, // For primary headings +// 'h2': $q-base * 36, // For secondary headings +// 'h3': $q-base * 24, // For tertiary headings +// 'h4': $q-base * 20, // For quaternary headings +// 'h5': $q-base * 18, // For quinary headings +// 'h6': $q-base * 16, // For senary headings +// 'body-large': $q-base * 14, // For large body text +// 'body': $q-base * 12, // For main body text +// 'body-small': $q-base * 10, // For small body text +// 'caption': $q-base * 8, // For captions and overlines +// 'overline': $q-base * 6 // For the smallest size, like legal text +// ) !default; + + + +// Kyu Point Scale +// ---------------------------------------------------------------------------- + +$basepoint_scale: 4; + +@function basepoint($value) { + @return calc($q * $value * $basepoint_scale); +} + +$basepoint_01: basepoint( 1) !default; +$basepoint_02: basepoint( 2) !default; +$basepoint_03: basepoint( 3) !default; +$basepoint_04: basepoint( 4) !default; +$basepoint_05: basepoint( 5) !default; +$basepoint_06: basepoint( 6) !default; +$basepoint_07: basepoint( 7) !default; +$basepoint_08: basepoint( 8) !default; +$basepoint_09: basepoint( 9) !default; +$basepoint_10: basepoint(10) !default; +$basepoint_11: basepoint(11) !default; +$basepoint_12: basepoint(12) !default; + +$basepoint: ( + 1: basepoint( 1), + 2: basepoint( 2), + 3: basepoint( 3), + 4: basepoint( 4), + 5: basepoint( 5), + 6: basepoint( 6), + 7: basepoint( 7), + 8: basepoint( 8), + 9: basepoint( 9), + 10: basepoint(10), + 11: basepoint(11), + 12: basepoint(12), +) !default; + + +// Kyu Baseline Scale +// ---------------------------------------------------------------------------- + +$baseline_scale: 5; + +@function baseline($value) { + @return calc($q * $value * $baseline_scale); +} + +$baseline_00: baseline( 1) !default; +$baseline_01: baseline( 1) !default; +$baseline_02: baseline( 2) !default; +$baseline_03: baseline( 3) !default; +$baseline_04: baseline( 4) !default; +$baseline_05: baseline( 5) !default; +$baseline_06: baseline( 6) !default; +$baseline_07: baseline( 7) !default; +$baseline_08: baseline( 8) !default; +$baseline_09: baseline( 9) !default; +$baseline_10: baseline(10) !default; +$baseline_11: baseline(11) !default; +$baseline_12: baseline(12) !default; + +$baseline: ( + 1: baseline( 1), + 2: baseline( 2), + 3: baseline( 3), + 4: baseline( 4), + 5: baseline( 5), + 6: baseline( 6), + 7: baseline( 7), + 8: baseline( 8), + 9: baseline( 9), + 10: baseline(10), + 11: baseline(11), + 12: baseline(12), +) !default; + diff --git a/dist/scss/variables/_unit.scss b/dist/scss/variables/_unit.scss new file mode 100644 index 0000000..ebe7ccb --- /dev/null +++ b/dist/scss/variables/_unit.scss @@ -0,0 +1,89 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +// ============================================================================ +// Base | Unit +// ============================================================================ + +@use "sass:math"; + +@use "view" as *; + + +// Kyū Measurement System for Responsive Typography +// Defines a base size and provides a mixin for fluid typography. + + +// Kyū base size definition (A Kyū is 1/16th of a Rem). +// 1rem equals the font size of the html element, which for most browsers has +// a default value of 16px. +$q: 0.0625rem !default; // 1px, or 0.25mm + + +// Function to calculate multiples of 'q' +@function q($multiplier) { + @return calc($q * $multiplier); +} + +// Mixin to apply multiples of 'q' +@mixin q($multiplier, $property) { + #{$property}: q($multiplier); +} + + +// Root custom properties for Kyū sizes +:root { + --q: $q; +} + + + +// Minimum and maximum Kyū sizes +$q_min: 0.75px !default; +$q_max: 1.50px !default; + +// Minimum and maximum Kyū sizes +$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) { + $u1: unit($min-vw); + $u2: unit($max-vw); + $u3: unit($min-font-size); + $u4: unit($max-font-size); + + @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { + & { + font-size: $min-font-size; + @media screen and (min-width: $min-vw) { + font-size: calc(#{$min-font-size} + #{unit_strip($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{unit_strip($max-vw - $min-vw)})); + } + @media screen and (min-width: $max-vw) { + font-size: $max-font-size; + } + } + } +} + + +html { + @include fluid-type($media_xs, $media_sl, $font_min, $font_max); +} + + + + diff --git a/dist/scss/variables/_unit_conversion.scss b/dist/scss/variables/_unit_conversion.scss new file mode 100644 index 0000000..e257f32 --- /dev/null +++ b/dist/scss/variables/_unit_conversion.scss @@ -0,0 +1,77 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + + +// 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) { + @return $size / $base * 1rem; +} + +@function rem-to-px($size, $base: 16px) { + @return $size * $base; +} + +@function em-to-px($size, $context: 16px) { + @return $size * $context; +} + +@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' { + @error "Expected a pixel value, but got `#{$value}`."; + } + @return $value; +} + +// Convert pixels to rem +@function px-to-rem($size) { + $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' { + @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' { + @error "Expected an em value, but got `#{$size}`."; + } + @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; +} diff --git a/dist/scss/variables/_unit_functions.scss b/dist/scss/variables/_unit_functions.scss new file mode 100644 index 0000000..f1120d9 --- /dev/null +++ b/dist/scss/variables/_unit_functions.scss @@ -0,0 +1,213 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +// ============================================================================ +// Unit | Functions +// ============================================================================ + + +/// Strip Unit Function +/// Function to remove the unit from a numerical value +/// Ensures compatibility with various SCSS versions +/// @param $value - The numerical value with or without a unit +/// @return - The raw numerical value without its unit +@function unit_strip($value) { + // Check if the input is a number with a unit + @if type-of($value) == "number" and not unitless($value) { + // Convert the value to a string + $value-str: inspect($value); + // Remove the unit part from the string + $value-no-unit: str-slice( + $value-str, + 1, + str-index($value-str, 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 $start - Starting value at the lower bound (can include units) +/// @param $end - Ending value at the upper bound (can include units) +/// @param $min - Lower bound for interpolation (must be unitless or in 'px') +/// @param $max - Upper bound for interpolation (must be unitless or in 'px') +/// @param $actual - Current value to interpolate (default is 100vw) +/// @return - Interpolated value (in the same units as $start and $end) +@function linear_interpolation($start, $end, $min, $max, $actual: 100vw) { + + // Validate parameters + @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' { + @error "Parameter `$max` must be unitless or in 'px'."; + } + @if $max <= $min { + @error "Parameter `$max` must be greater than `$min`."; + } + + // Convert all values to a common unit for calculation + $unit: 1#{unit($start)}; + + // Convert coordinate values to unitless for calculations + $x0: #{unit_strip($min)}; + $x1: #{unit_strip($max)}; + $y0: #{unit_strip($start)}; + $y1: #{unit_strip($end)}; + + // Calculate the slope of the line + $slope: #{calc(($y1 - $y0) / ($x1 - $x0))}; + + // Calculate the interval + $interval: calc($actual - $min); + + // Calculate and return the interpolated value + $value: calc($start + $slope * $interval); + + // Return the `calc` expression + @return $value; + +} + + +/// Function: scale_dynamic_clamp +/// Calculates font size using clamp-based responsive typography +/// @param $_font_size_min - Minimum font size +/// @param $_font_size_max - Maximum font size +/// @param $_viewport_width_min - Minimum viewport width where scaling starts +/// @param $_viewport_width_max - Maximum viewport width where scaling stops +/// @return - Calculated size using clamp +@function scale_dynamic_clamp( + $_viewport_width_min, + $_viewport_width_max, + $_font_size_min, + $_font_size_max, +) { + @return clamp( + $_font_size_min, + linear_interpolation( + $_font_size_min, + $_font_size_max, + $_viewport_width_min, + $_viewport_width_max + ), + $_font_size_max + ); +} + + + + + +// Fluid Typography Mixin +// ============================================================================ +/// Mixin: fluid_type +/// Creates fluid typography rules to scale font sizes responsively between a +/// minimum and maximum viewport width. +// /// @param $_viewport_width_min - Minimum viewport width where scaling starts +// /// @param $_viewport_width_max - Maximum viewport width where scaling stops +// /// @param $_font_size_min - Minimum font size +// /// @param $_font_size_max - Maximum font size +// @mixin fluid_type( +// $_viewport_width_min, +// $_viewport_width_max, +// $_font_size_min, +// $_font_size_max, +// ) { + +// // Ensure the units are consistent +// $u1: unit($_viewport_width_min); +// $u2: unit($_viewport_width_max); +// $u3: unit($_font_size_min); +// $u4: unit($_font_size_max); + +// // $u1: $_viewport_width_min; +// // $u2: $_viewport_width_max; +// // $u3: $_font_size_min; +// // $u4: $_font_size_max; + +// @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 { +// font-size: $_font_size_min * 16; +// // Apply fluid font-size between the min and max viewport widths +// @media screen and (min-width: $_viewport_width_min) { +// font-size: linear_interpolation( +// $_font_size_min, +// $_font_size_max, +// $_viewport_width_min, +// $_viewport_width_max +// ) * 16; +// } +// // Set to max font-size for viewports wider than the max viewport width +// @media screen and (min-width: $_viewport_width_max) { +// font-size: $_font_size_max * 16; +// } +// } @else { +// @warn "Inconsistent units provided for fluid typography."; +// } +// } + + + +@function scale_dynamic( + $_viewport_width_min, + $_viewport_width_max, + $_font_size_min, + $_font_size_max, + $_current_width, + ) { + // Ensure the units are consistent + // $u1: unit($_viewport_width_min); + // $u2: unit($_viewport_width_max); + // $u3: unit($_font_size_min); + // $u4: unit($_font_size_max); + $u1: $_viewport_width_min; + $u2: $_viewport_width_max; + $u3: $_font_size_min; + $u4: $_font_size_max; + + // 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 + ); + } @else if $_current_width < $_viewport_width_min { + // Return the minimum font size + @return $_font_size_min; + } @else { + // Return the maximum font size + @return $_font_size_max; + } + } @else { + @warn "Inconsistent units provided for fluid typography."; + @return null; + } +} diff --git a/dist/scss/variables/_view.scss b/dist/scss/variables/_view.scss new file mode 100644 index 0000000..04e0d4e --- /dev/null +++ b/dist/scss/variables/_view.scss @@ -0,0 +1,58 @@ +// Copyright 2024 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + + +// ============================================================================ +// Media | Screen +// ============================================================================ + +// 320px — 480px: Mobile devices +// 481px — 768px: iPads, Tablets +// 769px — 1024px: Small screens, laptops +// 1025px — 1200px: Desktops, large screens +// 1201px and more —  Extra large screens, TV + + +$base_screen_unit: 16px !default; // Base unit size (16px) + + +@function calc_breakpoint($multiplier) { + @return $base_screen_unit * $multiplier; +} + + +// Define breakpoints using the function +$breakpoints: ( + xs: calc_breakpoint(20), // 320px - Extra small devices (Mobile) + sm: calc_breakpoint(30), // 480px - Small devices (Tablets) + md: calc_breakpoint(48), // 768px - Medium devices (Laptops) + lg: calc_breakpoint(64), // 1024px - Large devices (Desktops) + xl: calc_breakpoint(80), // 1280px - Extra large devices (TV) + 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; +$media_md: map-get($breakpoints, md) !default; +$media_lg: map-get($breakpoints, lg) !default; +$media_xl: map-get($breakpoints, xl) !default; +$media_sl: map-get($breakpoints, sl) !default; + +$media_dif: calc($media_sl - $media_xs); + +// $media_min: 320px !default; // Mobile +// $media_med: 640px !default; // Tablet +// $media_max: 960px !default; // Screen diff --git a/dist/ts/index.ts b/dist/ts/index.ts new file mode 100644 index 0000000..910db53 --- /dev/null +++ b/dist/ts/index.ts @@ -0,0 +1,16 @@ +// Copyright 2020 Scape Agency BV + +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at + +// http://www.apache.org/licenses/LICENSE-2.0 + +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + + +export {}; \ No newline at end of file diff --git a/package.json b/package.json index 39499bc..7b2015e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "unit.gl", "description": "Layout Engine.", - "version": "0.0.32", + "version": "0.0.33", "config": { "version_short": "0.0" },