paper.css

paper.css is a spiritual successor to blocks.css, a small library I'd made to add a nice, modern design aesthetic to web apps without much work. paper.css carries the same simplicity, focus on a single visual motif, and customizability thorugh CSS variables.

paper.css is a single stylesheet. Get started by adding the stylesheet to your page's head.

<link rel="stylesheet" href="https://unpkg.com/@thesephist/paper.css/dist/paper.min.css" />

A single paper element looks like this.

It's a static piece of paper hovering over the page. We make an element into a paper element by adding the paper class. We can further customize our paper element by adding other properties through extra classes on the element.

Make the paper accented with a theme color with the accent class.

If the accent is too bold, just color the text inside with the colored class.

A paper element is normally a display: block element. To use a paper element inline, add the inline class to turn it into an inline-block.

This text includes an inline paper element.

The real appeal of paper elements is that the elevation off the page can make interactive animations delightful. To mark a paper element as interactive, add the movable class.

I'm a movable paper element.

Try hovering over and clicking on the movable paper above.

Movable elements are font-weight: bold. If you don't like it, you can override the property on .movable.paper elements in your own CSS.

One other visual accent we can add to paper elements is a single-sided border. A paper card with a border can subtly draw attention to itself and come off as less boring than a simple paper card.

We can add a border to a side of any paper element by adding the class paper-border-{{side}}, where side can be any of top, right, bottom, or left. Here's what those look like.

We can also add multiple borders to the same element by using multiple classes.

Paper elements have a small padding by default. If we're making a paper element from an <img> or some other element that should take up the entire paper area, add a wrap class to remove that padding.

With padding:

... and without padding, with the wrap class.

Similar things work for videos, inputs, textareas, and other such elements.

We can theme the color scheme of a paper.css page using CSS custom properties. There are four variables you can adjust.

• --paper-accent is the accent color

• --paper-foreground is the color of the text in paper elements

• --paper-background is the color of the paper's background

• --paper-border-width determines the width of colored borders

To test theming, click this button to switch the theme of this page.

I'm using paper.css for most of my side projects since summer 2020, including these below.

• Codesynth, generating music from lines of source code with the Web Audio API

• Lovecroft, a minimal mailing list and newsletter manager that's fast and simple

• Matisse, a gallery of generative art written in the programming language Ink

• Histools, a collection of tools for generating heatmaps and data visualizations from Safari’s browser history data

• Wintermute, which generates fake blog posts from my blog based on a Markov chain model

• Thingboard, a board for text notes in the browser, movable and scalable anywhere you want on the screen

Of course, this demo page is also built with paper.css.