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

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: /anydigital/build-awesome-starter/blob/main/_styles/styles.css

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

In you _config.yml:

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

Living example: /anydigital/bladeswitch/blob/main/_config.yml

npm install @anydigital/eleventy-blades

Then choose one of the following options:

Option A. Starting 11ty from scratch?

Consider symlinking entire eleventy.config.js:

ln -s ./node_modules/@anydigital/eleventy-blades/src/eleventy.config.js

Learn more: /build-awesome-11ty/tools/#base-config

Living examples:

• /anydigital/build-awesome-starter
• /anydigital/bladeswitch

Option B. Adding to existing 11ty site?

Install as a plugin in your eleventy.config.js (recommended):

import eleventyBladesPlugin from "@anydigital/eleventy-blades";

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(eleventyBladesPlugin, {
    mdAutoRawTags: true,
    mdAutoNl2br: true,
    autoLinkFavicons: true,
    siteData: true,
    filters: ["attr_set", "attr_concat", ...],
  });
}

Option C. Individual imports

For advanced usage, import individual components only in eleventy.config.js:

import { siteData, mdAutoRawTags, mdAutoNl2br, autoLinkFavicons, attrSetFilter, attrConcatFilter, ... } from "@anydigital/eleventy-blades";

export default function (eleventyConfig) {
  siteData(eleventyConfig);
  mdAutoRawTags(eleventyConfig);
  mdAutoNl2br(eleventyConfig);
  autoLinkFavicons(eleventyConfig);
  attrSetFilter(eleventyConfig);
  attrConcatFilter(eleventyConfig);
  ...
}