README.md

🥷 Blades

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

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

Documentation ↗

• 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
• More
  • Pico+Blades CSS ✨🥷
  • Blades HTML
  • Blades for Jekyll

---

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://blades.ninja/ https://bladeswitch.com/ https://minform.hostfurl.com/

Featured by:

• https://fosstodon.org/@pauleveritt
• https://github.com/@gabrielizalo/awesome-css
• https://github.com/@uhub/awesome-css
• https://github.com/awesome-11ty-build-awesome
• https://github.com/classless-css Float Label by Blades
• https://sveltiacms.app/docs/start with Blades

Credits:

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