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

tty.css

v0.1.0

Published

Pure CSS simulation of text-mode web browsers

Downloads

166

Readme

tty.css

Pure CSS simulation of text-mode web browsers

Inspired by BOOTSTRA.386, tty.css is a pure CSS stylesheet that provides a visual aspect similar to text-mode web browsers like Lynx or Links2, similar to what other projects like 98.css does with old desktop UIs.

http://www.kompx.com/en/text-based-web-browsers-for-linux.htm

Features

  • Text-like styled components
  • Enforce usage of monospaced fonts (system UI monospaced font if available as ui-monospace and GNU Unifont if externally provided)
  • Usage of !important to force limitations of monospaced grid layout of TTYs
  • Light and dark color schemes (default dark if there's no system preference)
  • Markdown-inspired representation of compatible elements (can be used as pure CSS html-to-markdown converter)
  • Row-by-row scrolling

How to use

<link
  href="https://unpkg.com/tty.css"
  media="tty or (grid)"
  rel="stylesheet"
  type="text/css"
/>

If you want to apply it unconditionally, for example to use it as a base stylesheet or to force a webpage to render as a terminal, just remove the media query. You can use the GNU Unifont by adding the next line:

<link
  href="https://fontlibrary.org/face/gnu-unifont"
  rel="stylesheet"
  type="text/css"
/>

Row-by-row scrolling

For row-by-row scrolling, it was possible to be done in pure CSS by using scroll-snap-points-y, but it was later removed from the CSS specification in benefict of element-based snapping. Due to this, I've added a simple Javascript file that somewhat replicates that functionality. You can use it by adding:

<script src="https://unpkg.com/tty.css/index.js"></script>

Alternatively, you can use a scroll-snap-points-y polyfill to have a more "pure CSS-like" experience like old scrollsnap-polyfill, or since this will never goes into the standard, provide a ponyfill focused only on the scroll-snap-points-y here. Pull-requests are welcome.

TO-DO

  • Pixel-perfect adjustment to 8x16 grid (bold, borders...)
    • Replace bold by bright colors
  • Replace graphical elements (images, videos and SVG) with low-res versions
  • Multiple modes for graphical elements (only text, half-blocks, sixels, full resolution)
  • Color modes (monochrome, 16 colors, 256 colors, 24 bits)

FAQ

Why?

I'm a hands-on learner when I find an interesting project to tink around, so I decided to re-purposse it as a way to learn CSS myself.

How have you defined the stylesheet in the GitHub Pages site?

GitHub Pages sites are powered by Jekyll, where themes files are stacked. It was as simple as placing an empty stylesheet file at assets/css/style.scss importing the one of the project.