@anyblades/blades 3.1.0-beta.5 → 3.1.0-beta.7

package/.prettierrc.json

@@ -1,18 +1,11 @@
 {
   "printWidth": 120,
-  "plugins": ["prettier-plugin-jinja-template"],
   "overrides": [
     {
       "files": "*.css",
       "options": {
         "printWidth": 100
       }
-    },
-    {
-      "files": ["*.njk", "*.html"],
-      "options": {
-        "parser": "jinja-template"
-      }
     }
   ]
 }

package/README.md

@@ -1,16 +1,18 @@
 # blades<sup>✨</sup>
 
-![][V] ![][NEXT_V] ![][LIC] [![][X]][X_URL] [![][B]][B_URL] [![][M]][M_URL]
+![][V] ![][NEXT_V] ![][LIC] [![][X]][X_URL] [![][B]][B_URL] [![][M]][M_URL] [![][D]][D_URL]
 
 [V]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=brightgreen
 [NEXT_V]: https://img.shields.io/github/v/release/anyblades/blades?include_prereleases&label=next&color=blue
 [LIC]: https://img.shields.io/badge/license-MIT-blue
-[X]: https://img.shields.io/twitter/follow/BladesCSS?label=Twitter
+[X]:  https://img.shields.io/badge/82-white?logo=x&style=social
 [X_URL]: https://x.com/BladesCSS
 [B]: https://img.shields.io/bluesky/followers/blades.dev?label=
 [B_URL]: https://bsky.app/profile/blades.dev
 [M]: https://img.shields.io/mastodon/follow/117487235444867518?label=NEW
 [M_URL]: https://mastodon.social/@BladesCSS
+[D]: https://img.shields.io/badge/%23blades-white?logo=discord&style=social
+[D_URL]: https://discord.gg/mg8f26C
 
 <!--section:summary-->
 
@@ -18,7 +20,7 @@
 
 <big>Blades CSS is a modern drop&#8209;in successor to [Pico CSS](//picocss.com/docs/maintenance).</big>
 
-Just switch `pico.css` to `blades.css` — and voilà!
+Just switch `pico.css` to `blades.css`— and voilà!
 
 <nav>
   <a href="//blades.dev/css/" role="button">Get started</a>
@@ -57,7 +59,7 @@ Live example: https://github.com/pallets/website/blob/main/src/pallets/templates
 
 Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/
 
