@anyblades/blades 3.1.0-beta.7 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/README.md +173 -140
  2. package/css/blades.css +6 -6
  3. package/css/blades.min.css +6 -6
  4. package/css/blades.ninja.css +6 -6
  5. package/css/blades.ninja.min.css +6 -6
  6. package/css/float-label.css +1 -1
  7. package/css/float-label.min.css +1 -1
  8. package/css/layered/README.md +164 -0
  9. package/css/layered/_compact.css +30 -0
  10. package/css/layered/_utilities.css +23 -0
  11. package/css/layered/_variables-blades.css +8 -0
  12. package/css/layered/_variables.css +258 -0
  13. package/css/layered/blades.layered.css +6 -6
  14. package/css/layered/blades.layered.min.css +6 -6
  15. package/css/layered/components/_accordion.css +93 -0
  16. package/css/layered/components/_card.css +37 -0
  17. package/css/layered/components/_dropdown-popover.css +89 -0
  18. package/css/layered/components/_dropdown.css +188 -0
  19. package/css/layered/components/_group.css +89 -0
  20. package/css/layered/components/_index.css +950 -0
  21. package/css/layered/components/_loading.css +51 -0
  22. package/css/layered/components/_modal-modern.css +17 -0
  23. package/css/layered/components/_modal.css +144 -0
  24. package/css/layered/components/_nav.css +114 -0
  25. package/css/layered/components/_progress.css +68 -0
  26. package/css/layered/components/_timeline.css +7 -0
  27. package/css/layered/components/_tooltip.css +158 -0
  28. package/css/layered/content/_button.css +125 -0
  29. package/css/layered/content/_code-block.css +17 -0
  30. package/css/layered/content/_code.css +46 -0
  31. package/css/layered/content/_embedded-content.css +33 -0
  32. package/css/layered/content/_figure.css +10 -0
  33. package/css/layered/content/_icon.css +30 -0
  34. package/css/layered/content/_index.css +456 -0
  35. package/css/layered/content/_link.css +59 -0
  36. package/css/layered/content/_misc.css +15 -0
  37. package/css/layered/content/_table.css +24 -0
  38. package/css/layered/content/_typography.css +137 -0
  39. package/css/layered/forms/_basics.css +257 -0
  40. package/css/layered/forms/_checkbox-radio-switch.css +132 -0
  41. package/css/layered/forms/_index.css +617 -0
  42. package/css/layered/forms/_input-color.css +17 -0
  43. package/css/layered/forms/_input-datetime.css +37 -0
  44. package/css/layered/forms/_input-file.css +25 -0
  45. package/css/layered/forms/_input-range.css +111 -0
  46. package/css/layered/forms/_input-search.css +32 -0
  47. package/css/layered/forms/float-label/_core.css +28 -0
  48. package/css/layered/forms/float-label/_index.css +54 -0
  49. package/css/layered/forms/float-label/_theme.css +25 -0
  50. package/css/layered/forms/float-label/core.css +1 -1
  51. package/css/layered/forms/float-label.css +1 -1
  52. package/css/layered/layout/_columns.css +7 -0
  53. package/css/layered/layout/_container.css +39 -0
  54. package/css/layered/layout/_document.css +37 -0
  55. package/css/layered/layout/_grid.css +17 -0
  56. package/css/layered/layout/_index.css +103 -0
  57. package/css/layered/layout/_landmarks.css +3 -0
  58. package/css/layered/layout/_overflow-auto.css +3 -0
  59. package/css/layered/layout/_section.css +3 -0
  60. package/css/pico.canonical.css +2512 -0
  61. package/css/pico.canonical.min.css +1 -0
  62. package/css/pico.canonical.unmin.css +2512 -0
  63. package/css/pico.canonical.unmin.min.css +1 -0
  64. package/css/pico.conditional.css +2 -2
  65. package/css/pico.conditional.min.css +2 -2
  66. package/css/pico.css +2 -2
  67. package/css/pico.min.css +2 -2
  68. package/css/pico.unmin.css +2365 -0
  69. package/css/pico.unmin.min.css +7 -0
  70. package/package.json +12 -9
  71. package/src/blades/_index.css +1 -1
  72. package/src/blades/forms/float-label/_core.css +1 -1
  73. package/src/blades.css +2 -2
  74. package/src/pico/_index.css +2 -2
