@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.
- package/README.md +173 -140
- package/css/blades.css +6 -6
- package/css/blades.min.css +6 -6
- package/css/blades.ninja.css +6 -6
- package/css/blades.ninja.min.css +6 -6
- package/css/float-label.css +1 -1
- package/css/float-label.min.css +1 -1
- package/css/layered/README.md +164 -0
- package/css/layered/_compact.css +30 -0
- package/css/layered/_utilities.css +23 -0
- package/css/layered/_variables-blades.css +8 -0
- package/css/layered/_variables.css +258 -0
- package/css/layered/blades.layered.css +6 -6
- package/css/layered/blades.layered.min.css +6 -6
- package/css/layered/components/_accordion.css +93 -0
- package/css/layered/components/_card.css +37 -0
- package/css/layered/components/_dropdown-popover.css +89 -0
- package/css/layered/components/_dropdown.css +188 -0
- package/css/layered/components/_group.css +89 -0
- package/css/layered/components/_index.css +950 -0
- package/css/layered/components/_loading.css +51 -0
- package/css/layered/components/_modal-modern.css +17 -0
- package/css/layered/components/_modal.css +144 -0
- package/css/layered/components/_nav.css +114 -0
- package/css/layered/components/_progress.css +68 -0
- package/css/layered/components/_timeline.css +7 -0
- package/css/layered/components/_tooltip.css +158 -0
- package/css/layered/content/_button.css +125 -0
- package/css/layered/content/_code-block.css +17 -0
- package/css/layered/content/_code.css +46 -0
- package/css/layered/content/_embedded-content.css +33 -0
- package/css/layered/content/_figure.css +10 -0
- package/css/layered/content/_icon.css +30 -0
- package/css/layered/content/_index.css +456 -0
- package/css/layered/content/_link.css +59 -0
- package/css/layered/content/_misc.css +15 -0
- package/css/layered/content/_table.css +24 -0
- package/css/layered/content/_typography.css +137 -0
- package/css/layered/forms/_basics.css +257 -0
- package/css/layered/forms/_checkbox-radio-switch.css +132 -0
- package/css/layered/forms/_index.css +617 -0
- package/css/layered/forms/_input-color.css +17 -0
- package/css/layered/forms/_input-datetime.css +37 -0
- package/css/layered/forms/_input-file.css +25 -0
- package/css/layered/forms/_input-range.css +111 -0
- package/css/layered/forms/_input-search.css +32 -0
- package/css/layered/forms/float-label/_core.css +28 -0
- package/css/layered/forms/float-label/_index.css +54 -0
- package/css/layered/forms/float-label/_theme.css +25 -0
- package/css/layered/forms/float-label/core.css +1 -1
- package/css/layered/forms/float-label.css +1 -1
- package/css/layered/layout/_columns.css +7 -0
- package/css/layered/layout/_container.css +39 -0
- package/css/layered/layout/_document.css +37 -0
- package/css/layered/layout/_grid.css +17 -0
- package/css/layered/layout/_index.css +103 -0
- package/css/layered/layout/_landmarks.css +3 -0
- package/css/layered/layout/_overflow-auto.css +3 -0
- package/css/layered/layout/_section.css +3 -0
- package/css/pico.canonical.css +2512 -0
- package/css/pico.canonical.min.css +1 -0
- package/css/pico.canonical.unmin.css +2512 -0
- package/css/pico.canonical.unmin.min.css +1 -0
- package/css/pico.conditional.css +2 -2
- package/css/pico.conditional.min.css +2 -2
- package/css/pico.css +2 -2
- package/css/pico.min.css +2 -2
- package/css/pico.unmin.css +2365 -0
- package/css/pico.unmin.min.css +7 -0
- package/package.json +12 -9
- package/src/blades/_index.css +1 -1
- package/src/blades/forms/float-label/_core.css +1 -1
- package/src/blades.css +2 -2
- 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=
|
|
7
|
-
[LIC]: https://img.shields.io/badge
|
|
8
|
-
[X]:
|
|
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
|
+

|
|
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
|
|
28
|
+
<a href="//blades.dev/css/" role="button">Get started ›</a>
|
|
27
29
|
<b hidden> • </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
|
|
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`
|
|
70
|
+
Then, `@import` Blades into your CSS file:
|
|
71
71
|
|
|
72
72
|
```css
|
|
73
73
|
@import "@anyblades/blades";
|
|
74
74
|
```
|
|
75
75
|
|
|
76
|
-
|
|
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 [
|
|
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
|
-
-
|
|
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
|
-
|
|
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
|
-
##
|
|
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 & 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.
|
|
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
|
-
|
|
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 & 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
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
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
|
-
- [
|
|
281
|
-
|
|
282
|
-
- https://
|
|
283
|
-
|
|
284
|
-
- https://github.com/
|
|
285
|
-
- [/
|
|
286
|
-
- https://
|
|
287
|
-
|
|
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
|
-
|
|
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
|
|
3
|
-
* Copyright 2026 (https://blades.
|
|
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
|
|
7
|
+
* Blades CSS' Pico fork 🥷✨
|
|
8
8
|
* Copyright 2019-2025 (https://picocss.com)
|
|
9
|
-
* Copyright 2026 (https://blades.
|
|
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.
|
|
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.
|
|
19
|
+
* Copyright 2016–2026 (https://blades.dev/css/float-label/)
|
|
20
20
|
* Licensed under MIT
|
|
21
21
|
*/
|
|
22
22
|
:scope, :host {
|