🥷 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/@anydigital/blades@^0.27.0-beta/assets/blades.min.css
">

Via npm:

npm install @anydigital/blades

Then in your .css:

@import "@anydigital/blades";

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

Preconfigured:

• 11ty: https://github.com/anydigital/build-awesome-starter
• Jekyll: https://github.com/anydigital/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
  • 🕶️ awesome-css-frameworks
  • 🕶️ awesome-eleventy
  • https://11tybundle.dev/
  • https://jekyll-themes.com/
  • https://sveltiacms.app/
  • https://github.com/anydigital/build-awesome-starter
  • https://github.com/anydigital/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