# 🥷 *Bl*ades # Minimal CSS Framework for Semantic HTML Fully compatible and actively maintained successor to Pico CSS. Includes [Float labels](https://blades.ninja/css/float-label/), [Breakout layout](https://blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css`, or add `blades.standalone.css` to other frameworks. ![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=darkslategray&style=for-the-badge) [![](https://img.shields.io/badge/Code-gainsboro?logo=github&logoColor=black&style=for-the-badge)](https://github.com/anyblades/blades) [![](https://img.shields.io/github/stars/anyblades/blades?label=Star&labelColor=gainsboro&color=silver&style=for-the-badge)](https://github.com/anyblades/blades) ## [Documentation ↗](https://blades.ninja/css/) --- ## Quick start There are 4 ways to get started: ### Install manually [Download *Bl*ades](https://github.com/anyblades/pico/archive/refs/heads/main.zip) and link `assets/blades.css` in the `` of your website. ```html ``` ### Usage from CDN Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@0/) to link `blades.min.css`: ```html ``` Living examples: https://github.com/anyblades/subtle/blob/main/.subtle/package.json ### Install with NPM ```sh npm install @anyblades/pico # optional npm install @anyblades/blades ``` Then, import [Pico and] *Bl*ades into your CSS: ```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 ```html Hello world!

Hello world!

``` ## Featured by - [https://fosstodon.org/@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700) - [https://github.com/@gabrielizalo/awesome-css](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight) - [https://github.com/@uhub/awesome-css](https://github.com/uhub/awesome-css) - [https://github.com/awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome) - [https://github.com/classless-css](https://github.com/dbohdan/classless-css#components)  ðŸ¥· *Fl*oat labels - [https://sveltiacms.app/docs/start](https://sveltiacms.app/en/docs/start#starter-templates) ## Credits - https://picocss.com/ for inspiration - https://11ty.dev/ for build power