package/README.md CHANGED
@@ -3,9 +3,9 @@
3
3
  ![][V] ![][NEXT_V] ![][LIC] [![][X]][X_URL] [![][B]][B_URL] [![][M]][M_URL] [![][D]][D_URL]
4
4
 
5
5
  [V]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=brightgreen
6
- [NEXT_V]: https://img.shields.io/github/v/release/anyblades/blades?include_prereleases&label=next&color=blue
7
- [LIC]: https://img.shields.io/badge/license-MIT-blue
8
- [X]: https://img.shields.io/badge/82-white?logo=x&style=social
6
+ [NEXT_V]: https://img.shields.io/github/v/release/anyblades/blades?include_prereleases&label=^&labelColor=blue&color=blue
7
+ [LIC]: https://img.shields.io/badge/🄻_MIT-gray
8
+ [X]: https://img.shields.io/badge/83-white?logo=x&style=social
9
9
  [X_URL]: https://x.com/BladesCSS
10
10
  [B]: https://img.shields.io/bluesky/followers/blades.dev?label=
11
11
  [B_URL]: https://bsky.app/profile/blades.dev
@@ -14,6 +14,8 @@
14
14
  [D]: https://img.shields.io/badge/%23blades-white?logo=discord&style=social
15
15
  [D_URL]: https://discord.gg/mg8f26C
16
16
 
