@anydigital/blades 0.27.0-beta.6 → 0.27.0-beta.8

package/README.md

@@ -13,7 +13,7 @@
 
 Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
 
-[![](https://img.shields.io/badge/Docs_&_Demos-darkslategray?style=for-the-badge)](https://blades.ninja/)
+[![](https://img.shields.io/badge/Demo_&_Docs-darkslategray?style=for-the-badge)](https://blades.ninja/)
 
 ---
 
@@ -84,12 +84,12 @@ for 11ty/Build Awesome, Jekyll, etc.
 
 </hgroup>
 
-- [Base HTML](https://blades.ninja/html/#base) {data-marker=🥷}
+- [Base HTML](https://blades.ninja/html/#base) <!--{data-marker=🥷}-->
 - [Links](https://blades.ninja/html/#links)
 - [Sitemap](https://blades.ninja/html/#sitemap)
 - [Google Tag Manager](https://blades.ninja/html/#gtm)
 
-{.columns}
+<!--{.columns}-->
 
 <!--section:index,install-html-->
 <details><summary role="button" class="outline"><b>Install HTML blades</b></summary>
@@ -141,7 +141,7 @@ Living example: https://github.com/anydigital/bladeswitch/blob/main/_config.yml
 
 Or use a preconfigured template:
 
-[🥷 Bladeswitch Starter ↗ &nbsp;<small style="white-space: nowrap">Jekyll ⁺ Pico ⁺ Blades</small>](https://github.com/anydigital/bladeswitch){role=button .outline}
+[🥷 Bladeswitch Starter ↗ &nbsp;<small style="white-space: nowrap">Jekyll ⁺ Pico ⁺ Blades</small>](https://github.com/anydigital/bladeswitch)<!--{role=button .outline}-->
 
 ---
 
@@ -153,4 +153,4 @@ Or use a preconfigured template:
   - https://picocss.com/ for inspiration
   - https://11ty.dev/ for build power
 
-{.unlist .columns}
+<!--{.unlist .columns}-->

package/_includes/blades/gtm.liquid

@@ -22,7 +22,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   {% endcapture %}
   {{ _ | strip }}
 {% endif %}
-{% # prettier-ignore %}
+<!--prettier-ignore-->
 {% comment %}```
 <!--section:docs-->
 Usage in Liquid:

package/assets/blades.css

@@ -153,7 +153,11 @@ The breakout container has `10%` inline padding and a max-width of `calc(10% + 6
 
 /* Content */
 
-/*** Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss ***/
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
+<!--section:docs-->
+
+Global styles:
+```css */
 
 html {
   /* Enable font smoothing */
@@ -171,9 +175,15 @@ body {
   }
 }
 
-/*
-<!--section:docs-->
+/*```
+
 ### Heading anchors
+
+Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
+
+<article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
+
+How it works:
 ```css */
 
 h1,
@@ -193,7 +203,7 @@ h6 {
     color: silver;
     text-decoration: none;
   }
-  /* If hover is supported, show anchor on hover */
+  /* Avoid double-tap on touch devices */
   @media (hover: hover) {
     &:hover {
       [data-is-anchor] {
@@ -201,26 +211,46 @@ h6 {
       }
     }
   }
-  /* Otherwise always show anchors, but subtle */
-  @media (hover: none) {
-    [data-is-anchor] {
-      visibility: visible;
-      opacity: 37.5%;
-    }
-  }
 }
 
 /*```
+> **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anydigital/eleventy-blades/blob/main/src/eleventy.config.js
 
 ### List markers
+
+Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
+<article>
+
+- Customize
+- list
+- markers
+- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
+
+{style="--list-marker:'🧊 '"}
+</article>
+
+How it works:
 ```css */
 
 ul,
 ol {
+  &[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+
+    > li {
+      list-style-type: inherit;
+    }
+  }
+
+  li[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+  }
   li[data-marker]::marker {
+    /* ⚠️ `data-marker` works only in Chrome and Firefox */
     content: attr(data-marker) " ";
   }
 
+  /* Helper class to remove list styling at all */
   &.unlist {
     padding-inline-start: 0;
 
@@ -230,10 +260,12 @@ ol {
   }
 }
 
-/*``` <!--section--> */
+/*```
+<!--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-<!--section:code-->```css */
+<!--section:code-->
+```css */
 
 a {
   /* Helper to handle icons in links */
@@ -259,8 +291,26 @@ a {
 }
 
 /*```
+> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
 <!--section:docs-->
+
 ### Link [fav]icons
+
+Wrap icons inside links using `<i>...&nbsp;</i>` helper to avoid underline. Compare:
+
+<big class="grid">
+  <article><a href="https://github.com/anydigital/blades">   🥷          Blades</a></article>
+  <article><a href="https://github.com/anydigital/blades"><i>🥷&nbsp;</i>Blades</a></article>
+</big>
+
+Use `data-has-favicon` helper attribute on plain-text links containing `<img>`-favicon for better alignment. Compare:
+
+<big class="grid">
+  <article><a href="https://github.com/anydigital/blades"                 ><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">/anydigital/blades</a></article>
+  <article><a href="https://github.com/anydigital/blades" data-has-favicon><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">/anydigital/blades</a></article>
+</big>
+
 <!--section--> */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
@@ -272,17 +322,23 @@ Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especia
 ```html
 <th>Col <hr></th>
 ```
-Example table:
-| SSG <hr> | Description |
-| --- | --- |
-| Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
-
-Same table without `<hr>`-expander would render as:
-| SSG | Description |
-| --- | --- |
-| Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
-
-###### How it works
+Example table before:
+<article class="overflow-auto"><table>
+  <tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
+</table></article>
+
+Same table after adding `<hr>`-expanders:
+<article class="overflow-auto"><table>
+  <tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
+</table></article>
+
+Living examples of big tables with `<hr>`-expanders:
+- https://any.digital/insights/ai-ide/
+- https://any.digital/insights/css-frameworks/
+- https://any.digital/insights/ssg/
+- https://blades.ninja/build-awesome-11ty/#min-starters
+
+How it works:
 ```css */
 
 table {
@@ -302,16 +358,22 @@ table {
 
 /*```
 ---
+
 ### Borderless table
 
 `<table class="borderless">` removes all default borders:
-| Less |     | Borders |
-| ---- | --- | ------- |
-| More |     | Fun     |
+
+<article>
+
+| Less | borders |
+| ---- | ------- |
+| more | fun     |
 
 {.borderless}
+</article>
 
 Living example: https://bladeswitch.com/#minimal-dependencies table
+
 <!--section--> */
 
 table.borderless {
@@ -353,18 +415,27 @@ table.responsive,
 Soft-increase selector specificity trick:
 
 `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
+
 <!--section:docs-->
+
 `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
-<div>
+<hr><div>
 
 | Term | Description <hr class="x2"> | Link |
 | --- | --- | --- |
 | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
 
 {.responsive}
-</div>
+</div><hr>
+
+Tables inside https://blades.ninja/css/breakout/ are responsive by default.
+
+Living examples:
+- https://any.digital/insights/ai-ide/
+- https://any.digital/insights/css-frameworks/
+- https://any.digital/insights/ssg/
+- https://blades.ninja/build-awesome-11ty/#min-starters
 
-Tables inside `.breakout[-all]` are responsive by default.
 <!--section--> */
 
 /* <!--section:docs-->

package/assets/responsive-table.css

@@ -28,16 +28,25 @@ table.responsive,
 Soft-increase selector specificity trick:
 
 `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
+
 <!--section:docs-->
+
 `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
-<div>
+<hr><div>
 
 | Term | Description <hr class="x2"> | Link |
 | --- | --- | --- |
 | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
 
 {.responsive}
-</div>
+</div><hr>
+
+Tables inside https://blades.ninja/css/breakout/ are responsive by default.
+
+Living examples:
+- https://any.digital/insights/ai-ide/
+- https://any.digital/insights/css-frameworks/
+- https://any.digital/insights/ssg/
+- https://blades.ninja/build-awesome-11ty/#min-starters
 
-Tables inside `.breakout[-all]` are responsive by default.
 <!--section--> */

package/blades.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "blades"
-  spec.version       = "0.27.0-beta.6"
+  spec.version       = "0.27.0-beta.8"
   spec.authors       = ["Anton Staroverov"]
 
   spec.summary       = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/blades",
-  "version": "0.27.0-beta.6",
+  "version": "0.27.0-beta.8",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
   "style": "./assets/blades.css",
   "exports": {

package/src/_link.css

@@ -1,5 +1,6 @@
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-<!--section:code-->```css */
+<!--section:code-->
+```css */
 a {
   /* Helper to handle icons in links */
   > i {
@@ -23,6 +24,24 @@ a {
   }
 }
 /*```
+> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
 <!--section:docs-->
+
 ### Link [fav]icons
+
+Wrap icons inside links using `<i>...&nbsp;</i>` helper to avoid underline. Compare:
+
+<big class="grid">
+  <article><a href="https://github.com/anydigital/blades">   🥷          Blades</a></article>
+  <article><a href="https://github.com/anydigital/blades"><i>🥷&nbsp;</i>Blades</a></article>
+</big>
+
+Use `data-has-favicon` helper attribute on plain-text links containing `<img>`-favicon for better alignment. Compare:
+
+<big class="grid">
+  <article><a href="https://github.com/anydigital/blades"                 ><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">/anydigital/blades</a></article>
+  <article><a href="https://github.com/anydigital/blades" data-has-favicon><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">/anydigital/blades</a></article>
+</big>
+
 <!--section--> */

package/src/_table.css

@@ -7,17 +7,23 @@ Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especia
 ```html
 <th>Col <hr></th>
 ```
-Example table:
-| SSG <hr> | Description |
-| --- | --- |
-| Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
+Example table before:
+<article class="overflow-auto"><table>
+  <tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
+</table></article>
 
-Same table without `<hr>`-expander would render as:
-| SSG | Description |
-| --- | --- |
-| Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
+Same table after adding `<hr>`-expanders:
+<article class="overflow-auto"><table>
+  <tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
+</table></article>
 
-###### How it works
+Living examples of big tables with `<hr>`-expanders:
+- https://any.digital/insights/ai-ide/
+- https://any.digital/insights/css-frameworks/
+- https://any.digital/insights/ssg/
+- https://blades.ninja/build-awesome-11ty/#min-starters
+
+How it works:
 ```css */
 table {
   th {
@@ -35,16 +41,22 @@ table {
 }
 /*```
 ---
+
 ### Borderless table
 
 `<table class="borderless">` removes all default borders:
-| Less |     | Borders |
-| ---- | --- | ------- |
-| More |     | Fun     |
+
+<article>
+
+| Less | borders |
+| ---- | ------- |
+| more | fun     |
 
 {.borderless}
+</article>
 
 Living example: https://bladeswitch.com/#minimal-dependencies table
+
 <!--section--> */
 table.borderless {
   th,

package/src/_typography.css

@@ -1,4 +1,8 @@
-/*** Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss ***/
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
+<!--section:docs-->
+
+Global styles:
+```css */
 html {
   /* Enable font smoothing */
   -webkit-font-smoothing: antialiased;
@@ -14,9 +18,15 @@ body {
     hyphens: none;
   }
 }
-/*
-<!--section:docs-->
+/*```
+
 ### Heading anchors
+
+Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
+
+<article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
+
+How it works:
 ```css */
 h1,
 h2,
@@ -35,7 +45,7 @@ h6 {
     color: silver;
     text-decoration: none;
   }
-  /* If hover is supported, show anchor on hover */
+  /* Avoid double-tap on touch devices */
   @media (hover: hover) {
     &:hover {
       [data-is-anchor] {
@@ -43,24 +53,44 @@ h6 {
       }
     }
   }
-  /* Otherwise always show anchors, but subtle */
-  @media (hover: none) {
-    [data-is-anchor] {
-      visibility: visible;
-      opacity: 37.5%;
-    }
-  }
 }
 /*```
+> **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anydigital/eleventy-blades/blob/main/src/eleventy.config.js
 
 ### List markers
+
+Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
+<article>
+
+- Customize
+- list
+- markers
+- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
+
+{style="--list-marker:'🧊 '"}
+</article>
+
+How it works:
 ```css */
 ul,
 ol {
+  &[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+
+    > li {
+      list-style-type: inherit;
+    }
+  }
+
+  li[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+  }
   li[data-marker]::marker {
+    /* ⚠️ `data-marker` works only in Chrome and Firefox */
     content: attr(data-marker) " ";
   }
 
+  /* Helper class to remove list styling at all */
   &.unlist {
     padding-inline-start: 0;
 
@@ -69,4 +99,5 @@ ol {
     }
   }
 }
-/*``` <!--section--> */
+/*```
+<!--section--> */

package/src/responsive-table.css

@@ -28,16 +28,25 @@ table.responsive,
 Soft-increase selector specificity trick:
 
 `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
+
 <!--section:docs-->
+
 `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
-<div>
+<hr><div>
 
 | Term | Description <hr class="x2"> | Link |
 | --- | --- | --- |
 | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
 
 {.responsive}
-</div>
+</div><hr>
+
+Tables inside https://blades.ninja/css/breakout/ are responsive by default.
+
+Living examples:
+- https://any.digital/insights/ai-ide/
+- https://any.digital/insights/css-frameworks/
+- https://any.digital/insights/ssg/
+- https://blades.ninja/build-awesome-11ty/#min-starters
 
-Tables inside `.breakout[-all]` are responsive by default.
 <!--section--> */