☕️ 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.

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

Linus's picture

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)

This is a blocky card

... that contains many other elements

Theming

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

There are four variables that blocks.css uses:

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

This is a blocky card

... that contains many other elements

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

This is a blocky card

... that contains many other elements

Demo

For a real-world example of blocks.css, check out Codeframe, an in-browser code editor and development environment built with blocks.css. You can also see Zero to Code and lyrics.rip for more examples of blocks.css websites, all of which are themed differently.

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