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 🙏

© 2025 – Pkg Stats / Ryan Hefner

spcss

v0.9.0

Published

Simple and Plain Stylesheet

Downloads

167

Readme

SPCSS

SPCSS is a simple and plain stylesheet for simple text-based websites.

View Demo View CSS NPM Version JSDelivr Hits MIT License Twitter

Contents

Demo

Check this demo page to see how SPCSS styles a simple HTML page.

SPCSS supports systems and web browsers with dark color theme too, so how the page looks depends on the color theme selected on your system or browser.

If you are unable to change your desktop or browser theme right now, here are some screenshots to see what the output looks like with both themes:

Use SPCSS

To use SPCSS, merely add this line of code to the <head> element of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spcss@0.9.0">

Alternatively, download the CSS file from here, edit and customize it as per your requirements, and use it in your project. You are also welcome to fork this repository and customize it to maintain your own copy of sp.css with styles you frequently need.

CDN URLs

Use the following URL in the <link> tag to load version 0.9.0 (the current version at this time) of SPCSS:

https://cdn.jsdelivr.net/npm/spcss@0.9.0

Use the following URL in the <link> tag to always load the latest version of SPCSS:

https://cdn.jsdelivr.net/npm/spcss

If you need something really easy to remember, use this URL to load the latest version of SPCSS:

https://unpkg.com/spcss

Why SPCSS?

I often develop primarily text-based websites and webpages. The default style chosen by the web browsers while decent leaves a bit to be desired, so I often add a minimal stylesheet to improve the apperance of the document, hyperlinks, code blocks, blockquotes, tables, etc. This project shares the minimal stylesheet that I often rely on for styling simple websites and webpages.

You are welcome to fork this repository and customize it to maintain your own copy of sp.css with styles that you frequently need.

Features

Here is a summary of the style changes provided by SPCSS:

  • Support for dark color theme (prefers-color-scheme: dark).
  • Maximum width for the <body> element to prevent the lines from being too long. Shorter lines make it easier for our eyes to gauge the beginning and end of the lines.
  • Dark gray (#333) text color instead of black (#000) in light mode.
  • Increased line-height to add more room around the lines.
  • More margin above headings to separate them more conspicuously from preceding content.
  • Less margin below headings as well as less line-height for margins to associate them more tightly with succeeding content.
  • Support for heading anchor links to facilitate sharing direct links to sections of a page.
  • Support for special styling of keyboard input (<kbd>) within code blocks (<pre>).
  • Ensure width of images do not exceed the maximum width for the <body> element.
  • Simple styling for <figure> and <figcaption> elements such as margins aligned with the margins of text paragraphs, centered captions, reduced font size for captions.
  • Light gray background for code blocks and blockquotes.
  • Prevent very long lines of code from overflowing outside the gray box for code blocks. Instead, make the code block scrollable when the code overflows the gray box.
  • Light borders for table cells.

See this example page for a quick demonstration of some of these features.

License

This is free and open source software. You can use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of it, under the terms of the MIT License. See LICENSE.md for details.

This software is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, express or implied. See LICENSE.md for details.

Support

To report bugs, suggest improvements, or ask questions, create issues.