A lightweight, high-performance, and Responsive Utility-First CSS Framework Engine built for fast component composition. It bridges the structural power of Bootstrap 5.3+ grid architecture with the atomic agility of Tailwind CSS, enhanced with soft premium Mellow Shadows.
- Atomic Philosophy: Pure utility-first utility classes (
d-flex,gap-*,border-*,rounded-*) without bloated pre-made UI components. - Premium Grid Layout (Upgraded ✨): Reliable, pixel-perfect Bootstrap 5.3+ architecture (
row,col-1tocol-12,g-*) now upgraded with a premium1.75remgutter spacing for more spacious and breathy professional layouts. - Tailwind-style Atomic Color Classes (New 🚀): Direct styling power with native utility classes for all 11 core colors across 100-900 shading scales. Use them instantly without configuration:
text-{color}-{shade}(e.g.,.text-blue-600,.text-slate-900)bg-{color}-{shade}(e.g.,.bg-emerald-500,.bg-zinc-100)border-{color}-{shade}(e.g.,.border-indigo-300,.border-red-500)
- Flexible CSS Variables: All 11-color palette tokens are also exposed as standard CSS variables (
var(--mu-*)) for absolute custom overrides. - Semantic Body & BG Utilities: Contextual modern classes for themes, including
text-body,text-body-secondary,bg-body,bg-body-secondary,bg-transparent, andbg-gradient. - Advanced Core Layouts: Includes layout engines like Vertical/Horizontal Stacks (
vstack,hstack), Aspect Ratios (ratio-*), and Vertical Rules (vr). - Accessibility (A11y) First: Built-in support for screen-readers and SEO via
.visually-hiddenwith standard keyboard focus ring support. - Advanced Transitions & Hover: Enhanced smart interaction utilities (
.transition-colors,.transition-border,.transition-size) for butter-smooth hover and focus effects.
MellowUI-Utilities/
├── dist/
│ └── css/
│ ├── mellowui-utilities.css
│ └── mellowui-utilities.min.css
├── docs/
│ ├── EXAMPLES.md
│ ├── GETTING-STARTED.md
│ └── index.md
├── examples/
│ ├── example1.html
│ └── example2.html
├── package.json
└── README.md
Simply download or clone this repository and copy the dist/css/ folder containing the framework stylesheets into your project directory.
git clone https://github.com/Shayan-0609/MellowUI-Utilities.gitLink the compressed production stylesheet inside your tag before any custom project styles:
<link rel="stylesheet" href="path/to/dist/css/mellowui-utilities.min.css">Import the production-ready minified CSS file directly into your global entry file (e.g., index.js, main.jsx, or _app.js):
import 'mellowui-utilities';(If you want to import the unminified version, you can use import 'mellowui-utilities/css';)
If you are using plain HTML without npm, you can link the production-ready minified stylesheet directly from the CDN inside your <head> tag.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mellowui-utilities@1.3.2/dist/css/mellowui-utilities.min.css"><link rel="stylesheet" href="https://unpkg.com/mellowui-utilities@1.3.2/dist/css/mellowui-utilities.min.css">Distributed under the MIT License. See LICENSE for more information.
Created and maintained by Shayan-0609 — Feel free to connect or contribute!
- GitHub: https://github.com/Shayan-0609/