A minimal CSS framework inspired by Milligram, Pico.css, Skeleton, Chota, Water.css, and Splatoon UI.
Write standard HTML elements - they're automatically styled. Use classes only for variations.
- Semantic HTML First: Standard elements like
<button>,<input>,<table>,<h1>-<h6>are styled automatically - Optional Classes: Use classes only for variations (colors, sizes) and layouts (grid, spacing)
- Lightweight: ~50KB minified, ~65KB unminified
- No dependencies: Pure CSS, no JavaScript required
- Responsive: Mobile-first design with responsive tables, navbar, and grid
- Dark mode: Manual toggle via CSS class
- Customizable: CSS custom properties for easy theming
- Accessible: Focus-visible states, reduced motion support, screen reader utilities
- Splatoon-Inspired Design: Hard offset shadows, vibrant accent colors, playful interactions
Inspired by Splatoon's ink palette:
#EAFF3D- Neon Yellow#603BFF- Ink Blue#AF50FF- Ink Purple#6AF7CE- Ink Green#FF9750- Ink Orange#FF505E- Ink Red
Create a paper-cutout effect with solid color shadows:
/* Available shadow utilities */
.nb-shadow-hard-sm → 2px 2px 0 rgba(0,0,0,0.15)
.nb-shadow-hard-md → 4px 4px 0 rgba(0,0,0,0.15)
.nb-shadow-hard-lg → 6px 6px 0 rgba(0,0,0,0.15)
.nb-shadow-hard-xl → 8px 8px 0 rgba(0,0,0,0.15)Buttons and cards have bouncy hover effects with shadow transitions.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OshekharO/Neubrutalism@main/neubrutalism.min.css"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neubrutalism CSS</title>
<link rel="stylesheet" href="neubrutalism.min.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a minimal CSS framework.</p>
<button>Click Me</button>
</body>
</html>document.documentElement.classList.toggle('nb-dark');Or add the class directly:
<html class="nb-dark">
<!-- or -->
<html data-theme="dark">| Category | Components |
|---|---|
| Typography | Headings, paragraphs, links, blockquotes, code, text utilities |
| Layout | Container, 12-column grid, flex utilities, spacing utilities, responsive tables |
| Buttons | Primary, outline, secondary, success, danger, link, sizes, groups |
| Forms | Inputs, textarea, select, checkboxes, radios, range, input groups |
| Navigation | Navbar (responsive), breadcrumb, pagination |
| Content | Cards, tables, badges, alerts, lists, accordion |
| Feedback | Progress bars, spinners, tooltips, modals |
| Components | Avatars, empty states, skeleton loading, aspect ratios, dividers |
| Utilities | Display, spacing, width, borders, backgrounds, shadows, position, animations |
Override CSS custom properties to customize the theme:
:root {
--nb-color-primary: #6200ea;
--nb-color-primary-hover: #3700b3;
--nb-border-radius: 0.5rem;
--nb-font-family: 'Inter', sans-serif;
}- Full Documentation - Comprehensive guide with examples
- Live Demo - See all components in action
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
MIT License - see LICENSE for details.