# 🥷 *Bl*ades  ![][B_NPM] [B_NPM]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=white

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. 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@2/css/ --- ### C. Starter projects - https://subtle.blades.ninja/ 11ty micro-starter - https://start.11ty.blades.ninja/ 7-in-1 starter (including Tailwind) - https://getgrav.org/ v2 now features Blades CSS in its default theme (Quark2) - https://jekyll.blades.ninja/ starter --- ### D. Install with NPM ```sh npm install @anyblades/blades ``` You can use precompiled Pico+Blades CSS (same as CDN version): ```html ```
Or import [standalone](//blades.ninja/css/standalone/) Blades CSS sources (without [Pico CSS](//blades.ninja/css/pico/)): ```css @import "@anyblades/blades/standalone"; ``` Live example using Tailwind: https://github.com/anyblades/buildawesome-starters/blob/main/site-tailwind/styles.css
To install and import both Pico+Blades CSS sources at once: ```sh npm install @anyblades/pico @anyblades/blades ``` ```css @import "@anyblades/pico"; @import "@anyblades/blades/standalone"; ``` This is exactly how *Bl*ades CSS is built itself: https://github.com/anyblades/blades/blob/main/src/blades.css --- ### Appendix #### Starter HTML template ```html Hello world!

Hello world!

``` #### Standalone versions Most of internal Blades CSS modules are available as standalone helpers, giving you flexibility to use them with other CSS frameworks: | Module | CDN | Import from NPM | | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- | | [Breakout container](/css/breakout/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/breakout.min.css | N/A | | [Link icon](/css/link-icon/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/link-icon.min.css | N/A | | [Responsive table](/css/responsive-table/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/responsive-table.min.css | N/A | | [Float labels](/css/float-label/)
https://github.com/anyblades/float-label-css | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/float-label.min.css | `npm install @anyblades/blades`
`@import "@anyblades/blades/float-label";` | | [All above together](/css/standalone/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.standalone.min.css | `npm install @anyblades/blades`
`@import "@anyblades/blades/standalone";` | | [Reset/normalizer](/css/pico/)
https://github.com/anyblades/pico | https://cdn.jsdelivr.net/npm/@anyblades/pico@2/css/pico.min.css | `npm install @anyblades/pico`
`@import "@anyblades/pico";` | | [Experimental "ninja" add-ons](/css/ninja/) | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.ninja.min.css | `npm install @anyblades/blades`
`@import "@anyblades/blades/ninja";` | Live examples: - https://www.mattanger.dev/ (Link icon via CDN) ## Documentation --- ## Trusted by - https://github.com/pallets/website 🐍 ## Featured by - [sveltiacms.app](https://sveltiacms.app/en/docs/start#:~:text=anyblades) - [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades) [↗](https://github.com/getgrav/grav-theme-quark2) - [dummy.my/frameworks](https://dummy.my/frameworks/) - [awesome-css-frameworks _@gabrielizalo_](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight) - [awesome-css _@uhub_](https://github.com/uhub/awesome-css) - [11ty.dev](https://www.11ty.dev/docs/starter/#:~:text=blades) [↗](https://www.11ty.dev/docs/plugins/community/#:~:text=blades) - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700) - [@johnheenan](https://github.com/johnheenan/minform#css-and-performance) - [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w) [↗](https://www.instagram.com/reel/DXOSTpajG4f/) ## Credits - https://picocss.com/ for [inspiration](//blades.ninja/css/pico/) - https://11ty.dev/ for [site generation](//github.com/anyblades/blades.ninja)