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 Pico+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 assets/blades.min.css:
<link rel="stylesheet" href="
https://cdn.jsdelivr.net/npm/@anyblades/blades@2/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://sveltiacms.app/docs/start
- https://www.youtube.com/@githubsignals
- https://github.com/classless-css for Float label
- https://trendshift.io/ for Pico fork