Blades CSS

Blades is a minimal CSS framework designed for semantic HTML. It is a fully compatible and actively maintained successor to Pico CSS.

Key features include:

• Float labels for form inputs.
• Breakout containers for layout control.
• Modern helpers that are opt-out by design.
• Standalone mode: Allows you to use Blades' utility and component styles alongside other frameworks like Tailwind or Bootstrap without inheriting Pico CSS base styles.

Download the CSS archive from the repository and link the css/blades.css file in the <head> of your website.

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

To use Blades in a modern web development workflow, install the package via npm. After installation, you can import the full framework or just the standalone version into your CSS files.

npm install @anyblades/blades

To use the full framework (includes Pico CSS base styles):

@import "@anyblades/blades";

To use the standalone version (includes Blades helpers but excludes the Pico CSS base styles, useful when using Tailwind or Bootstrap):

@import "@anyblades/blades/standalone";

You can use Blades directly in your HTML by linking to the minified CSS file hosted on JSDelivr. This is the quickest way to get started without managing local files or npm packages.

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

Blades CSS v3 is a semantic HTML styling framework built on top of Pico CSS. It can be integrated into projects via manual installation, CDN, or NPM. The core framework is composed of Pico CSS and the blades.standalone styles.

/* Note: The actual installation commands (NPM, CDN, etc.) are defined in the project README/documentation. This CSS file serves as the main entrypoint that imports Pico CSS and standalone Blades styles. */

Use this minimal HTML structure to ensure proper compatibility with Blades, including the recommended meta tags for color schemes and viewport settings.

<!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="css/blades.css" />
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello world!</h1>
    </main>
  </body>
</html>

You can create "teaser" style links by using an <a> tag with role="button" that contains a heading element (h1 through h6). This automatically applies specific layout styles: text alignment to start, a 1px top and left border, and a negative margin to offset the layout.

<a href="#" role="button" class="outline">
  <h4>Teaser Title</h4>
  <p>Teaser description text.</p>
</a>

The .opt class is used for optional content that should be hidden on smaller screens. When an element has the .opt class (and does not have a class named .does-not-exist), it will be set to display: none on viewports narrower than 1024px.

<div class="opt">
  This content is hidden on mobile/tablet devices (width < 1024px).
</div>

To use the float label form pattern in your project, import the main CSS entrypoint. This file aggregates the core logic and the theme definitions. Ensure that both _float-label.core and _float-label.theme are available in your stylesheet resolution path.

@import "./_float-label.core";
@import "./_float-label.theme";

The ninja add-ons include a selector for GitHub favicons. If an <img> tag has a src attribute containing the query string ?domain=github.com&, it will automatically receive a 50% border-radius (making it circular). Additionally, in dark mode (prefers-color-scheme: dark), the image will have a filter: invert(1) applied.

<img src="https://github.com/favicon.ico?domain=github.com&" alt="GitHub">

Blades CSS provides experimental ninja add-ons to create structured heading hierarchies using <sup> and <sub> elements with inline styles.

• <sup> (Superheadings): When used with a style attribute, it renders as a block-level element with reduced font size (min 50% or 0.75rem), increased letter spacing, and uppercase transformation. This is ideal for parent page titles or category labels.
• <sub> (Subheadings): When used with a style attribute, it renders as a block-level element with a lighter font weight (300) and 75% opacity. If placed directly inside an <h1> element, the font size is automatically scaled to 50%.

<article>
  <h1>
    <sup style="">Parent Page Title</sup>
    <sub style="">Subtitle Content</sub>
  </h1>
</article>