🥷 Blades

Framework-agnostic, class-light CSS⁺ blade kit.

Use with Pico, Simple, Tailwind, or any other CSS reset/framework.

Docs & demos →

• Install
• Layout
  • Breakout layout
  • Auto-columns
  • Jump to top
• Content
  • Link icon
  • Heading anchors
  • List markers
  • Unlist
  • Code
• Table
  • Responsive table
  • Column expanders
  • Borderless table
• Forms
  • Float label CSS
• Utilities
  • Auto-dark
  • Faded
• Appendix
  • Pico CSS ✨

---

Install

Via CDN

<link rel="stylesheet" href="
  https://cdn.jsdelivr.net/npm/@anyblades/blades@0/assets/blades.min.css
">

Via npm

npm install @anyblades/blades

Then in your .css:

@import "@anyblades/blades";

Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_styles/styles.css

Preconfigured

• Pico: https://github.com/anyblades/pico
• 11ty: https://github.com/anyblades/build-awesome-starter
• Jekyll: https://github.com/anyblades/bladeswitch or as a theme

Theme (optional)

blades.css includes default minimal styling; use blades.core.css to opt-out.

---

Showcase

https://any.digital/ https://build.blades.ninja/ https://bladeswitch.com/ https://minform.hostfurl.com/

• Featured by:

  • https://github.com/uhub/awesome-css
  • https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/lightweight
  • https://github.com/anyblades/awesome-11ty-build-awesome
  • https://11tybundle.dev/blog/11ty-bundle-88/
  • https://jekyll-themes.com/
  • https://sveltiacms.app/
  • ✨ pico.css community fork
  • 🚀 build-awesome-starter
  • 🚀 bladeswitch starter
  • https://fosstodon.org/@pauleveritt/116387278969347700

• Hidden built-ins:

  • https://blades.ninja/css/pico/ community fork
  • https://blades.ninja/html/ templates
  • https://blades.ninja/jekyll/ theme

• Credits:

  • https://picocss.com/ for inspiration
  • https://11ty.dev/ for build power