# blades✨ ![][V] ![][NEXT_V] ![][LIC] [![][X]][X_URL] [![][B]][B_URL] [![][M]][M_URL] [![][D]][D_URL] [V]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=brightgreen [NEXT_V]: https://img.shields.io/github/v/release/anyblades/blades?include_prereleases&label=^&labelColor=blue&color=blue [LIC]: https://img.shields.io/badge/🄻_MIT-gray [X]: https://img.shields.io/badge/83-white?logo=x&style=social [X_URL]: https://x.com/BladesCSS [B]: https://img.shields.io/bluesky/followers/blades.dev?label= [B_URL]: https://bsky.app/profile/blades.dev [M]: https://img.shields.io/mastodon/follow/117487235444867518?label=NEW [M_URL]: https://mastodon.social/@BladesCSS [D]: https://img.shields.io/badge/%23blades-white?logo=discord&style=social [D_URL]: https://discord.gg/mg8f26C ![](https://trendshift.io/api/badge/trendshift/repositories/154122/daily?language=CSS)

Minimal CSS Framework for Semantic HTML

Blades CSS is a modern drop‑in successor to [Pico CSS](//picocss.com/docs/maintenance). Just switch `pico.css` to `blades.css`— and voilà! --- ## Quick start There are 4 ways to get started: ### A. Install manually [Download CSS archive](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `css/blades.css` in the `` of your website. ```html ``` ### B. Usage from CDN ```html ``` Live example: https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/ ### C. Install with NPM ```sh npm install @anyblades/blades ``` Then, `@import` Blades into your CSS file: ```css @import "@anyblades/blades"; ``` Alternatively, import only the parts you need, e.g. per page or per component. They come wrapped in `@layer blades`, so your unlayered styles win over them: ```css @import "@anyblades/blades/variables"; @import "@anyblades/blades/layout/document"; @import "@anyblades/blades/content/typography"; @import "@anyblades/blades/components/card"; @import "@anyblades/blades/components/modal"; ``` - `variables` and `layout/document` are the minimum; keep the same order as [src/pico/_index.css](https://github.com/anyblades/blades/blob/main/src/pico/_index.css). - Some parts build on others, e.g. `components/modal` expects `components/card`, and `components/group` and `components/dropdown` expect `forms/basics` and `content/button`. - See [Layered modules](//blades.dev/css/layered/) for the available parts, and for importing them from JavaScript in bundlers and component frameworks (SvelteKit, Next.js, Nuxt, Astro, …). - See [package.json](https://github.com/anyblades/blades/blob/main/package.json) for a list of all exported parts. ### D. Official starters - https://github.com/buildawesome-one/starter - https://github.com/buildawesome-one/examples - https://github.com/getgrav/grav-theme-quark2 - https://github.com/getgrav/grav-plugin-devtools --- ## Starter HTML template ```html Hello world!

Hello world!

``` Using Nunjucks, Twig or Liquid? Check out the built-in [Base HTML templates](//blades.dev/tpl/html/) for each engine, ready to be used in your project. --- ## Documentation If you know Pico — you already know Blades: ### Dark mode without a flash With the Pico-based builds, Blades follows the OS setting by default, with no JavaScript and no flash (see [Dark scheme](//blades.dev/css/color-schemes/)). To force a theme, set `data-theme="light"` or `"dark"` on ``. On a nested element it works when the element paints its own background, such as `
`; otherwise add `background-color: var(--pico-background-color); color: var(--pico-color);`. If you persist the user's choice, e.g. under the `localStorage` key `theme`, set the attribute **before the first paint** with a small inline script in ``, e.g. in SvelteKit's `src/app.html`: ```html ``` - Setting it later, e.g. in `onMount` or `useEffect`, renders the OS theme first and then switches. - In a Next.js App Router layout, pass the same code as a template literal, ``