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.
There are 4 ways to get started:
Download Blades and link assets/blades.css in the <head> of your website.
<link rel="stylesheet" href="assets/blades.css" />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
npm install @anyblades/pico # optional
npm install @anyblades/bladesThen, 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
<!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>- https://fosstodon.org/@pauleveritt
- https://github.com/@gabrielizalo/awesome-css
- https://github.com/@uhub/awesome-css
- https://github.com/awesome-11ty-build-awesome
- https://github.com/classless-css#float-label
- https://sveltiacms.app/docs/start
- https://www.youtube.com/@githubsignals
- https://picocss.com/ for inspiration
- https://11ty.dev/ for build power