3d-glass-ui
v1.0.0
Published
3D glass UI SCSS library
Downloads
3
Maintainers
Readme
3D glass UI
3D glassmorphism styles and components, built with modern CSS.
Table of contents
Description
This is an early draft of the 3D glass UI library.
This project is set up as a design system prototyping playground. You can easily configure the design tokens and instantly see the results applied to the demo site.
Features
- Customizable design tokens and composable styling classes. For glass that reflects your branding.
- Fluid typography and sizing. For elements that scale with viewport width.
- Container queries. For truly responsive components.
Build with
- HTML
- CSS (SCSS)
- Vanilla JS
Browser compatibility
All the CSS used is supported by the latest desktop and mobile versions of Firefox, Safari, and Chrome.
If you require legacy browser support please make sure to test! The goal of this project was to create next-gen glassmorphism, therefore backwards compatibility was not a top priority.
Setup
This project uses Stephanie Eckles' Minimum Static Site Setup with Sass
To get started:
- Make sure you have Node, and Npm installed.
- Install Node modules.
npm install
- Copy src files to public and start Browsersync server at localhost:3000.
npm start
Credits
- Stephanie Eckles for Minimum Static Site Setup with Sass
- Adrian Bece for interactive fluid typography editor
- James Gilyead & Trys Mudford for Fluid Space Calculator
- Chris Coyier for change SVG color with mask
- Ahmad Salameh for Noise texture generator
Author
Kris Kay
License
This project is licensed under the MIT License - see the LICENSE.md file for details.