@anyblades/blades 2.4.9 → 3.0.0-alpha.2

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,25 @@
+---
+name: Bug report
+about: Create a bug report if you've already asked for help with a problem and confirmed something is broken with Blades CSS.
+---
+
+Please search for duplicate or closed issues first.
+
+## Describe the issue
+
+### Current Behavior
+
+A concise description of the bug.
+
+### Expected Behavior
+
+A concise description of what you expected.
+
+### Reproduction URL
+
+We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool.
+**Please do not link to your actual project.** Instead, we need a reduced test case in a new project without any unnecessary code.
+
+### Environment
+
+Example: OS, versions, browser details.

package/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Get Help
+    url: https://github.com/orgs/anyblades/discussions/categories/help
+    about: If you can't get something to work the way you expect, open a question in our discussion forums.
+  - name: Feature Request
+    url: https://github.com/orgs/anyblades/discussions/categories/ideas
+    about: Suggest any ideas you have using our discussion forums.

package/.prettierrc.json

@@ -2,6 +2,12 @@
   "printWidth": 120,
   "plugins": ["prettier-plugin-jinja-template"],
   "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "printWidth": 100
+      }
+    },
     {
       "files": ["*.njk", "*.html"],
       "options": {

package/README.md

@@ -1,21 +1,21 @@
-# 🥷 *Bl*ades  ![][B_NPM]
+# 🥷 *Bl*ades  ![][NPM_V]
 
-[B_NPM]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=white
+[NPM_V]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=darkslategray
 
 <!--section:summary-->
 
-<h1><mark>Minimal CSS Framework</mark> <small>for</small> Semantic HTML</h1>
+<h1><span class="mark-brand">Minimal CSS Framework</span> <small>for</small> Semantic HTML</h1>
 
 <big>Fully compatible and actively maintained successor to [Pico CSS](//blades.ninja/css/pico/).</big>
 
-Introduces [float labels](//blades.ninja/css/float-label/), [breakout container](//blades.ninja/css/breakout/) and other modern, opt-out helpers.
+Introduces [float labels](//blades.ninja/css/float-label/), [breakout container](//blades.ninja/css/breakout/) and other modern, opt-out [helpers](//blades.ninja/#docs).
 Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with other frameworks.
 
 <nav>
-  <a href="//blades.ninja/css/" role="button">Get started &nbsp;✨</a>
-  <span hidden>•</span>
+  <a href="//blades.ninja/css/" role="button">Get started <i>✨</i></a>
+  <b hidden>|</b>
   <a href="//blades.ninja/css/standalone/" role="button" class="outline">
-    Standalone <i class="fa-brands fa-tailwind-css"></i><i class="fa-brands fa-bootstrap"></i>
+    Standalone <i><i class="fa-brands fa-tailwind-css"></i><i class="fa-brands fa-bootstrap"></i></i>
   </a>
 </nav>
 
@@ -25,7 +25,7 @@ Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with oth
 
 ## Quick start
 
-<!--section:install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
+<!--section:install-all,install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
 
 <big>There are 4 ways to get started:</big>
 
@@ -37,77 +37,52 @@ Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with oth
 <link rel="stylesheet" href="css/blades.css" />
 ```
 
----
-
 ### <mark>B.</mark> Usage from CDN
 
 <!--prettier-ignore-->
 ```html
 <link rel="stylesheet" href="
-  https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.min.css
+  https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/blades.min.css
 "/>
 ```
 
 Live example: https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html
 
-Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/
-
----
-
-### <mark>C.</mark> Starter projects
-
-- https://subtle.blades.ninja/ 11ty micro-starter
-- https://start.11ty.blades.ninja/ 7-in-1 starter (including Tailwind)
-- https://getgrav.org/ v2 now features Blades CSS in its default theme (Quark2)
-- https://jekyll.blades.ninja/ starter <!--{.faded}-->
-
----
+Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/
 
-### <mark>D.</mark> Install with NPM
+### <mark>C.</mark> Install with NPM
 
 ```sh
 npm install @anyblades/blades
 ```
 
-You can use precompiled Pico+Blades CSS (same as CDN version):
+Then, `@import` Blades into your CSS file:
 
-<!--prettier-ignore-->
-```html
-<link rel="stylesheet" href="
-  node_modules/@anyblades/blades/css/blades.css
-" />
+```css
+@import "@anyblades/blades";
 ```
 
 <div><hr></div>
 
-Or import [standalone](//blades.ninja/css/standalone/) Blades CSS sources (without [Pico CSS](//blades.ninja/css/pico/)):
+Alternatively, import [standalone](//blades.ninja/css/standalone/) Blades CSS sources only (without underlying [Pico CSS](//blades.ninja/css/pico/) base styles):
 
 ```css
 @import "@anyblades/blades/standalone";
 ```
 
-Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-starters/blob/main/site-tailwind/styles.css
+Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-micro-starters/blob/main/tailwind/styles.css
 
-<div><hr></div>
-
-To install and import both Pico+Blades CSS sources at once:
+### <mark>D.</mark> Official starters
 
-```sh
-npm install @anyblades/pico @anyblades/blades
-```
-
-```css
-@import "@anyblades/pico";
-@import "@anyblades/blades/standalone";
-```
-
-This is exactly how *Bl*ades CSS is built itself: https://github.com/anyblades/blades/blob/main/src/blades.css
+- [11ty / Build Awesome Micro-Starter[s]](https://micro.build.blades.ninja/),
+  including the best [Content-First Starter](//content.build.blades.ninja/)
+- [Grav CMS v2](https://getgrav.org/migrate-to-2#:~:text=blades) uses Blades CSS by default
+  ([Quark2 theme](//github.com/getgrav/grav-theme-quark2#quark-2-theme:~:text=blades)
+  & [Devtools plugin](//github.com/getgrav/grav-plugin-devtools#theme-scaffolding:~:text=blades))
 
 ---
 
-### <sup style>Appendix</sup>
-
-#### Starter HTML template <!-- from index.html -->
+## Starter HTML template <!-- from /index.html -->
 
 ```html
 <!doctype html>
@@ -127,131 +102,117 @@ This is exactly how *Bl*ades CSS is built itself: https://github.com/anyblades/b
 </html>
 ```
 
-<!--section:install-->
-
-#### Standalone versions
-
-<!--section:install,standalone-->
+### Dynamic templates
 
-Most of internal Blades CSS modules are available as standalone helpers, giving you flexibility to use them with other CSS frameworks:
-
-| Module                                                                              | CDN                                                                            | Import from NPM                                                                 |
-| ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- |
-| [Breakout container](/css/breakout/)                                                | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/breakout.min.css          | N/A                                                                             |
-| [Link icon](/css/link-icon/)                                                        | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/link-icon.min.css         | N/A                                                                             |
-| [Responsive table](/css/responsive-table/)                                          | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/responsive-table.min.css  | N/A                                                                             |
-| [Float labels](/css/float-label/) <br> https://github.com/anyblades/float-label-css | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/float-label.min.css       | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/float-label";` |
-| [All above together](/css/standalone/)                                              | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.standalone.min.css | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/standalone";`  |
-| [Reset/normalizer](/css/pico/) <br> https://github.com/anyblades/pico               | https://cdn.jsdelivr.net/npm/@anyblades/pico@2/css/pico.min.css                | `npm install @anyblades/pico` <br> `@import "@anyblades/pico";`                 |
-| [Experimental "ninja" add-ons](/css/ninja/)                                         | https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.ninja.min.css      | `npm install @anyblades/blades` <br> `@import "@anyblades/blades/ninja";`       |
-
-Live examples:
-
-- https://www.mattanger.dev/ (Link icon via CDN)
+[Available for Nunjucks, Twig and Liquid ↗](https://blades.ninja/tpl/)<!--{role=button .outline}-->
 
 <!--section:gh-only-->
 
+---
+
 ## Documentation
 
 <!-- ToC as is from https://blades.ninja/#docs -->
 <ul class="columns">
-  
-  <li>
-    <strong><a href="/">Get started</a></strong>
-    <ul><li><a href="https://blades.ninja/css/">Quick start</a></li>
-<li><a href="https://blades.ninja/css/color-schemes/">Color schemes</a></li>
-<li><a href="https://blades.ninja/css/variables/">CSS variables</a></li>
-<li><a href="https://blades.ninja/css/standalone/">Standalone version <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/pico/">Pico fork <img src="https://img.shields.io/github/v/release/anyblades/pico?label=&amp;color=white"> <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/frameworks/">Frameworks</a></li></ul>
-  </li>
-  
-  <li>
-    <strong><a href="/css/layout/">Layout</a></strong>
-    <ul><li><a href="https://blades.ninja/css/container/">Container</a></li>
-<li><a href="https://blades.ninja/css/breakout/">Breakout container <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/landmarks-section/">Landmarks &amp; section</a></li>
-<li><a href="https://blades.ninja/css/grid/">Grid</a></li>
-<li><a href="https://blades.ninja/css/columns/">Text columns <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/overflow-auto/">Overflow auto</a></li></ul>
-  </li>
-  
-  <li>
-    <strong><a href="/css/content/">Content</a></strong>
-    <ul><li><a href="https://blades.ninja/css/typography/">Typography</a></li>
-<li><a href="https://blades.ninja/css/heading/">Heading helpers <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/link/">Link</a></li>
-<li><a href="https://blades.ninja/css/link-icon/">Link icon <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/button/">Button</a></li>
-<li><a href="https://blades.ninja/css/table/">Table <mark>UPD</mark></a></li>
-<li><a href="https://blades.ninja/css/responsive-table/">Responsive table <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/list/">List helpers <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/code/">Code formatting <mark>NEW</mark></a></li></ul>
-  </li>
-  
-  <li>
-    <strong><a href="/css/forms/">Forms</a></strong>
-    <ul><li><a href="https://blades.ninja/css/forms/">Overview</a></li>
-<li><a href="https://blades.ninja/css/input/">Input</a></li>
-<li><a href="https://blades.ninja/css/textarea/">Textarea</a></li>
-<li><a href="https://blades.ninja/css/select/">Select</a></li>
-<li><a href="https://blades.ninja/css/checkboxes/">Checkboxes</a></li>
-<li><a href="https://blades.ninja/css/radios/">Radios</a></li>
-<li><a href="https://blades.ninja/css/switch/">Switch</a></li>
-<li><a href="https://blades.ninja/css/range/">Range</a></li>
-<li><a href="https://blades.ninja/css/float-label/">Float labels <mark>NEW</mark></a></li></ul>
-  </li>
-  
-  <li>
-    <strong><a href="/css/components/">Components</a></strong>
-    <ul><li><a href="https://blades.ninja/css/accordion/">Accordion</a></li>
-<li><a href="https://blades.ninja/css/card/">Card</a></li>
-<li><a href="https://blades.ninja/css/dropdown/">Dropdown</a></li>
-<li><a href="https://blades.ninja/css/group/">Group</a></li>
-<li><a href="https://blades.ninja/css/loading/">Loading</a></li>
-<li><a href="https://blades.ninja/css/modal/">Modal</a></li>
-<li><a href="https://blades.ninja/css/navigation/">Navigation</a></li>
-<li><a href="https://blades.ninja/css/progress/">Progress</a></li>
-<li><a href="https://blades.ninja/css/tooltip/">Tooltip</a></li>
-<li><a href="https://blades.ninja/css/jump/">Jump to... <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/css/utils/">Utilities <mark>NEW</mark></a></li></ul>
-  </li>
-  
-  <li>
-    <strong><a href="/html/">Templates <mark>NEW</mark></a></strong>
-    <ul><li><a href="https://blades.ninja/html/">Overview</a></li>
-<li><a href="https://blades.ninja/html/starter/">HTML starter <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/html/links/">Links <mark>NEW</mark></a></li>
-<li><a href="https://blades.ninja/html/sitemap/">Sitemap <mark>NEW</mark></a></li></ul>
-  </li>
-  
+
+<li>
+<strong><a href="//blades.ninja/css/">Get started</a></strong>
+<ul><li><a href="//blades.ninja/css/">Quick start</a></li>
+<li><a href="//blades.ninja/css/color-schemes/">Dark scheme</a></li>
+<li><a href="//blades.ninja/css/variables/">CSS variables</a></li>
+<li><a href="//blades.ninja/css/conditional/">Conditional styling <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/css/standalone/">Standalone version <mark>NEW</mark></a></li></ul>
+</li>
+
+<li>
+<strong><a href="//blades.ninja/css/layout/">Layout</a></strong>
+<ul><li><a href="//blades.ninja/css/landmarks-section/">Landmarks &amp; section</a></li>
+<li><a href="//blades.ninja/css/container/">Container</a></li>
+<li><a href="//blades.ninja/css/breakout/">Breakout container <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/css/grid/">Grid</a></li>
+<li><a href="//blades.ninja/css/columns/">Text columns <mark>NEW</mark></a></li></ul>
+</li>
+
+<li>
+<strong><a href="//blades.ninja/css/content/">Content</a></strong>
+<ul><li><a href="//blades.ninja/css/typography/">Typography <mark>UPD</mark></a></li>
+<li><a href="//blades.ninja/css/link/">Link</a></li>
+<li><a href="//blades.ninja/css/button/">Button</a></li>
+<li><a href="//blades.ninja/css/icon/"><code style="padding: 0">‹i›</code>con helper <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/css/list/">List <mark>UPD</mark></a></li>
+<li><a href="//blades.ninja/css/table/">Table <mark>UPD</mark></a></li>
+<li><a href="//blades.ninja/css/responsive-table/">Responsive table <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/css/code/">Code blocks <mark>NEW</mark></a></li></ul>
+</li>
+
+<li>
+<strong><a href="//blades.ninja/css/forms/">Forms</a></strong>
+<ul><li><a href="//blades.ninja/css/forms/">Overview</a></li>
+<li><a href="//blades.ninja/css/input/">Input</a></li>
+<li><a href="//blades.ninja/css/textarea/">Textarea</a></li>
+<li><a href="//blades.ninja/css/select/">Select</a></li>
+<li><a href="//blades.ninja/css/checkboxes/">Checkboxes</a></li>
+<li><a href="//blades.ninja/css/radios/">Radios</a></li>
+<li><a href="//blades.ninja/css/switch/">Switch</a></li>
+<li><a href="//blades.ninja/css/range/">Range</a></li>
+<li><a href="//blades.ninja/css/float-label/">Float labels <mark>NEW</mark></a></li></ul>
+</li>
+
+<li>
+<strong><a href="//blades.ninja/css/components/">Components</a></strong>
+<ul><li><a href="//blades.ninja/css/accordion/">Accordion</a></li>
+<li><a href="//blades.ninja/css/card/">Card</a></li>
+<li><a href="//blades.ninja/css/dropdown/">Dropdown</a></li>
+<li><a href="//blades.ninja/css/group/">Group</a></li>
+<li><a href="//blades.ninja/css/loading/">Loading</a></li>
+<li><a href="//blades.ninja/css/modal/">Modal</a></li>
+<li><a href="//blades.ninja/css/nav/">Navigation</a></li>
+<li><a href="//blades.ninja/css/progress/">Progress</a></li>
+<li><a href="//blades.ninja/css/tooltip/">Tooltip</a></li>
+<li><a href="//blades.ninja/css/timeline/">Timeline <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/css/jump/">Jump to... <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/css/utils/">Utilities <mark>NEW</mark></a></li></ul>
+</li>
+
+<li>
+<strong><a href="//blades.ninja/more/">More</a></strong>
+<ul><li><a href="//blades.ninja/css/pico/">Pico CSS <mark>NEW</mark> <sub style="">(underlying fork)</sub></a></li>
+<li><a href="//blades.ninja/css/ninja/">Ninja CSS <mark>NEW</mark> <sub style="">(experimental add-ons)</sub></a></li>
+<li><a href="//blades.ninja/html/">Dynamic templates <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/html/base/">Base HTML <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/html/links/">Links snippet <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/html/sitemap/">Sitemap XML <mark>NEW</mark></a></li>
+<li><a href="//blades.ninja/css/frameworks/">CSS frameworks <mark>2026–2040</mark></a></li></ul>
+</li>
+
 </ul>
 
 ---
 
-## <sup style>Trusted by</sup><!--DRY with featured-->
+## <sup style>Trusted by</sup><!-- DRY with featured -->
 
-- https://github.com/pallets/website 🐍
+- <b hidden>🐍</b> [Flask & Jinja community website](https://palletsprojects.com/)
 
 <!--section:info-->
 
-## <sup style>Featured by</sup><!--Z-A-->
+## <sup style>Featured by</sup>
 
-- [sveltiacms.app](https://sveltiacms.app/en/docs/start#:~:text=anyblades)
-- [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades) [↗](https://github.com/getgrav/grav-theme-quark2)
-- [dummy.my/frameworks](https://dummy.my/frameworks/)
-- [awesome-css-frameworks _@gabrielizalo_](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
-- [awesome-css _@uhub_](https://github.com/uhub/awesome-css)
-- [11ty.dev](https://www.11ty.dev/docs/starter/#:~:text=blades) [↗](https://www.11ty.dev/docs/plugins/community/#:~:text=blades)
+- [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades)
+- [@11ty/buildawesome](https://bsky.app/profile/11ty.dev/post/3mp75r53ccv2b) [↗](https://mastodon.social/@11ty@neighborhood.11ty.dev/116816881367741413)
+- [sveltiacms.app](https://sveltiacms.app/en/docs/start#:~:text=anyblades) <!--Z-A-->
+- [libhunt.com](https://www.libhunt.com/r/blades)
+- [context7.com](https://context7.com/anyblades/blades)
+- [awesome-css](https://github.com/uhub/awesome-css)
+- [awesome-css-frameworks](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
 - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
-- [@johnheenan](https://github.com/johnheenan/minform#css-and-performance)
-- [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w) [↗](https://www.instagram.com/reel/DXOSTpajG4f/)
+- [@cantdutchthis](https://news.ycombinator.com/item?id=48729467)
 
 <!--{.markerless .columns}-->
+<!--[hostfurl.com, @johnheenan]-->
 
 ## <sup style>Credits</sup>
 
 - https://picocss.com/ for [inspiration](//blades.ninja/css/pico/)
-- https://11ty.dev/ for [site generation](//github.com/anyblades/blades.ninja)
+- https://11ty.dev/ for site generation
 
 <!--{.markerless}-->

package/_includes/blades/html.njk

@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
 
-    <title>{{ title | striptags }}{{ ' | ' if title and site.title }}{{ site.title }}</title>
+    <title>{{ title | striptags | replace('&nbsp;', ' ') }}{{ ' | ' if title and site.title }}{{ site.title }}</title>
     <meta name="description" content="{{ description | striptags }}" />
 
     <link rel="icon" href="{{ site.favicon | d('/favicon.ico') }}" />

package/_includes/blades/html.twig

@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
 
-    <title>{{ title|striptags }}{% if title and site.title %} | {% endif %}{{ site.title }}</title>
+    <title>{{ title|striptags|replace({'&nbsp;': ' '}) }}{% if title and site.title %} | {% endif %}{{ site.title }}</title>
     <meta name="description" content="{{ description|striptags }}" />
 
     <link rel="icon" href="{{ site.favicon|default('/favicon.ico') }}" />

package/context7.json

@@ -0,0 +1,4 @@
+{
+  "url": "https://context7.com/anyblades/blades",
+  "public_key": "pk_iGKim5py4l0VObTBgcQvF"
+}