Skip to content

anydigital/blades

Repository files navigation

🥷 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


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.

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

Everything above (CSS+HTML blades) is available as 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 fully preconfigured:

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