@anydigital/blades 0.27.0-beta.9 → 0.28.0-alpha

package/README.md

@@ -2,153 +2,102 @@
 
 <!--section:hero-->
 
-<hgroup>Framework-agnostic,<wbr> class-light CSS⁺ blade kit.</hgroup>
+<hgroup>Framework-agnostic,<wbr> class-light CSS<a href="https://blades.ninja/html/"><i>⁺</i></a> blade kit.</hgroup>
 
 <big>Use with Pico, Simple, Tailwind, or any other CSS reset/framework.</big>
 
 ![](https://img.shields.io/github/v/release/anydigital/blades?label=&color=white&include_prereleases)
 [![](https://img.shields.io/github/stars/anydigital/blades?label=)](https://github.com/anydigital/blades)
 
-<!--section-->
-
-Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
+<!--section:gh-only-->
 
 [![](https://img.shields.io/badge/Demo_&_Docs-darkslategray?style=for-the-badge)](https://blades.ninja/)
 
 ---
 
-<!--section:index-->
-
-<hgroup id="css"><small>Class-light</small>
+## Documentation
 
-## [CSS blades](https://blades.ninja/css/)
-
-inspired by Pico.css
-
-</hgroup>
+<!--section:docs-->
 
 <!-- copy-paste of ToC from https://blades.ninja/css/ -->
 <ul class="unlist columns">
-<li><a href="https://blades.ninja/css/#table">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/">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/#content">Content</a><ul><li><a href="https://blades.ninja/css/#link-fav-icons">Link [fav]icons</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/#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/link-icon/"><i>🥷</i> Link [fav]icons</a></li>
 <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/#unlist">Unlist</a></li>
 <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
-<li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/">Breakout elements →</a></li>
-<li><a href="https://blades.ninja/css/#document">Document</a></li>
-<li><a href="https://blades.ninja/css/#landmarks">Landmarks</a></li>
-<li><a href="https://blades.ninja/css/#table-of-contents">Table of contents</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/#utilities">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li>
-<li><a href="https://blades.ninja/css/#auto-dark">Auto-dark</a></li>
-<li><a href="https://blades.ninja/css/#misc">Misc</a></li></ul></li></ul>
+<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/#forms">Forms</a><ul><li><a href="https://blades.ninja/css/float-label/"><i>🥷</i> Float label without CSS classes</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>
+</ul>
 
-<!--section:index,install-css-->
-<details><summary role="button" class="outline"><b>Install CSS blades</b></summary>
+---
+
+## Install
+
+<!--section:docs,install-->
 
-<mark>Option A.</mark> From CDN:
+<mark>Via CDN:</mark>
 
 <!--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 -->
+<link rel="stylesheet" href="
+  https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-beta/assets/blades.min.css
+">
 ```
 
-<mark>Option B.</mark> Via npm:
+<mark>Via npm:</mark>
 
 ```sh
 npm install @anydigital/blades
 ```
 
-Then import in your .css:
+Then in your `.css`:
 
 ```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-->
-
----
-
-<hgroup><small>Nunjucks / Liquid</small>
-
-## [HTML blades](https://blades.ninja/html/)
-
-for 11ty/Build Awesome, Jekyll, etc.
-
-</hgroup>
-
-- [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)
+<!--section:docs,install,install-preconf-->
 
-<!--{.columns}-->
+<mark>Preconfigured:</mark>
 
-<!--section:index,install-html-->
-<details><summary role="button" class="outline"><b>Install HTML blades</b></summary>
-
-```sh
-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:
-
-```jinja2 {data-caption=Nunjucks}
-{% extends 'blades/html.njk' %}
-{% include 'blades/gtm.njk' %}
-```
-
-```liquid {data-caption=Liquid}
-{% include blades/html.liquid %}
-{% include blades/gtm.liquid for_body=true %}
-{% render blades/links, links: site.links, current_url: page.url %}
-```
-
-</details>
-
-<!--section:gh-only-->
-
----
-
-<!--section:appendix-->
-
-<hgroup><small>Old-school</small><h2>Jekyll blades</h2><p></p></hgroup>
-
-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`:
-
-```yaml
-remote_theme: anydigital/blades@v0.27.0-beta # or latest
-plugins:
-  - jekyll-remote-theme
-```
+- 11ty: https://github.com/anydigital/build-awesome-starter
+- Jekyll: https://github.com/anydigital/bladeswitch or [as a theme](https://blades.ninja/jekyll/#install)
 
-Living example: https://github.com/anydigital/bladeswitch/blob/main/_config.yml
+<!--section:docs,install-->
 
-</details>
+##### Default theme <small>(optional)</small>
 
-Or use a preconfigured template:
+`blades.css` includes default minimal styling; use `blades.core.css` to opt out.
 
-[🥷 Bladeswitch Starter ↗ &nbsp;<small style="white-space: nowrap">Jekyll ⁺ Pico ⁺ Blades</small>](https://github.com/anydigital/bladeswitch)<!--{role=button .outline}-->
+<!--section:docs-->
 
 ---
 
 - Featured by:
   - https://github.com/uhub/awesome-css
+  - 🕶️ [awesome-css-frameworks](https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries/tree/master/Lightweight)
   - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
+  - https://11tybundle.dev/showcase/
   - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
+  - https://github.com/anydigital/build-awesome-starter
+  - https://github.com/anydigital/bladeswitch 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

package/_includes/blades/html.liquid

@@ -9,7 +9,7 @@
       {%- if title %}{{ title | strip_html | append: ' | ' }}{% endif -%}
       {{- site.title -}}
     </title>
-    <meta name="description" content="{{ description | default: site.description }}">
+    <meta name="description" content="{{ summary }}">
 
     {%- for href in site.styles %}
       <link rel="stylesheet" href="{{ href | relative_url }}">

package/_includes/blades/html.njk

@@ -9,7 +9,7 @@
       {{- title | string | striptags ~ ' | ' if title -}}
       {{- site.title -}}
     </title>
-    <meta name="description" content="{{ description | d(site.description) }}" />
+    <meta name="description" content="{{ summary }}" />
 
     {%- for href in site.styles %}
       <link rel="stylesheet" href="{{ href }}" />