🥷 Blades

<!--section:hero-->

<hgroup>Framework-agnostic,<wbr> class-light CSS⁺ blade kit.</hgroup>

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

<!--section-->

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

---

<!--section:index-->

^Class-light<br> CSS blades <br>_{inspired by Pico.css} <!--{#css}-->

<!-- copy-paste of ToC from https://blades.ninja/css/ --> <ul class="unlist columns"> <li><a href="https://blades.ninja/css/#install">Install</a></li> <li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/"><i>🥷</i> Breakout elements →</a></li> <li><a href="https://blades.ninja/css/#landmarks">Landmarks</a></li> <li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li> <li><a href="https://blades.ninja/css/#jump-to-top">Jump to top</a></li></ul></li> <li><a href="https://blades.ninja/css/#content">Content</a><ul><li><a href="https://blades.ninja/css/#heading-anchors">Heading anchors</a></li> <li><a href="https://blades.ninja/css/#list-markers">List markers</a></li> <li><a href="https://blades.ninja/css/link-icon/"><i>🥷</i> Link [fav]icons →</a></li> <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li> <li><a href="https://blades.ninja/css/#table">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/"><i>🥷</i> Responsive table without wrapper →</a></li> <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li> <li><a href="https://blades.ninja/css/#borderless-table">Borderless table</a></li></ul></li> <li><a href="https://blades.ninja/css/#utilities">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-dark">Auto-dark</a></li> <li><a href="https://blades.ninja/css/#faded">Faded</a></li> <li><a href="https://blades.ninja/css/#invert">Invert</a></li> <li><a href="https://blades.ninja/css/#unreduce-motion">Unreduce motion</a></li></ul></li> <li><a href="https://blades.ninja/css/#theme-optional">Theme (optional)</a></li> </ul> <!--section:index,install-css--> <details><summary role="button" class="outline"><b>Install CSS blades</b></summary>

<mark>Option A.</mark> From CDN:

<!--prettier-ignore-->

<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 -->

<mark>Option B.</mark> 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

</details> <!--section:index-->

---

^{Nunjucks / Liquid}<br> HTML blades <br>_{for 11ty/Build Awesome, Jekyll, etc.}

• Base HTML <!--{data-marker=🥷}-->
• Links
• Sitemap
• Google Tag Manager

<!--{.columns}--> <!--section:index,install-html--> <details><summary role="button" class="outline"><b>Install HTML blades</b></summary>

npm install @anydigital/blades
cd ./_includes  # your includes dir
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' %}

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

</details>

---

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

<details><summary role="button" class="outline"><b>Install as Jekyll theme</b></summary>

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

</details>

Or use a preconfigured template:

🥷 Bladeswitch Starter ↗  <small style="white-space: nowrap">Jekyll ⁺ Pico ⁺ Blades</small><!--{role=button .outline}-->

<!--section:gh-only-->

---

<!--section:appendix-->

• Featured by:
  • https://github.com/uhub/awesome-css
  • 🕶️ @gabrielizalo/awesome-css
  • 🕶️ awesome-eleventy
  • https://jekyll-themes.com/
  • 🚀 build-awesome-starter
  • 🚀 bladeswitch starter
  • https://github.com/hostfurl/minformhf 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

<!--{.unlist .columns}-->