unit.gl

---

unit.gl

Stylescape Layout Engine

---

Contents

• Introduction
• Colophon

---

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

<script src="https://unpkg.com/unit.gl@latest/dist.min.js"></script>

NPM Module

npm i unit.gl

Links

• Website
• NPM

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
• Material Design | Pixel density

---

Colophon

Authors

unit.gl is an open-source project by Scape Agency.

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
• github: github.com/scape-agency

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 for information.

Legal Information

Copyright

Copyright © 2023 Scape Agency BV. 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, and code samples are licensed under the Apache 2.0 License.

Also see LICENSE and 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.