npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@0x44ru5h/cute.css

v2.0.2

Published

a cute, modern, and minimal css framework designed for simplicity

Readme

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).

--cute-text

Color of text

--cute-background

Color of background

--cute-background-accent

Accent color (complements main) of background

--cute-accent

Accent color of text

--cute-accent-dark

Darker accent color of text

--cute-accent-greyscale

Greyscale accent color of text

Browser Compatibility

cute.css works in all modern browsers, both desktop and mobile.

Copyright © 2021 Aarush Gupta

This code is copyrighted but licensed to the public under the GNU AGPLv3 license and any later versions.