https://github.com/nanraizen/quintsea-css
A CSS framework built around five aesthetics (4+1), which includes Minimalism (+ dark mode), Neubrutalism, Flat and Retro UI Design.
https://github.com/nanraizen/quintsea-css
css css-framework dark-mode flatui minimalism neobrutalism neubrutalism retroui
Last synced: 5 months ago
JSON representation
A CSS framework built around five aesthetics (4+1), which includes Minimalism (+ dark mode), Neubrutalism, Flat and Retro UI Design.
- Host: GitHub
- URL: https://github.com/nanraizen/quintsea-css
- Owner: nanraizen
- License: mit
- Created: 2025-10-16T08:28:51.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-11-25T03:09:48.000Z (7 months ago)
- Last Synced: 2025-11-28T12:32:57.985Z (7 months ago)
- Topics: css, css-framework, dark-mode, flatui, minimalism, neobrutalism, neubrutalism, retroui
- Language: CSS
- Homepage: https://quintsea.nanraizen.me
- Size: 558 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Quintsea CSS
Quintsea is a CSS framework built around five aesthetics (4+1), which includes Minimalism (+ dark mode), Neubrutalism, ~~Flat~~ and ~~Retro~~ UI Design.
Check out the [live demo](https://quintsea.nanraizen.me) and detailed [documentation](https://quintsea.nanraizen.me/docs) to see Quintsea CSS in action, or explore the available components.
> This project is dedicated to [Nakano Nino](https://5hanayome.fandom.com/wiki/Nino_Nakano) 💜🥰
## Overview
- 🎭 **4+1 Aesthetics** - four design aesthetics with Dark Mode available for Minimalism.
- 🧩 **Components** - reusable building blocks.
- ⚡ **States** - smooth interactions and feedback.
- 🔤 **Formatting** - clean, readable text styling.
- 🎨 **Colors** - palettes that bring designs to life.
- 🌄 **Backgrounds** - subtle textures and visuals that set the mood.
## Installation
### Install Manually
Download from the [Releases](../../releases), extract and link it to your project (e.g., `quintsea-css/`).
```html
```
### Using CDN
You can also use the CDN for a quick setup. See the package on [jsDelivr](https://www.jsdelivr.com/package/npm/quintsea-css).
```html
```
### Install with NPM
```html
npm install quintsea-css
```
## Usage Example
```html
Click Me
```
### Layout Philosophy
Quintsea CSS is not a complete layout system. You'll still need to use additional css `grid`, `flex`, or other layout methods for advanced layouts. However, a set of starter `grid` and `flex` classes is included for convenience, and they remain intentionally minimal.
base example :
```html
...
...
...
```
grid/cardset example :
```html
1 (row span 2)
2
3
4 (span 2)
```
flex example :
```html
```
## Dark Mode
Add the inline init script before ``.
```html
(function initTheme() {
const root = document.documentElement;
const savedTheme = localStorage.getItem('theme') || 'system';
const preference = window.matchMedia('(prefers-color-scheme: dark)').matches;
let theme;
if (savedTheme === 'system') {
theme = preference ? 'dark' : 'light';
} else {
theme = savedTheme;
}
root.setAttribute('data-theme', theme);
})();
```
There are three ways to switch between light and dark mode.
```html
Dark
Light
Toggle
System Default
```
## Browser Support
Quintsea CSS uses [normalize.css](https://necolas.github.io/normalize.css) to reset default browser styles, and [Material Symbols](https://fonts.google.com/icons) for the icons.
- Chromium-based, 2020 and newer (Chromium 85+).
- Firefox, 2020 and newer (Firefox 80+).
- Safari, untested. 🙏
- IE is dead, forget it. 🙏
## License
Code licensed under [MIT](https://github.com/nanraizen/quintsea-css/blob/main/LICENSE).
