Unit.gl NPM | npm.io

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

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:

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

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.