🥷 Blades

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

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

Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷

---

Class-light

CSS blades

inspired by Pico.css

Typography

• Table
  • Responsive table
    without wrapper {data-marker=🥷}
• Heading anchors
• List markers {data-marker=🥷}
• Link [fav]icons
• Code

Layout

• Breakout elements {data-marker=🥷}

Utilities

• Jump to top
• Table of contents
• Auto-columns
• Auto-dark

Install CSS blades

Option A. From CDN:

<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.theme.min.css" rel="stylesheet" /><!-- optional -->

Option B. Via npm:

npm install @anydigital/blades

Then import in your .css:

@import "@anydigital/blades";
@import "@anydigital/blades.theme"; /* optional */

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

---

Nunjucks / Liquid

HTML blades

for 11ty/Build Awesome, Jekyll, etc.

• Base HTML {data-marker=🥷}
• Links
• Google Tag Manager

{.columns}

Install HTML blades

npm install @anydigital/blades
cd ./_includes  # or where your includes dir is
ln -s ../node_modules/@anydigital/blades/_includes/blades

That's it! Now you can use HTML blades in your templates like this:

{% extends 'blades/html.njk' %}
{% include 'blades/gtm.njk' %}

or:

{% include blades/html.liquid %}
{% include blades/gtm.liquid for_body=true %}
{% render blades/links, links: site.links, current_url: page.url %}

---

Old-school

Jekyll blades

All CSS and HTML blades above are available as a Jekyll theme:

Install as Jekyll theme

In you _config.yml:

remote_theme: anydigital/blades@v0.27.0-beta # or latest
plugins:
  - jekyll-remote-theme

Living example: https://github.com/anydigital/bladeswitch/blob/main/_config.yml

Or use a preconfigured template:

🥷 Bladeswitch Starter ↗  Jekyll ⁺ Pico ⁺ Blades{role=button .outline}

---

Featured by:

• https://github.com/uhub/awesome-css
• awesome-eleventy list

Credits:

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