Stylescape Layout Engine.
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.
- 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.
<script src="https://unpkg.com/unit.gl@latest/dist.min.js"></script>npm i unit.gl| 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:
unit.gl is an open-source project by 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
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.
Copyright © 2023 Scape Agency BV. All Rights Reserved.
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.
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.