-`blades.layered.min.css` is Blades wrapped in `@layer blades { }`, so any unlayered styles of yours win over it without specificity fights. Note that inside a layer Blades' own `!important` declarations (form validation, reduced motion) beat your unlayered `!important`, and your `@keyframes` of the same name as Blades' win regardless of load order. When you can use `@import`, `@import url("…/blades.min.css") layer(blades);` does the same without this file.
+`layered/blades.layered.min.css` is Blades wrapped in `@layer blades { }`. See [Layered modules](//blades.dev/css/layered/).
 
 ### <mark>C.</mark> Install with NPM
 
@@ -65,7 +67,7 @@ Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades
 npm install @anyblades/blades
 ```
 
-Then, `@import` sources into your CSS file:
+Then, `@import` the built `css/blades.css` into your CSS file:
 
 ```css
 @import "@anyblades/blades";
@@ -83,53 +85,21 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
 
 <div><hr></div>
 
-Or import only the [Pico CSS](//blades.ninja/css/pico/) parts you need, e.g. per page or per component:
+Or import only the parts you need, e.g. per page or per component. They come wrapped in `@layer blades`, so your unlayered styles win over them:
 
 ```css
-@import "@anyblades/blades/pico/variables";
-@import "@anyblades/blades/pico/layout/document";
-@import "@anyblades/blades/pico/content/typography";
-@import "@anyblades/blades/pico/components/card";
-@import "@anyblades/blades/pico/components/modal";
+@import "@anyblades/blades/variables";
+@import "@anyblades/blades/layout/document";
+@import "@anyblades/blades/content/typography";
+@import "@anyblades/blades/components/card";
+@import "@anyblades/blades/components/modal";
 ```
 
 - `variables` and `layout/document` are the minimum; keep the same order as [`src/pico/_index.css`](https://github.com/anyblades/blades/blob/main/src/pico/_index.css) (variables → layout → content → forms → components → utilities).
 - `layout` doesn't pad `body > header/main/footer`. Add `layout/landmarks` for Pico's behaviour.
 - Some parts build on others, e.g. `components/modal` expects `components/card`, and `components/group` and `components/dropdown` expect `forms/basics` and `content/button`.
-- Available parts are the files under [`src/pico/`](https://github.com/anyblades/blades/tree/main/src/pico): `layout/*`, `content/*`, `forms/*`, `components/*` (or a whole category, e.g. `@anyblades/blades/pico/components`) and `utilities`.
-
-#### With bundlers and component frameworks (SvelteKit, Next.js, Nuxt, Astro, …)
-
-Import the parts from JavaScript, i.e. the root layout and the components that use them, rather than with `@import` inside a component's `<style>` block. Use the layered parts, `@anyblades/blades/layered/*`: they are the same parts wrapped in `@layer blades`, which a JS `import` can't add by itself.
-
-```js
-// root layout, once: the base and every part that others build on
-import "@anyblades/blades/layered/variables";
-import "@anyblades/blades/layered/layout/document";
-import "@anyblades/blades/layered/content/typography";
-import "@anyblades/blades/layered/content/button";
-import "@anyblades/blades/layered/forms/basics";
-
-// in the component that renders a <dialog>
-import "@anyblades/blades/layered/components/card";
-import "@anyblades/blades/layered/components/modal";
-```
-
-```html
-<style>
-  /* unlayered, so it wins over Blades whatever the specificity (except Blades' !important) */
-  article {
-    max-width: 40rem;
-  }
-</style>
-```
-
-- Bundlers dedupe JS-side CSS imports and split them per route, so each part is downloaded and cached once and only where it's used.
-- Two layered `components/*` parts also carry Blades' own additions, as in `blades.css`: `components/modal` includes the CSS-only open animation for `showModal()`, and `components/dropdown-popover` styles `<ul popover>` / `<menu popover>` menus opened by a button.
-- Override in your component's `<style>` or `app.css`, or set `--pico-*` variables on `:root` or on an element. Unlayered CSS always wins over `@layer blades`. The usual layer caveats apply: Blades' own `!important` declarations beat yours, and if you use other layered CSS, declare the order once, before anything else is loaded. For Tailwind v4 that is `@layer theme, base, blades, components, utilities;` at the top of the CSS file you import first (before `@import "tailwindcss"`), and that file has to be imported before any `layered/*` part, because the first `@layer` the browser sees fixes the order.
-- Parts don't `@import` the parts they build on (e.g. `components/modal` expects `components/card`, `components/group` and `components/dropdown` expect `content/button` and `forms/basics`, `components/dropdown-popover` expects `components/dropdown`, and the `forms/*` extras expect `forms/basics`). If they did, every route chunk would carry its own copy. Import those shared parts once, at the root or next to the part that needs them; bundlers dedupe the imports.
-- An `@import` inside a scoped `<style>` (Svelte, Astro, Vue `scoped`) is processed as that component's own styles. The rules get scoped to the component's markup (Svelte also prunes the unused ones) and are duplicated in every component that imports them.
-- Landmark padding: `pico.css` and `blades.ninja.css` pad `body > header`, `body > main` and `body > footer` like Pico, which doesn't match when the framework wraps the page in an element (SvelteKit's `<div style="display: contents">`, Next.js pages router `#__next`, Nuxt `#__nuxt`, a SPA's `#root` / `#app`). `blades.css` doesn't pad them; with per-part imports, add `layout/landmarks` (or `layered/layout/landmarks`) for Pico's `body >` padding.
+- See [Layered modules](//blades.dev/css/layered/) for the available parts, and for importing them from JavaScript in bundlers and component frameworks (SvelteKit, Next.js, Nuxt, Astro, …).
+- The same parts without the layer are under `@anyblades/blades/src/…`, e.g. `@anyblades/blades/src/components/card`, to put them in a layer of your own (`@import "@anyblades/blades/src/components/card" layer(ui);`) or to run your own build. `@anyblades/blades/src` on its own is the source of the whole `blades.css`.
 
 ### <mark>D.</mark> Official starters
 
@@ -195,8 +165,8 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
 - **Where it ships:**
   - included in `blades.css`
   - also in `blades.layered.css`
-  - with per-part imports, add `@import "@anyblades/blades/compact";` after the other parts, or `import "@anyblades/blades/layered/compact";` with the layered parts
-  - with `pico.conditional.css`, add `@anyblades/blades/compact` after it
+  - with per-part imports, add `@anyblades/blades/compact` after the other parts
+  - with `pico.conditional.css`, add `@anyblades/blades/src/compact` after it
 - **What changes:**
   - smaller control padding and 1.5rem block spacing
   - a 0.5rem radius and a 3px focus ring
@@ -210,6 +180,8 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
 
 ## Documentation
 
+Blades CSS is a lightweight, minimal CSS framework for semantic HTML designed as a modern, drop-in successor to Pico CSS.
+
 <!-- ToC as is from https://blades.ninja/#docs -->
 <ul class="columns">
 
@@ -218,6 +190,7 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
 <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/layered/">Layered modules <mark>NEW</mark></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>
@@ -287,18 +260,21 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
 
 ---
 
+<!--section:info-->
+
 ## <sup style>Trusted by</sup>
 
 - 🐍 [Flask & Jinja](https://palletsprojects.com/) community website
-- 🪐 [Grav CMS v2](https://getgrav.org/migrate-to-2#:~:text=blades) default theme [↗](https://www.followthatcar.com/)
+- 🪐 [Grav CMS v2](https://getgrav.org/migrate-to-2#:~:text=blades) default theme
 
 <!--https://pulsar-wildlife.club/-->
 
-<!--section:info-->
+## <sup style>Also used by</sup>
+
+- https://www.followthatcar.com/
 
 ## <sup style>Featured by</sup> <!-- [1] big projects [2] awesome [3] smaller projects [4] blogs/social -->
 
-- [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades)
 - https://usehadron.dev/
 - [@11ty/buildawesome](https://bsky.app/profile/11ty.dev/post/3mp75r53ccv2b) [↗](https://mastodon.social/@11ty@neighborhood.11ty.dev/116816881367741413)
 - [<i class="fa-brands fa-build-awesome mark-brand"></i> buildawesome.one](https://buildawesome.one/#:~:text=blades)
@@ -307,6 +283,7 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
 - [/gabrielizalo/awesome-css-frameworks](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
 - https://github.com/eggplantpasta/greenroom
 - [/adamdjbrett/11ty-wisp](https://github.com/adamdjbrett/11ty-wisp#features:~:text=blades) [↗](https://github.com/adamdjbrett/000000076#:~:text=blades)
+- https://knives.ajitpanigrahi.com/
 - [doany.io](https://doany.io/en/posts/svelte-bun-sqlite/#on-biome-and-css:~:text=anyblades)
 - [@box464](https://mastodon.social/@box464/117442493473921346)
 - [@draupnerdata](https://www.youtube.com/watch?v=yDjArj9HSjs&t=180s)

package/_includes/.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-jinja-template"],
+  "overrides": [
+    {
+      "files": ["*.njk", "*.html"],
+      "options": {
+        "parser": "jinja-template"
+      }
+    }
+  ]
+}

package/_includes/package.json

@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "scripts": {
+    "lint": "prettier --write 'blades/*.njk'"
+  },
+  "devDependencies": {
+    "prettier": "^3.5.3",
+    "prettier-plugin-jinja-template": "^2.1.0"
+  }
+}