17
+ ![](https://trendshift.io/api/badge/trendshift/repositories/154122/daily?language=CSS)
18
+
17
19
  <!--section:summary-->
18
20
 
19
21
  <h1><span class="mark-brand">Minimal CSS Framework</span> <small>for</small> Semantic HTML</h1>
@@ -23,7 +25,7 @@
23
25
  Just switch `pico.css` to `blades.css`— and voilà!
24
26
 
25
27
  <nav>
26
- <a href="//blades.dev/css/" role="button">Get started</a>
28
+ <a href="//blades.dev/css/" role="button">Get started ›</a>
27
29
  <b hidden>&nbsp;•&nbsp;</b>
28
30
  <a href="//blades.dev/css/pico/" role="button" class="outline">Inspired by Pico ✨</a>
29
31
  </nav>
@@ -34,7 +36,7 @@ Just switch `pico.css` to `blades.css`— and voilà!
34
36
 
35
37
  ## Quick start
36
38
 
37
- <!--section:install-all,install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
39
+ <!--section:install-all,install-->
38
40
 
39
41
  <big>There are 4 ways to get started:</big>
40
42
 
@@ -59,33 +61,19 @@ Live example: https://github.com/pallets/website/blob/main/src/pallets/templates
59
61
 
60
62
  Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/
61
63
 
62
- `layered/blades.layered.min.css` is Blades wrapped in `@layer blades { }`. See [Layered modules](//blades.dev/css/layered/).
63
-
64
64
  ### <mark>C.</mark> Install with NPM
65
65
 
66
66
  ```sh
67
67
  npm install @anyblades/blades
68
68
  ```
69
69
 
70
- Then, `@import` the built `css/blades.css` into your CSS file:
70
+ Then, `@import` Blades into your CSS file:
71
71
 
72
72
  ```css
73
73
  @import "@anyblades/blades";
74
74
  ```
75
75
 
76
- <div><hr></div>
77
-
78
- Alternatively, import [standalone](//blades.ninja/css/standalone/) Blades CSS sources only (without underlying [Pico CSS](//blades.ninja/css/pico/) base styles):
79
-
80
- ```css
81
- @import "@anyblades/blades/standalone";
82
- ```
83
-
84
- Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-micro-starters/blob/main/tailwind/styles.css
85
-
86
- <div><hr></div>
87
-
88
- 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:
76
+ Alternatively, 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:
89
77
 
90
78
  ```css
91
79
  @import "@anyblades/blades/variables";
@@ -95,11 +83,10 @@ Or import only the parts you need, e.g. per page or per component. They come wra
95
83
  @import "@anyblades/blades/components/modal";
96
84
  ```
97
85
 
98
- - `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).
99
- - `layout` doesn't pad `body > header/main/footer`. Add `layout/landmarks` for Pico's behaviour.
86
+ - `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).
100
87
  - Some parts build on others, e.g. `components/modal` expects `components/card`, and `components/group` and `components/dropdown` expect `forms/basics` and `content/button`.
101
88
  - 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, …).
102
- - 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`.
89
+ - See [package.json](https://github.com/anyblades/blades/blob/main/package.json) for a list of all exported parts.
103
90
 
104
91
  ### <mark>D.</mark> Official starters
105
92
 
@@ -130,17 +117,94 @@ Or import only the parts you need, e.g. per page or per component. They come wra
130
117
  </html>
131
118
  ```
132
119
 
133
- ### Dynamic templates
134
-
135
- [Available for Nunjucks, Liquid and Twig ↗](https://blades.ninja/tpl/)<!--{role=button .outline}-->
120
+ Using Nunjucks, Twig or Liquid? Check out the built-in [Base HTML templates](//blades.dev/tpl/html/) for each engine, ready to be used in your project.
136
121
 
137
122
  <!--section:gh-only-->
138
123
 
139
124
  ---
140
125
 
141
- ## Dark mode without a flash
126
+ ## Documentation
127
+
128
+ If you know Pico — you already know Blades:
129
+
130
+ <!-- ToC as is from https://blades.dev/#docs -->
131
+ <ul class="columns">
132
+
133
+ <li>
134
+ <strong><a href="//blades.dev/css/">Get started</a></strong>
135
+ <ul><li><a href="//blades.dev/css/">Quick start</a></li>
136
+ <li><a href="//blades.dev/css/color-schemes/">Dark scheme</a></li>
137
+ <li><a href="//blades.dev/css/variables/">CSS variables</a></li>
138
+ <li><a href="//blades.dev/css/compact/">Compact version <mark>NEW</mark></a></li>
139
+ <li><a href="//blades.dev/css/layered/">Layered modules <mark>NEW</mark></a></li>
140
+ <li><a href="//blades.dev/css/pico/">Inspired by Pico ✨</a></li>
141
+ <li><a href="//blades.dev/css/conditional/">Conditional styling</a></li></ul>
142
+ </li>
143
+
144
+ <li>
145
+ <strong><a href="//blades.dev/css/layout/">Layout</a></strong>
146
+ <ul><li><a href="//blades.dev/css/landmarks-section/">Landmarks &amp; section</a></li>
147
+ <li><a href="//blades.dev/css/container/">Container</a></li>
148
+ <li><a href="//blades.dev/css/grid/">Grid</a></li>
149
+ <li><a href="//blades.dev/css/columns/">Text columns <mark>NEW</mark></a></li>
150
+ <li><a href="//blades.dev/css/utils/#overflow-auto">Overflow auto</a></li></ul>
151
+ </li>
152
+
153
+ <li>
154
+ <strong><a href="//blades.dev/css/content/">Content</a></strong>
155
+ <ul><li><a href="//blades.dev/css/typography/">Typography</a></li>
156
+ <li><a href="//blades.dev/css/link/">Link</a></li>
157
+ <li><a href="//blades.dev/css/icon/">Icon <mark>NEW</mark></a></li>
158
+ <li><a href="//blades.dev/css/button/">Button</a></li>
159
+ <li><a href="//blades.dev/css/table/">Table</a></li>
160
+ <li><a href="//blades.dev/css/code/">Code blocks <mark>NEW</mark></a></li></ul>
161
+ </li>
162
+
163
+ <li>
164
+ <strong><a href="//blades.dev/css/forms/">Forms</a></strong>
165
+ <ul><li><a href="//blades.dev/css/forms/">Overview</a></li>
166
+ <li><a href="//blades.dev/css/input/">Input</a></li>
167
+ <li><a href="//blades.dev/css/textarea/">Textarea</a></li>
168
+ <li><a href="//blades.dev/css/select/">Select</a></li>
169
+ <li><a href="//blades.dev/css/checkboxes/">Checkboxes</a></li>
170
+ <li><a href="//blades.dev/css/radios/">Radios</a></li>
171
+ <li><a href="//blades.dev/css/switch/">Switch</a></li>
172
+ <li><a href="//blades.dev/css/range/">Range</a></li>
173
+ <li><a href="//blades.dev/css/float-label/">Float labels <mark>NEW</mark></a></li></ul>
174
+ </li>
175
+
176
+ <li>
177
+ <strong><a href="//blades.dev/css/components/">Components</a></strong>
178
+ <ul><li><a href="//blades.dev/css/accordion/">Accordion</a></li>
179
+ <li><a href="//blades.dev/css/card/">Card</a></li>
180
+ <li><a href="//blades.dev/css/dropdown/">Dropdown <mark>UPD</mark></a></li>
181
+ <li><a href="//blades.dev/css/group/">Group</a></li>
182
+ <li><a href="//blades.dev/css/loading/">Loading</a></li>
183
+ <li><a href="//blades.dev/css/modal/">Modal <mark>UPD</mark></a></li>
184
+ <li><a href="//blades.dev/css/nav/">Navigation</a></li>
185
+ <li><a href="//blades.dev/css/progress/">Progress</a></li>
186
+ <li><a href="//blades.dev/css/tooltip/">Tooltip</a></li>
187
+ <li><a href="//blades.dev/css/timeline/">Timeline <mark>NEW</mark></a></li>
188
+ <li><a href="//blades.dev/css/utils/">Utilities</a></li></ul>
189
+ </li>
190
+
191
+ <li>
192
+ <strong><a href="//blades.dev/more/">More</a></strong>
193
+ <ul><li><a href="//blades.dev/tpl/">Dynamic templates <mark>NEW</mark></a></li>
194
+ <li><a href="//blades.dev/tpl/html/">Base HTML <mark>NEW</mark></a></li>
195
+ <li><a href="//blades.dev/tpl/sitemap/">Sitemap XML <mark>NEW</mark></a></li>
196
+ <li><a href="//blades.dev/css/ninja/">Ninja CSS <mark>NEW</mark> <sub style="">(experimental add-ons)</sub></a></li>
197
+ <li><a href="//blades.dev/css/frameworks/">CSS frameworks <mark>2026–2040</mark></a></li>
198
+ <li><a href="//buildawesome.one/">11ty / Build Awesome kit ↗</a></li></ul>
199
+ </li>
200
+
201
+ </ul>
202
+
203
+ <!--section:dark-mode-->
204
+
205
+ ### Dark mode without a flash
142
206
 
143
- With the Pico-based builds, Blades follows the OS setting by default, with no JavaScript and no flash (see [Dark scheme](//blades.ninja/css/color-schemes/)). To force a theme, set `data-theme="light"` or `"dark"` on `<html>`. On a nested element it works when the element paints its own background, such as `<article>`; otherwise add `background-color: var(--pico-background-color); color: var(--pico-color);`.
207
+ With the Pico-based builds, Blades follows the OS setting by default, with no JavaScript and no flash (see [Dark scheme](//blades.dev/css/color-schemes/)). To force a theme, set `data-theme="light"` or `"dark"` on `<html>`. On a nested element it works when the element paints its own background, such as `<article>`; otherwise add `background-color: var(--pico-background-color); color: var(--pico-color);`.
144
208
 
145
209
  If you persist the user's choice, e.g. under the `localStorage` key `theme`, set the attribute **before the first paint** with a small inline script in `<head>`, e.g. in SvelteKit's `src/app.html`:
146
210
 
@@ -156,9 +220,11 @@ If you persist the user's choice, e.g. under the `localStorage` key `theme`, set
156
220
  - Setting it later, e.g. in `onMount` or `useEffect`, renders the OS theme first and then switches.
157
221
  - In a Next.js App Router layout, pass the same code as a template literal, ``<script dangerouslySetInnerHTML={{ __html: `try { … } catch {}` }} />``, and add `suppressHydrationWarning` to `<html>`, because the attribute changes before hydration.
158
222
 
159
- ---
223
+ <!--section:gh-only-->
224
+
225
+ ### Compact sizing (opt-in)
160
226
 
161
- ## Compact sizing (opt-in)
227
+ <!--section:compact-->
162
228
 
163
229
  Add `<html data-compact>` for the whole page, or put the attribute on a single element, e.g. `<form data-compact>` for one form. Without the attribute nothing changes.
164
230
 
@@ -176,123 +242,90 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
176
242
  - **Root font size:** on `<html>`, it also keeps the root font size at 100% instead of growing with the viewport. At 1280px wide, controls are then 38px instead of 62px. On a single element they are about 48px, because everything is sized in `rem` and the root stays as it is.
177
243
  - **Field text size:** form controls stay at 16px, because below that iOS Safari zooms in on focus.
178
244
 
179
- ---
180
-
181
- ## Documentation
182
-
183
- Blades CSS is a lightweight, minimal CSS framework for semantic HTML designed as a modern, drop-in successor to Pico CSS.
184
-
185
- <!-- ToC as is from https://blades.ninja/#docs -->
186
- <ul class="columns">
187
-
188
- <li>
189
- <strong><a href="//blades.ninja/css/">Get started</a></strong>
190
- <ul><li><a href="//blades.ninja/css/">Quick start</a></li>
191
- <li><a href="//blades.ninja/css/color-schemes/">Dark scheme</a></li>
192
- <li><a href="//blades.ninja/css/variables/">CSS variables</a></li>
193
- <li><a href="//blades.ninja/css/layered/">Layered modules <mark>NEW</mark></a></li>
194
- <li><a href="//blades.ninja/css/conditional/">Conditional styling <mark>NEW</mark></a></li>
195
- <li><a href="//blades.ninja/css/standalone/">Standalone version <mark>NEW</mark></a></li></ul>
196
- </li>
197
-
198
- <li>
199
- <strong><a href="//blades.ninja/css/layout/">Layout</a></strong>
200
- <ul><li><a href="//blades.ninja/css/landmarks-section/">Landmarks &amp; section</a></li>
201
- <li><a href="//blades.ninja/css/container/">Container</a></li>
202
- <li><a href="//blades.ninja/css/breakout/">Breakout container <mark>NEW</mark></a></li>
203
- <li><a href="//blades.ninja/css/grid/">Grid</a></li>
204
- <li><a href="//blades.ninja/css/columns/">Text columns <mark>NEW</mark></a></li></ul>
205
- </li>
206
-
207
- <li>
208
- <strong><a href="//blades.ninja/css/content/">Content</a></strong>
209
- <ul><li><a href="//blades.ninja/css/typography/">Typography <mark>UPD</mark></a></li>
210
- <li><a href="//blades.ninja/css/link/">Link</a></li>
211
- <li><a href="//blades.ninja/css/button/">Button</a></li>
212
- <li><a href="//blades.ninja/css/icon/"><code style="padding: 0">‹i›</code>con helper <mark>NEW</mark></a></li>
213
- <li><a href="//blades.ninja/css/list/">List <mark>UPD</mark></a></li>
214
- <li><a href="//blades.ninja/css/table/">Table <mark>UPD</mark></a></li>
215
- <li><a href="//blades.ninja/css/responsive-table/">Responsive table <mark>NEW</mark></a></li>
216
- <li><a href="//blades.ninja/css/code/">Code blocks <mark>NEW</mark></a></li></ul>
217
- </li>
218
-
219
- <li>
220
- <strong><a href="//blades.ninja/css/forms/">Forms</a></strong>
221
- <ul><li><a href="//blades.ninja/css/forms/">Overview</a></li>
222
- <li><a href="//blades.ninja/css/input/">Input</a></li>
223
- <li><a href="//blades.ninja/css/textarea/">Textarea</a></li>
224
- <li><a href="//blades.ninja/css/select/">Select</a></li>
225
- <li><a href="//blades.ninja/css/checkboxes/">Checkboxes</a></li>
226
- <li><a href="//blades.ninja/css/radios/">Radios</a></li>
227
- <li><a href="//blades.ninja/css/switch/">Switch</a></li>
228
- <li><a href="//blades.ninja/css/range/">Range</a></li>
229
- <li><a href="//blades.ninja/css/float-label/">Float labels <mark>NEW</mark></a></li></ul>
230
- </li>
231
-
232
- <li>
233
- <strong><a href="//blades.ninja/css/components/">Components</a></strong>
234
- <ul><li><a href="//blades.ninja/css/accordion/">Accordion</a></li>
235
- <li><a href="//blades.ninja/css/card/">Card</a></li>
236
- <li><a href="//blades.ninja/css/dropdown/">Dropdown</a></li>
237
- <li><a href="//blades.ninja/css/group/">Group</a></li>
238
- <li><a href="//blades.ninja/css/loading/">Loading</a></li>
239
- <li><a href="//blades.ninja/css/modal/">Modal</a></li>
240
- <li><a href="//blades.ninja/css/nav/">Navigation</a></li>
241
- <li><a href="//blades.ninja/css/progress/">Progress</a></li>
242
- <li><a href="//blades.ninja/css/tooltip/">Tooltip</a></li>
243
- <li><a href="//blades.ninja/css/timeline/">Timeline <mark>NEW</mark></a></li>
244
- <li><a href="//blades.ninja/css/jump/">Jump to... <mark>NEW</mark></a></li>
245
- <li><a href="//blades.ninja/css/utils/">Utilities <mark>NEW</mark></a></li></ul>
246
- </li>
247
-
248
- <li>
249
- <strong><a href="//blades.ninja/more/">More</a></strong>
250
- <ul><li><a href="//blades.ninja/css/pico/">Pico CSS <mark>NEW</mark> <sub style="">(underlying fork)</sub></a></li>
251
- <li><a href="//blades.ninja/css/ninja/">Ninja CSS <mark>NEW</mark> <sub style="">(experimental add-ons)</sub></a></li>
252
- <li><a href="//blades.ninja/html/">Dynamic templates <mark>NEW</mark></a></li>
253
- <li><a href="//blades.ninja/html/base/">Base HTML <mark>NEW</mark></a></li>
254
- <li><a href="//blades.ninja/html/links/">Links snippet <mark>NEW</mark></a></li>
255
- <li><a href="//blades.ninja/html/sitemap/">Sitemap XML <mark>NEW</mark></a></li>
256
- <li><a href="//blades.ninja/css/frameworks/">CSS frameworks <mark>2026–2040</mark></a></li></ul>
257
- </li>
258
-
259
- </ul>
260
-
261
- ---
262
-
263
245
  <!--section:info-->
264
246
 
265
247
  ## <sup style>Trusted by</sup>
266
248
 
267
- - 🐍 [Flask & Jinja](https://palletsprojects.com/) community website
268
- - 🪐 [Grav CMS v2](https://getgrav.org/migrate-to-2#:~:text=blades) default theme
269
-
270
- <!--https://pulsar-wildlife.club/-->
271
-
272
- ## <sup style>Also used by</sup>
273
-
274
- - https://www.followthatcar.com/
275
-
276
- ## <sup style>Featured by</sup> <!-- [1] big projects [2] awesome [3] smaller projects [4] blogs/social -->
249
+ <big>
250
+
251
+ - [<i>🐍</i> Flask & Jinja](https://palletsprojects.com/) community website [↗](https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html)
252
+ - [Grav CMS v2](https://getgrav.org/migrate-to-2#:~:text=blades) default theme [↗](https://github.com/getgrav/grav-theme-quark2)
253
+ - [FastHTML](https://www.fastht.ml/docs/api/pico.html) Pico components [↗](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/pico.py)
254
+
255
+ <!--{.markerless}-->
256
+
257
+ </big>
258
+
259
+ ## <sup style>Showcase</sup> <!-- sites & projects using Blades, A-Z -->
260
+
261
+ - [doany.io](https:////doany.io/en/#:~:text=blades)
262
+ [↗](https://b.doany.io/en/posts/svelte-bun-sqlite/#on-biome-and-css:~:text=anyblades)
263
+ [↗](https://github.com/danything/denpa)
264
+ [↗](https://github.com/danything/lgtm)
265
+ [↗](https://github.com/danything/mado)
266
+ [↗](https://github.com/danything/xool)
267
+ - [usehadron.dev](https:////usehadron.dev/#:~:text=blades)
268
+ - https://000000076.xyz/ [↗](https://wisp.000000076.xyz/)
269
+ - https://1k.football/
270
+ - https://awesome-jj.larve.net/
271
+ - https://buildawesome.one/
272
+ - https://followthatcar.com/
273
+ - https://github.com/5ym/noren
274
+ - https://github.com/johnheenan/minform [↗](https://github.com/hostfurl/minformhf)
275
+ - https://github.com/kezabelle/django-nestingdolls
276
+ - https://greenroom.pudiga.org/
277
+ - https://knives.ajitpanigrahi.com/
278
+ - https://robotics.spprep.org/
279
+
280
+ <!--{.columns .showcase}-->
281
+ <!-- new candidates, add after demo/screenshots/etc:
282
+ - https://github.com/adamdjbrett/11ty-kb
283
+ - https://github.com/dhhyi/recipe-db
284
+ - https://github.com/flippant-heron/wollee
285
+ - https://github.com/hugoh/hs-mock
286
+ - https://github.com/joefg/uv-fasthtml
287
+ - https://github.com/kugeleis/expyri
288
+ - https://github.com/kylebavis/boh
289
+ - https://github.com/l30dr01d/files-set-diversity-experiments
290
+ - https://github.com/memowe/dts-frontend
291
+ - https://github.com/oddcelot/meowter
292
+ - https://github.com/yaal-coop/wtforms-htmx
293
+ -->
294
+
295
+ ## <sup style>Featured by</sup> <!-- group by host 1st letter, A-Z -->
277
296
 
278
- - https://usehadron.dev/
279
297
  - [@11ty/buildawesome](https://bsky.app/profile/11ty.dev/post/3mp75r53ccv2b) [↗](https://mastodon.social/@11ty@neighborhood.11ty.dev/116816881367741413)
280
- - [<i class="fa-brands fa-build-awesome mark-brand"></i> buildawesome.one](https://buildawesome.one/#:~:text=blades)
281
- - https://github.com/dbohdan/classless-css
282
- - https://github.com/uhub/awesome-css
283
- - [/gabrielizalo/awesome-css-frameworks](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
284
- - https://github.com/eggplantpasta/greenroom
285
- - [/adamdjbrett/11ty-wisp](https://github.com/adamdjbrett/11ty-wisp#features:~:text=blades) [↗](https://github.com/adamdjbrett/000000076#:~:text=blades)
286
- - https://knives.ajitpanigrahi.com/
287
- - [doany.io](https://doany.io/en/posts/svelte-bun-sqlite/#on-biome-and-css:~:text=anyblades)
298
+ - [@matthewmorete](https://bsky.app/profile/matthewmorete.com/post/3mx5wvywixc2l)
299
+ <!--^B^-->
300
+ - [linuxlinks.com](https://www.linuxlinks.com/blades-minimal-css-framework/)
301
+ <!--^L^-->
302
+ - [@dbohdan/classless-css](https://github.com/dbohdan/classless-css)
303
+ - [@gabrielizalo/css-frameworks](https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries/blob/master/Lightweight/README.md)
304
+ - [@uhub/awesome-css](https://github.com/uhub/awesome-css)
305
+ <!--^G^-->
288
306
  - [@box464](https://mastodon.social/@box464/117442493473921346)
289
- - [@draupnerdata](https://www.youtube.com/watch?v=yDjArj9HSjs&t=180s)
290
- - [@cantdutchthis](https://news.ycombinator.com/item?id=48729467)
291
- - [@daviding](https://www.reddit.com/r/Wordpress/comments/1vnfhkr/comment/p3k9z1c/#:~:text=blades)
292
- - [@infotexture](https://mastodon.social/@infotexture@indieweb.social/117294194740314396)
293
307
  - [@lazarus](https://fosstodon.org/@lazarus/117384358792615667)
294
- - [@matthewmorete](https://bsky.app/profile/matthewmorete.com/post/3mx5wvywixc2l)
295
308
  - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
309
+ <!--^M^-->
310
+ - [@cantdutchthis](https://news.ycombinator.com/item?id=48729467)
311
+ - [@retr0id](https://news.ycombinator.com/item?id=50299098)
312
+ <!--^N^-->
313
+ - [@daviding](https://www.reddit.com/r/Wordpress/comments/1vnfhkr/comment/p3k9z1c/#:~:text=blades)
314
+ <!--^R^-->
315
+ - [@5yuim](https://x.com/5yuim/status/2111650695451668682) [↗](https://x.com/5yuim/status/2114540993739657595)
316
+ <!--^X^-->
317
+ - [@draupnerdata](https://www.youtube.com/watch?v=yDjArj9HSjs&t=180s)
318
+ <!--^Y^-->
296
319
 
297
320
  <!--{.markerless .columns}-->
298
- <!--[hostfurl.com, @johnheenan]-->
321
+
322
+ <!--section:gh-only-->
323
+
324
+ <br>
325
+
326
+ ### 🥷✨
327
+
328
+ <!--
329
+ > [!IMPORTANT]
330
+ > **Work in progress** — information below is under review:
331
+ -->
package/css/blades.css CHANGED
@@ -1,22 +1,22 @@
1
1
  /*!
2
- * Blades CSS v3 with Pico CSS 🥷✨
3
- * Copyright 2026 (https://blades.ninja/)
2
+ * Blades CSS v3.1 🥷✨
3
+ * Copyright 2026 (https://blades.dev/)
4
4
  * Licensed under MIT
5
5
  */
6
6
  /*!
7
- * Blades CSS' Pico fork v2.5 🥷✨
7
+ * Blades CSS' Pico fork 🥷✨
8
8
  * Copyright 2019-2025 (https://picocss.com)
9
- * Copyright 2026 (https://blades.ninja/css/pico/)
9
+ * Copyright 2026 (https://blades.dev/css/pico/)
10
10
  * Licensed under MIT
11
11
  */
12
12
  /*!
13
13
  * Blades CSS standalone kit v3 🥷
14
- * Copyright 2026 (https://blades.ninja/css/standalone/)
14
+ * Copyright 2026 (https://blades.dev/css/standalone/)
15
15
  * Licensed under MIT
16
16
  */
17
17
  /*!
18
18
  * Float Label CSS v2 by Blades CSS 🥷🏷️
19
- * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
19
+ * Copyright 2016–2026 (https://blades.dev/css/float-label/)
20
20
  * Licensed under MIT
21
21
  */
22
22
  :scope, :host {