# đŸĨˇ *Bl*ades  ![][NPM_V] [NPM_V]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=darkslategray

Minimal CSS Framework for Semantic HTML

Fully compatible and actively maintained successor to [Pico CSS](//blades.ninja/css/pico/). Introduces [float labels](//blades.ninja/css/float-label/), [breakout container](//blades.ninja/css/breakout/) and other modern, opt-out [helpers](//blades.ninja/#docs). Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with other frameworks. --- ## 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` sources into your CSS file: ```css @import "@anyblades/blades"; ```
Alternatively, import [standalone](//blades.ninja/css/standalone/) Blades CSS sources only (without underlying [Pico CSS](//blades.ninja/css/pico/) base styles): ```css @import "@anyblades/blades/standalone"; ``` Live example using Tailwind: https://github.com/anyblades/buildawesome-micro-starters/blob/main/tailwind/styles.css ### 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!

``` ### Dynamic templates [Available for Nunjucks, Liquid and Twig ↗](https://blades.ninja/tpl/) --- ## Documentation --- ## Trusted by - 🐍 [Flask & Jinja](https://palletsprojects.com/) community website - đŸĒ [Grav CMS v2](https://getgrav.org/migrate-to-2#:~:text=blades) default theme ## Featured by - [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades) - [@11ty/buildawesome](https://bsky.app/profile/11ty.dev/post/3mp75r53ccv2b) [↗](https://mastodon.social/@11ty@neighborhood.11ty.dev/116816881367741413) - [ buildawesome.one](https://buildawesome.one/#:~:text=blades) - [libhunt.com](https://www.libhunt.com/r/blades) - [context7.com](https://context7.com/anyblades/blades) - [awesome-css](https://github.com/uhub/awesome-css) - [awesome-css-frameworks](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight) - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700) - [@daviding](https://www.reddit.com/r/Wordpress/comments/1vnfhkr/comment/p3k9z1c/#:~:text=blades) - [@cantdutchthis](https://news.ycombinator.com/item?id=48729467) - [@adamdjbrett](https://github.com/adamdjbrett/11ty-wisp#features:~:text=blades) ## Credits - https://picocss.com/ for [inspiration](//blades.ninja/css/pico/) - https://11ty.dev/ for [site generation](//buildawesome.one/)