@anydigital/blades 0.27.0-alpha.16 → 0.27.0-beta

package/README.md

@@ -2,7 +2,7 @@
 
 <!--section:hero-->
 
-<hgroup>Framework-agnostic,<wbr> class-light CSS+ blade kit.</hgroup>
+<hgroup>Framework-agnostic,<wbr> class-light CSS⁺ blade kit.</hgroup>
 
 <big>Use with Pico, Tailwind, or any other CSS reset/framework.</big>
 
@@ -10,322 +10,129 @@
 
 Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
 
-<!--section:css-h2-->
+---
 
-## CSS 'blades' <br><sub>from https://github.com/anydigital/blades</sub> <a id="blades"></a>
+<!--section:index-->
 
-### Install CSS
+<hgroup id="css">
+  <small>Class-light</small>
+  <h2>CSS blades</h2>
+  <p>inspired by Pico.css</p>
+</hgroup>
 
-Via CDN:
+<big>
 
-```html
-<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@0/dist/blades.min.css" rel="stylesheet" />
-```
-
-Or import source styles via npm:
-
-```sh
-npm install @anydigital/blades
-```
-
-```css {data-caption=.css}
-@import "@anydigital/blades";
-```
-
-<details><summary>
-
-### `_base.css` styles
-
-</summary>
+- [Typography](https://blades.ninja/css/typography/)
+  - [Table](https://blades.ninja/css/table/)
+  - [Responsive table without wrapper](https://blades.ninja/css/table/#responsive-table-without-wrapper) {data-marker=🥷}
+  - [Heading anchors](https://blades.ninja/css/typography/#heading-anchors)
+  - [List markers](https://blades.ninja/css/typography/#list-markers) {data-marker=🥷}
+  - [Link [fav]icons](https://blades.ninja/css/typography/#link-fav-icons)
+  - [Code](https://blades.ninja/css/code/)
+- [Layout](https://blades.ninja/css/layout/)
+  - [Breakout elements](https://blades.ninja/css/breakout/) {data-marker=🥷}
+- [Utilities](https://blades.ninja/css/utilities/)
+  - [Jump to top](https://blades.ninja/css/utilities/#jump-to-top)
+  - [Table of contents](https://blades.ninja/css/utilities/#table-of-contents)
+  - [Auto-columns](https://blades.ninja/css/utilities/#auto-columns)
+  - [Auto-dark](https://blades.ninja/css/utilities/#auto-dark)
 
-#### Overflow Control
+{.columns}
 
-Prevents horizontal overflow and scrolling on the entire page:
+</big>
 
-```css
-html,
-body {
-  overflow-x: clip;
-}
-```
-
-This is automatically applied when you include the stylesheet.
-
-#### Full Viewport Height
+<details><summary role="button" class="outline">Install CSS blades</summary>
 
-Ensures the body element takes at least the full height of the viewport using dynamic viewport height for better mobile support:
-
-```css
-body {
-  min-height: 100dvh;
-}
-```
+<mark>Option 1.</mark> From CDN:
 
-This is automatically applied when you include the stylesheet.
-
-#### Flexbox Layout
-
-Sets up a flexible column layout structure:
-
-```css
-body {
-  display: flex;
-  flex-direction: column;
-}
-
-body > main {
-  flex-grow: 1;
-}
+<!--prettier-ignore-->
+```html
+<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 -->
 ```
 
-The body becomes a flex container with column direction, and `main` elements automatically grow to fill available space. This is useful for creating sticky footers and full-height layouts.
-
-This is automatically applied when you include the stylesheet.
+<mark>Option 2.</mark> Via npm:
 
-#### Typography Enhancements
-
-Improves text rendering and readability:
-
-```css
-body {
-  hyphens: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+```sh
+npm install @anydigital/blades
 ```
 
-- Automatic hyphenation for better text flow
-- Font smoothing for cleaner text rendering across browsers
-- Hyphenation is disabled for links and tables to prevent awkward breaks
-
-This is automatically applied when you include the stylesheet.
-
-</details>
-
-<details><summary>
-
-### `_prose.css` Tailwind Typography enhancements
-
-</summary>
-
-The `.prose` class provides enhanced typography for article content and long-form text with container-like behavior:
-
-**Container:**
-
-- Full width
-- Centered with automatic inline margins
-
-**Typography Helpers:**
-
-- `sub` elements: styled for multi-line subtitles with top vertical alignment, `1.1` line height, lighter weight (`300`), and displayed as `inline-block` with `100%` width to prevent underline decoration inside links
-
-**Links:**
-
-- Custom underline offset (`0.1em`) and thickness (`1px` default, `2px` on hover)
-- Anchor links (starting with `#`) have no text decoration
-- Icon helper: `i` elements inside links are displayed as `inline-block` with normal font style to prevent underline decoration, with `1em` height and `0.25em` right margin. Nested `img` elements are styled with `100%` height, no margin, and positioned `0.15em` from the bottom for proper alignment
-
-**Headings:**
-
-- `h1` elements have a `0.5em` bottom margin
-- `h1 sub` elements get reduced font size (`50%`)
-- Support for heading anchors via `.header-anchor` class (displayed on hover to the left of the heading)
-
-**Tables:**
-
-- Tables within `.breakout` containers are automatically styled for full-bleed display and horizontal scrolling
-- Table cells (`th` and `td`) have padding of `1rem 2rem 1rem 0` (extra space on the right for better horizontal scroll on mobile) and `top` vertical alignment
-- Table headers (`th`) have `bottom` vertical alignment
-- Workaround for widening columns using hidden `hr` elements (width: `12ch`, with zero margin and hidden visibility)
-- Support for headings in Markdown tables using `big` elements (styled as bold)
-- Images in table cells have no top margin and `1em` bottom margin
-
-**Blockquotes:**
-
-- Lighter font weight (`300`)
-- Adjacent `figcaption` elements (using `+ figcaption` selector) are styled with italic text, right alignment, lighter weight (`300`), negative top margin (`-1em`), and an em dash prefix (`—`) with `0.25em` right margin
-
-**Code Blocks:**
-
-- Code blocks with `data-caption` attribute display the caption above the code block (styled with 50% opacity, italic, and `1.5em` bottom margin)
-
-</details>
-
-### `_prism.css` enhancements
-
-Includes specialized styling for Prism.js, specifically focusing on treeview components:
-
-- Custom styling for `.token.treeview-part`
-- Reduced opacity for entry lines (25%) and names (50%) to create a hierarchical visual effect
-- Entry lines have a fixed width of `2.5em`
-- Last-child entry names have no `::before` pseudo-element
-- Supports complex file tree visualizations out of the box
-
-<details><summary>
-
-### `_util.css` helpers
-
-</summary>
-
-#### Scrollbar Inversion
-
-The `.invert` class can be used to invert the scrollbar colors, which is particularly useful for dark themes or specific UI components:
+Then import in your .css:
 
 ```css
-.invert {
-  ::-webkit-scrollbar {
-    filter: invert(1) !important;
-  }
-}
-```
-
-#### Link Whitespace Control
-
-The `.whitespace-nowrap` class can be applied to links to prevent them from wrapping, which is particularly useful when links contain icons that should stay with the text:
-
-```html
-<a href="#" class="whitespace-nowrap">
-  <i><img src="icon.svg" alt="" /></i>Stay with me
-</a>
-```
-
-This ensures the icon and the text stay together on the same line. If you need nested elements to allow wrapping, they are automatically reset to `white-space: normal`.
-
-**Usage:**
-
-```html
-<article class="prose">
-  <h1>Article Title</h1>
-  <p>Your content here...</p>
-</article>
+@import "@anydigital/blades";
+@import "@anydigital/blades.theme"; /* optional */
 ```
 
-This is automatically included when you import the stylesheet.
+Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_styles/styles.css
 
 </details>
 
-### `breakout-css` included
-
-Includes [breakout-css](https://github.com/anydigital/breakout-css) utilities for breaking out images and figures beyond their container width. Use the `.breakout` class to allow elements to extend beyond their parent container:
+---
 
-```html
-<div class="breakout">
-  <img src="image.jpg" alt="Description" />
-</div>
-```
+<hgroup>
+  <small>Nunjucks / Liquid</small>
+  <h2>HTML blades</h2>
+  <p>for 11ty/Build Awesome, Jekyll, etc.</p>
+</hgroup>
 
-The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
+<big>
 
-<!--section:njk-liquid-h2-->
+- [Base HTML](https://blades.ninja/html/) {data-marker=🥷}
+- [Links](https://blades.ninja/html/links/)
+- [Google Tag Manager](https://blades.ninja/html/gtm/)
 
-## Universal Template 'blades' <small>(`.njk` & `.liquid`)</small> <br><sub>from https://github.com/anydigital/blades</sub>
+{.columns}
 
-The package includes reusable templates in the `./src/blades/` directory. These are useful for common web development patterns.
+</big>
 
-### Install Templates
+<details><summary role="button" class="outline">Install HTML blades</summary>
 
 ```sh
 npm install @anydigital/blades
-cd ./src/_includes
-ln -s ../../node_modules/@anydigital/blades/src/blades
+cd ./_includes  # or where your includes dir is
+ln -s ../node_modules/@anydigital/blades/_includes/blades
 ```
 
-### Base HTML Template <small>(`__html.*`)</small>
-
-A unified base HTML template `blades/__html.{njk|liquid}` that provides the essential document structure with built-in support for modern web best practices.
+That's it! Now you can use HTML blades in your templates like this:
 
-**Usage:**
-
-```jinja2 {data-caption="in .njk layout:"}
-{% extends 'blades/__html.njk' %}
-
-{% block body %}
-  <!-- YOUR page content -->
-{% endblock %}
+```jinja2
+{% extends 'blades/html.njk' %}
+{% include 'blades/gtm.njk' %}
 ```
 
-Example: https://github.com/anydigital/sveleven/blob/main/src/_theme/__layout.njk
+or:
 
-```liquid {data-caption="in .liquid layout:"}
-{% capture body %}
-  <!-- YOUR page content -->
-{% endcapture %}
-
-{% include 'blades/__html' %}
+```liquid
+{% include blades/html.liquid %}
+{% include blades/gtm.liquid for_body=true %}
+{% render blades/links, links: site.links, current_url: page.url %}
 ```
 
-Example: https://github.com/anydigital/sveleven/blob/main/src/_theme/__layout.liquid
-
-**Features:**
-
-- HTML5 DOCTYPE with language attribute (defaults to `en`, configurable via `site.lang`)
-- UTF-8 charset and comprehensive viewport meta tag with `viewport-fit=cover` for notched devices
-- Dynamic title generation with site title suffix (title is stripped of HTML tags and separated with `|`)
-- Favicon link (to `/favicon.ico`)
-- Automatic stylesheet linking from `site.styles` array
-- Inline styles from `site.inline_styles` array (joined with newlines in a `<style>` tag)
-- Automatic script loading from `site.scripts` array (with `defer` attribute)
-- Inline module scripts from `site.inline_scripts` array (joined with newlines in a `<script type="module">` tag)
-- Custom header content via `content_for_header`
-- Google Tag Manager integration (automatically rendered via `_gtm.{njk|liquid}` template for both `<head>` and `<body>` when `site.prod` and `site.gtm_id` are set)
-
-**Variables:**
-
-- `body` - The page content to be rendered inside the `<body>` tag (required)
-- `title` - Page title (optional, will be stripped of HTML tags)
-- `site.title` - Site title for the title suffix
-- `site.lang` - Language code (optional, defaults to `'en'`)
-- `site.styles` - Array of stylesheet URLs (optional)
-- `site.inline_styles` - Array of inline CSS strings (optional)
-- `site.scripts` - Array of script URLs (optional)
-- `site.inline_scripts` - Array of inline JavaScript strings (optional)
-- `content_for_header` - Custom HTML for the head section (optional)
-- `site.gtm_id` - Google Tag Manager ID (optional)
-- `site.prod` - Boolean flag for production environment (optional)
-
-### Navigation <small>(`_nav.*`)</small>
-
-A navigation template `blades/_nav.{njk|liquid}` that renders a list of navigation links with proper accessibility attributes.
-
-**Parameters:**
-
-- `nav_pages` - Array of navigation page objects with `url` and `title` properties
-- `current_url` - The URL of the current page (used to set `aria-current="page"`)
-
-**Usage example with [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually):**
-
-```liquid {data-caption="in .liquid:"}
-{% assign nav_pages = collections.all | eleventyNavigation %}
-{% render 'blades/_nav', nav_pages: nav_pages, current_url: page.url %}
-```
-
-**Output:**
+</details>
 
-```html
-<nav>
-  <a href="/">Home</a>
-  <a href="/about" aria-current="page">About</a>
-  <a href="/contact">Contact</a>
+---
+
+<hgroup>
+  <small>Open-source</small>
+  <h2>Starter blades</h2><i></i>
+</hgroup>
+
+<nav class="grid">
+  <a role="button" class="outline" href="https://github.com/anydigital/build-awesome-starter">
+    <big>Blades with Tailwind</big><br>
+    using Eleventy and Nunjucks <br>
+    <small>(Build Awesome Starter)</small>
+  </a>
+  <a role="button" class="outline" href="https://github.com/anydigital/bladeswitch">
+    <big>Blades with Pico</big><br>
+    using Jekyll and Liquid <br>
+    <small>(Bladeswitch Starter)</small>
+  </a>
 </nav>
-```
-
-<details><summary>
 
-### Google Tag Manager <small>(`_gtm.*`)</small>
+---
 
-</summary>
+Featured by:
 
-A template `blades/_gtm.{njk|liquid}` for embedding Google Tag Manager scripts in your pages.
-
-**Parameters:**
-
-- `site.gtm_id` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
-- `site.prod` - Boolean flag to enable GTM only in production
-- `for_body` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
-
-**Note:** This template is automatically included when using `__html.liquid`. You only need to manually render it if you're not using that base template, see examples:
-
-- https://github.com/anydigital/blades/blob/main/blades/__html.njk
-- https://github.com/anydigital/blades/blob/main/blades/__html.liquid
-
-</details>
+- https://github.com/uhub/awesome-css

package/_includes/blades/gtm.liquid

@@ -1,3 +1,4 @@
+{% comment %}<!--section:code-->```liquid{% endcomment %}
 {% if site.prod and site.gtm_id %}
   {% capture _ %}
     {% unless for_body %}
@@ -21,3 +22,18 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   {% endcapture %}
   {{ _ | strip }}
 {% endif %}
+{% # prettier-ignore %}
+{% comment %}```
+<!--section:docs-->
+Usage in Liquid:
+```liquid
+    ...
+    {% include blades/gtm.liquid %}
+  </head>
+  <body>
+    {% include blades/gtm.liquid for_body=true %}
+    ...
+```
+
+Living example: https://github.com/anydigital/blades/blob/main/_includes/blades/html.liquid
+<!--section-->{% endcomment %}

package/_includes/blades/gtm.njk

@@ -1,3 +1,4 @@
+{# <!--section:code-->```jinja2 #}
 {% if site.prod and site.gtm_id %}
   {# prettier-ignore-start #}
     {% if not for_body %}
@@ -20,3 +21,22 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     {% endif %}
   {# prettier-ignore-end #}
 {% endif %}
+{#```
+<!--section:docs-->
+Usage in Nunjucks:
+```jinja2
+    ...
+    {% include 'blades/gtm.njk' %}
+  </head>
+  <body>
+    {% set for_body = true %}{% include 'blades/gtm.njk' %}
+    ...
+```
+
+Living example: https://github.com/anydigital/blades/blob/main/_includes/blades/html.njk
+
+Parameters:
+- `site.gtm_id` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
+- `site.prod` - Boolean flag to enable GTM only in production
+- `for_body` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
+<!--section--> #}

package/_includes/blades/html.liquid

@@ -1,4 +1,4 @@
-{% comment %} <!--section:code-->```liquid {% endcomment %}
+{% comment %}<!--section:code-->```liquid{% endcomment %}
 <!doctype html>
 <html lang="{{ site.lang | default: 'en' }}">
   <head>
@@ -36,17 +36,14 @@
   </body>
 </html>
 {% comment %}```
-
 <!--section:docs-->
+Usage in Liquid layout:
 
-To use in your layout:
-
-```liquid {data-caption=default.liquid}
+```liquid
 {% capture body %}...{% endcapture %}
 
 {% include blades/html.liquid %}
 ```
 
 Living example: https://github.com/anydigital/bladeswitch/blob/main/_includes/default.liquid
-
-<!--section--> {% endcomment %}
+<!--section-->{% endcomment %}

package/_includes/blades/html.njk

@@ -36,19 +36,16 @@
   </body>
 </html>
 {#```
-
 - `title | string` avoids error with `| striptags` when you pass a pure number.
 
 <!--section:docs-->
+Usage in Nunjucks layout:
 
-To use in your layout:
-
-```jinja2 {data-caption=default.njk}
+```jinja2
 {% extends 'blades/html.njk' %}
 
 {% block body %}...{% endblock %}
 ```
 
 Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_includes/default.njk
-
 <!--section--> #}

package/_includes/blades/links.liquid

@@ -1,3 +1,4 @@
+{% comment %}<!--section:code-->```liquid{% endcomment %}
 <ul>
   {%- for link in links %}
     <li>
@@ -8,9 +9,19 @@
     </li>
   {%- endfor %}
 </ul>
+{% # prettier-ignore %}
+{% comment %}```
+<!--section:docs-->
+Usage with [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually):
 
-{%- comment %}
-  Compatible with:
-  - https://picocss.com/docs/nav
-  - https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually
-{%- endcomment %}
+```liquid
+{% assign links = collections.all | eleventyNavigation %}
+{% render blades/links, links: links, current_url: page.url %}
+```
+
+Usage inside Pico's Navar:
+
+```jinja2
+TBD
+```
+<!--section-->{% endcomment %}