🥷 Blades

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

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

---

Documentation

• Layout
  • 🥷 Breakout elements
  • Auto-columns
  • Jump to top
• Content
  • 🥷 Link [fav]icons
  • Heading anchors
  • List markers
  • Unlist
  • Code
• Table
  • 🥷 Responsive table without wrapper
  • Horizontal expanders
  • Borderless table
• Forms
  • 🥷 Float label without CSS classes
• Utilities
  • Auto-dark
  • Faded
  • Invert
  • Unreduce motion

---

Install

Via CDN:

<link rel="stylesheet" href="
  https://cdn.jsdelivr.net/npm/@anyblades/blades@^0.27.0-beta/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

Default theme (optional)

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

---

• Featured by:
  • https://github.com/uhub/awesome-css
  • https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/lightweight
  • https://github.com/anydigital/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
• Showcase:
  • https://any.digital/ (Pico + Blades)
  • https://build.blades.ninja/ (Tailwind + Blades)
  • https://bladeswitch.com/ (Pico + Blades)
  • https://minform.hostfurl.com/ (Pico + Blades)
• Credits:
  • https://picocss.com/ for inspiration
  • https://11ty.dev/ for build power