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 and detailed documentation to see Quintsea CSS in action, or explore the available components.

This project is dedicated to Nakano Nino 💜🥰

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, extract and link it to your project (e.g., quintsea-css/).

<!-- base css (default appearance) -->
<link rel="stylesheet" href="quintsea-css/css/quintsea.min.css">

<!-- additional appearance (e.g., neubrutalism) -->
<link rel="stylesheet" href="quintsea-css/css/themes/quintsea-neubrutalism.min.css">

<!-- js for interactive components-->
<script src="quintsea-css/js/quintsea.min.js"></script>

Using CDN

You can also use the CDN for a quick setup. See the package on jsDelivr.

<!-- css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quintsea-css@latest/css/quintsea.min.css">

<!-- js -->
<script src="https://cdn.jsdelivr.net/npm/quintsea-css@latest/js/quintsea.min.js"></script>

Install with NPM

npm install quintsea-css

Usage Example

<!-- Button -->
<button class="btn primary">Click Me</button>

<!-- Card -->
<div class="card">
    <a href="#" class="img-th"><img src="img/nino.webp" alt="nino"></a>
    <h6><a href="#">Nakano Nino</a></h6>
    <p class="text-14 color secondary">Gotoubun no Hanayome</p>
</div>

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 :

<div class="grid grid-3 gap-12"> ... </div>
<!-- or -->
<div class="cardset grid-3 gap-12"> ... </div>
<!-- or -->
<div class="flex gap-12"> ... </div>

grid/cardset example :

<div class="cardset grid-3 gap-12">
    <div class="card row-span-2">1 (row span 2)</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card col-span-2">4 (span 2)</div>
</div>

flex example :

<nav class="flex gap-12">
    <a href="#" class="btn primary">1</a>
    <a href="#" class="btn primary">2</a>
    <a href="#" class="btn primary">3</a>
</nav>

Dark Mode

Add the inline init script before </head>.

<script>
    (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);
    })();
</script>

There are three ways to switch between light and dark mode.

<!-- set a specific theme -->
<button data-theme-trigger="dark">Dark</button>
<button data-theme-trigger="light">Light</button>

<!-- toggle between themes -->
<button data-theme-trigger="toggle">Toggle</button>

<!-- follow your system's theme -->
<button data-theme-trigger="system">System Default</button>

Browser Support

Quintsea CSS uses normalize.css to reset default browser styles, and Material Symbols 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.