☕️ blocks.css

blocks.css adds a layer of dimension to your web elements. It's light enough that it takes no time to set up or load, but interesting enough that it can serve as the only major CSS on the page.

Basics

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

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

This is a blocky button. It's interactive –– try hovering and clicking on it.

You can make any element blocky by giving it the class block.

<button class="block">Hello, World!</button>

Accents

This is an accent button. You can make a block accented with the class accent.

Pills

This is a round button, also sometimes called a "pill". You can make a box round with the class round.

Fixed blocks

This is a fixed button, which means it won't respond to any of your inputs or interactions. You can make a block fixed with the class fixed.

Wrapper blocks

Sometimes, you want to blockify an element like img or input. But these elements can't have children like ::before and ::after elements, so blocks.css can't work its magic. Instead you'll have to wrap them in a wrapper block, using the wrapper class, like this. (The wrapper class removes padding in the block.)

Inline blocks

Lastly, sometimes you may want to place a block inline, or in the middle of a line of text. You can do so with an inline block, by adding the class inline. Then your blocks can be in the middle of text, like this.

Core components

We've only looked at buttons so far, but anything can be blocky. Here are a few examples.

These are all just created by either adding the block class on a normal HTML element, or by wrapping normal HTML elements in <div class="wrapper block"></div>.

This is a blocky code block (inside a wrapper)

Theming

You can theme button styles by customizing the colors, using CSS custom properties.

There are four variables that blocks.css uses:

• --block-text-color determines the color of text, and the border around the block and its shadow

• --block-background-color is the color of the button background

• --block-accent-color is the background color of accented buttons

• --block-shadow-color is the fill color of the shadow

Here's a more colorful palette, by changing the --block-accent-color within just this div.

This is a dark theme, made possible by setting the text, background, and shadow colors to be their inverses.

Demo

For real-world examples of blocks.css, check out these sites, which feature the library in different themes:

• Codeframe, an in-browser code editor and playground

• Read.gift, an awesome service to give and receive the gift of books

• Plume.chat, a small in-memory real time chat server with Go and WebSockets

• Lyrics.rip, which uses Markov chains to generate lyrics for any artist with the Genius API

• ZeroToCode.org, a place for beginner coders to learn to make stuff on the web

• 1989.style, an online quiz about lines of lyrics from Taylor Swift's discography

• Frieden, a public free-busy calendar that can aggregate events from multiple Google Calendar accounts

• Tabloid, a Turing-complete programming language that reads like clickbait headlines

• Heyyyyyyyyyyyy.com, a parody of the email service Hey.com

• draw, a minimal in-memory collaborative whiteboard

• Shelf.page, an online, public “blog-shelf” for collecting and sharing interesting reads with your audience

• Ink programming language sandbox, a sandboxed playground for the Ink programming language

• Own2020s.com, a calculator to visualize the time you can save by cutting down on a habit

blocks.css is made by Linus. Find me at @thesephist anywhere on the web.