A classless, block-based CSS framework for clean, responsive, and semantic HTML — with dark mode support, accessible defaults, and zero class bloat.
- ✅ Classless styling — Just write semantic HTML
- ✅ Block-based grid — Use simple
data-musgo-blockattributes - ✅ Responsive layout — With mobile-first breakpoints (
sm,md,lg,xl) - ✅ Dark mode — Enabled via
data-theme="dark" - ✅ Accessible forms — With focus, disabled, and validation states
- ✅ Modular SCSS — Built for maintainability and easy customization
🧪 Try Musgo in action:
👉 https://uminocelo.github.io/musgo
Explore the full grid system, responsive behavior, and dark mode in the demo page.
git clone https://github.com/uminocelo/musgo.git<link rel="stylesheet" href="css/musgo.css">
<link rel="stylesheet" href="css/musgo-block-grid.css">Or download the latest release from the Releases page.
<div data-musgo-container>
<div data-musgo-row>
<div data-musgo-block="2">3 columns</div>
<div data-musgo-block="3">6 columns</div>
<div data-musgo-block="2">3 columns</div>
</div>
</div>Use responsive modifiers like data-musgo-block-sm, -md, -lg, and -xl to control layout at different breakpoints.
Musgo uses a 12-column grid with predefined block sizes:
| Block | Columns | Percentage |
|---|---|---|
| 1 | 1 | ~8.33% |
| 2 | 3 | 25% |
| 3 | 6 | 50% |
| 4 | 9 | 75% |
| 5 | 12 | 100% |
You can combine blocks and adjust responsiveness with data-musgo-block-[breakpoint].
Enable dark mode by setting the data-theme="dark" attribute on the or element:
<html data-theme="dark">Musgo automatically adjusts colors, backgrounds, and form styles using CSS variables.
musgo/
├── css/
│ ├── musgo.css # Classless core styles
│ ├── musgo-block-grid.css # Grid layout engine
│ └── scss/ # Source SCSS files (modular)
├── demo/
│ └── index.html # Full demo page
├── docs/
│ └── USAGE.md # In-depth usage guide
├── README.md
└── LICENSELicensed under the MIT License.
Built with ❤️ by uminocelo.