@anyblades/blades 0.28.0 → 0.30.0

package/README.md

@@ -2,103 +2,121 @@
 
 <!--section:summary-->
 
-<hgroup>Framework-agnostic,<wbr> class-light CSS<a href="https://blades.ninja/html/" style="padding: 0"><i>⁺</i></a> blade kit.</hgroup>
+# <mark>Minimal CSS&nbsp;Framework</mark> <wbr> for Semantic&nbsp;HTML
 
-<big>Use with Pico, Simple, Tailwind, or any other CSS reset/framework.</big>
+<big>Fully compatible and actively maintained successor to Pico CSS.</big>
 
-![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=darkslategray&style=for-the-badge&include_prereleases)
+Includes [Float labels](https://blades.ninja/css/float-label/), [Breakout layout](https://blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css`, or add `blades.standalone.css` to other frameworks.
+
+<!--section:gh-only-->
+
+![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=darkslategray&style=for-the-badge)
 [![](https://img.shields.io/badge/Code-gainsboro?logo=github&logoColor=black&style=for-the-badge)](https://github.com/anyblades/blades)
 [![](https://img.shields.io/github/stars/anyblades/blades?label=Star&labelColor=gainsboro&color=silver&style=for-the-badge)](https://github.com/anyblades/blades)
 
-<!--section:docs-->
-
-## [Docs & demos <i><small>→</small></i>](https://blades.ninja/css/)
-
-<!--section:docs,toc-->
-<!-- ToC from https://blades.ninja/css/ with `href="/css/#` instead of `href="#` -->
-<ul class="columns"><li><a href="/css/#install" tabindex="-1">Install</a></li>
-<li><a href="/css/#layout" tabindex="-1">Layout</a><ul><li><a href="/css/#breakout">Breakout layout</a></li>
-<li><a href="/css/#auto-columns" tabindex="-1">Auto-columns</a></li>
-<li><a href="/css/#jump-to-top" tabindex="-1">Jump to top</a></li></ul></li>
-<li><a href="/css/#content" tabindex="-1">Content</a><ul><li><a href="/css/#link-icon">Link icon</a></li>
-<li><a href="/css/#heading-anchors" tabindex="-1">Heading anchors</a></li>
-<li><a href="/css/#list-markers" tabindex="-1">List markers</a></li>
-<li><a href="/css/#unlist" tabindex="-1">Unlist</a></li>
-<li><a href="/css/#code" tabindex="-1">Code</a></li></ul></li>
-<li><a href="/css/#table" tabindex="-1">Table</a><ul><li><a href="/css/#responsive-table">Responsive table</a></li>
-<li><a href="/css/#column-expanders" tabindex="-1">Column expanders</a></li>
-<li><a href="/css/#borderless-table" tabindex="-1">Borderless table</a></li></ul></li>
-<li><a href="/css/#forms" tabindex="-1">Forms</a><ul><li><a href="/css/#float-label">Float label CSS</a></li></ul></li>
-<li><a href="/css/#utilities" tabindex="-1">Utilities</a><ul><li><a href="/css/#auto-dark" tabindex="-1">Auto-dark</a></li>
-<li><a href="/css/#faded" tabindex="-1">Faded</a></li></ul></li></ul>
-<!--section:gh-only-->
+## [Documentation ↗](https://blades.ninja/css/)
+
+<!-- ToC from https://blades.ninja/#documentation -->
+<ul class="columns"><li><a href="https://blades.ninja/css/#install" tabindex="-1">Install</a></li><p></p>
+<li><a href="https://blades.ninja/css/#layout" tabindex="-1">Layout</a><ul><li><a href="https://blades.ninja/css/#breakout">Breakout layout</a></li>
+<li><a href="https://blades.ninja/css/#auto-columns" tabindex="-1">Auto-columns</a></li>
+<li><a href="https://blades.ninja/css/#jump-to-top" tabindex="-1">Jump to top</a></li></ul></li>
+<li><a href="https://blades.ninja/css/#content" tabindex="-1">Content</a><ul><li><a href="https://blades.ninja/css/#link-icon">Link icon</a></li>
+<li><a href="https://blades.ninja/css/#heading-anchors" tabindex="-1">Heading anchors</a></li>
+<li><a href="https://blades.ninja/css/#list-markers" tabindex="-1">List markers</a></li>
+<li><a href="https://blades.ninja/css/#unlist" tabindex="-1">Unlist</a></li>
+<li><a href="https://blades.ninja/css/#code" tabindex="-1">Code</a></li></ul></li>
+<li><a href="https://blades.ninja/css/#table" tabindex="-1">Table</a><ul><li><a href="https://blades.ninja/css/#responsive-table">Responsive table</a></li>
+<li><a href="https://blades.ninja/css/#column-expanders" tabindex="-1">Column expanders</a></li>
+<li><a href="https://blades.ninja/css/#borderless-table" tabindex="-1">Borderless table</a></li></ul></li>
+<li><a href="https://blades.ninja/css/#forms" tabindex="-1">Forms</a><ul><li><a href="https://blades.ninja/css/#float-label">Float label CSS</a></li></ul></li>
+<li><a href="https://blades.ninja/css/#utilities" tabindex="-1">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-dark" tabindex="-1">Auto-dark</a></li>
+<li><a href="https://blades.ninja/css/#faded" tabindex="-1">Faded</a></li></ul></li>
+<li><a href="https://blades.ninja/css/#more" tabindex="-1">More</a><ul><li><a href="https://blades.ninja/css/#pico">Pico+Blades CSS ✨🥷</a></li>
+<li><a href="https://blades.ninja/css/#html">Blades HTML</a></li>
+<li><a href="https://blades.ninja/css/#jekyll">Blades for Jekyll</a></li></ul></li></ul>
 
 ---
 
-## Install
+## Quick start
 
-<!--section:install-->
+<!--section:install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
 
-###### <mark>Via CDN</mark>
+There are 4 ways to get started:
+
+### Install manually
+
+[Download *Bl*ades](https://github.com/anyblades/pico/archive/refs/heads/main.zip) and link `assets/blades.css` in the `<head>` of your website.
+
+```html
+<link rel="stylesheet" href="assets/blades.css" />
+```
+
+### Usage from CDN
+
+Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@0/) to link `blades.min.css`:
 
 <!--prettier-ignore-->
 ```html
 <link rel="stylesheet" href="
-  https://cdn.jsdelivr.net/npm/@anyblades/blades@^0.28.0-alpha/assets/blades.min.css
-">
+  https://cdn.jsdelivr.net/npm/@anyblades/blades@0/assets/blades.min.css
+"/>
 ```
 
-###### <mark>Via npm</mark>
+Living examples: https://github.com/anyblades/subtle/blob/main/.subtle/package.json
+
+### Install with NPM
 
 ```sh
+npm install @anyblades/pico # optional
 npm install @anyblades/blades
 ```
 
-Then in your `.css`:
+Then, import [Pico and] *Bl*ades into your CSS:
 
 ```css
-@import "@anyblades/blades";
+@import "@anyblades/pico"; /* optional */
+@import "@anyblades/blades"; /* can be used standalone */
 ```
 
 Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_styles/styles.css
 
-<!--section:install,install-preconf-->
+### Starter HTML template <!-- from index.html -->
 
-###### <mark>Preconfigured</mark>
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <link rel="stylesheet" href="assets/blades.css" />
+    <title>Hello world!</title>
+  </head>
+  <body>
+    <main class="container">
+      <h1>Hello world!</h1>
+    </main>
+  </body>
+</html>
+```
 
-- Pico: https://github.com/anyblades/pico
-- 11ty: https://github.com/anyblades/build-awesome-starter
-- Jekyll: https://github.com/anyblades/bladeswitch or [as a theme](https://blades.ninja/jekyll/#install)
+<!--section:info-->
 
-<!--section:install-->
+## <sup>Featured by</sup><!--A-Z-->
 
-###### Theme <small>(optional)</small>
+- [https://fosstodon.org/@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
+- [https://github.com/@gabrielizalo/awesome-css](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
+- [https://github.com/@uhub/awesome-css](https://github.com/uhub/awesome-css)
+- [https://github.com/awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
+- [https://github.com/classless-css](https://github.com/dbohdan/classless-css#components) &nbsp;<small>🥷 *Fl*oat labels</small>
+- [https://sveltiacms.app/docs/start](https://sveltiacms.app/en/docs/start#starter-templates)
 
-`blades.css` includes default minimal styling; use `blades.core.css` to opt-out.
+<!--{.unlist .columns}-->
 
-<!--section:docs-->
+## <sup>Credits</sup>
 
----
+- https://picocss.com/ for inspiration
+- https://11ty.dev/ for build power
 
-- Featured by:
-  - https://github.com/uhub/awesome-css
-  - https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/lightweight
-  - https://github.com/anyblades/awesome-11ty-build-awesome
-  - https://11tybundle.dev/blog/11ty-bundle-88/
-  - [https://jekyll-themes.com/](https://jekyll-themes.com/anyblades/blades)
-  - [https://sveltiacms.app/](https://sveltiacms.app/en/docs/start#starter-templates)
-  - ✨ [pico.css](https://github.com/anyblades/pico) community fork
-  - 🚀 [build-awesome-starter](https://github.com/anyblades/build-awesome-starter)
-  - 🚀 [bladeswitch](https://github.com/anyblades/bladeswitch) starter
-
-- Showcase:
-  - <abbr data-tooltip="Pico CSS + Blades">✨+🥷</abbr> = https://any.digital/
-  - <abbr data-tooltip="Tailwind CSS + Typography plugin + Blades">💨+🥷</abbr> = https://build.blades.ninja/
-  - <abbr data-tooltip="Pico CSS + Blades">✨+🥷</abbr> = https://bladeswitch.com/
-  - <abbr data-tooltip="Pico CSS + Blades">✨+🥷</abbr> = https://minform.hostfurl.com/
-
-- Credits:
-  - https://picocss.com/ for inspiration
-  - https://11ty.dev/ for build power
-
-<!--{.unlist-all .columns}-->
+<!--{.unlist}-->

package/_includes/blades/html.liquid

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

package/_includes/blades/html.njk

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