🥷 Blades

May 6, 2026 · View on GitHub

Minimal CSS Framework for Semantic HTML

Fully compatible and actively maintained successor to Pico CSS.

Includes Float labels, Breakout layout and other modern helpers. Simply switch pico.css to blades.css or add blades.standalone.css to other frameworks.

Quick start

There are 4 ways to get started:

Install manually

Download Blades and link assets/blades.css in the <head> of your website.

<link rel="stylesheet" href="assets/blades.css" />

Usage from CDN

Alternatively, you can use jsDelivr CDN to link blades.min.css:

<link rel="stylesheet" href="
  https://cdn.jsdelivr.net/npm/@anyblades/blades@0/assets/blades.min.css
"/>

Living examples: https://github.com/anyblades/subtle/blob/main/.subtle/package.json

Install with NPM

npm install @anyblades/pico # optional
npm install @anyblades/blades

Then, import [Pico and] Blades into your CSS:

@import "@anyblades/pico"; /* optional */
@import "@anyblades/blades"; /* can be used standalone */

Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_styles/styles.css

Starter HTML template 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="assets/blades.css" />
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>

Documentation

Credits