@0x44ru5h/cute.css NPM

Overview

cute.css is a css framework designed to be modern and minimal, with simplicity for the user in mind; that is why it ships with two pre-built themes (src/themes/), light and dark, with making custom themes easier than other frameworks with simple css variables. It uses html object names rather than classes to make applying styles much easier. See it in action at https://hornersteamclub.github.io.

Styles

`header`

The header object is for all content above and including the navigation bar, such as titles and brand images.

<header>
    ...
</header>

`nav`

The nav object is for the navigation bar is to be used under the header tag. Links in the navagation bar are simple a tags.

<header>
    ...
    <nav>
        <a href = "...">...</a>
    </nav>
    ...
</header>

`main`

The main object is for page content and is to be used after the header tag.

<main>
    ...
</main>

`footer`

The footer object is for copyright content is used after the main tag.

<footer>
    ...
</footer>

Mobile

cute.css ships with mobile styles built-in to make content readable on devices such as tablets, mini-computers, and smartphones.

Custom Themes

cute.css includes a simple api for creating custom themes, with the help of css variables.

Here is a sample theme from src/basic.cute.css

:root {
    --cute-text: #ffffff;
    --cute-background: #151D21;
    --cute-background-accent: #000000;
    --cute-accent: #2fa5ff;
    --cute-accent-dark: #2571db;
    --cute-accent-greyscale: #777777;
}

Custom themes are put in the same format, with all values as color values (hex, rgb).