@anydigital/blades 0.27.0-beta → 0.27.0-beta.10

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 (17) hide show
  1. package/README.md +78 -71
  2. package/_includes/blades/gtm.liquid +1 -1
  3. package/_includes/blades/sitemap.xml.njk +12 -0
  4. package/assets/blades.css +178 -101
  5. package/assets/blades.theme.css +25 -9
  6. package/assets/responsive-table.css +12 -4
  7. package/blades.gemspec +1 -1
  8. package/package.json +1 -1
  9. package/src/_code.css +1 -0
  10. package/src/_layout.css +40 -9
  11. package/src/_link.css +26 -13
  12. package/src/_table.css +26 -14
  13. package/src/_typography.css +58 -9
  14. package/src/_unreduce-motion.css +6 -3
  15. package/src/_utilities.css +7 -45
  16. package/src/blades.theme.css +26 -0
  17. package/src/responsive-table.css +12 -4
package/README.md CHANGED
@@ -1,49 +1,51 @@
1
- # 🥷 Blades <sup>![](https://img.shields.io/github/v/release/anydigital/blades?label=&color=black&include_prereleases)</sup>
1
+ # 🥷 Blades
2
2
 
3
3
  <!--section:hero-->
4
4
 
5
5
  <hgroup>Framework-agnostic,<wbr> class-light CSS⁺ blade kit.</hgroup>
6
6
 
7
- <big>Use with Pico, Tailwind, or any other CSS reset/framework.</big>
7
+ <big>Use with Pico, Simple, Tailwind, or any other CSS reset/framework.</big>
8
+
9
+ ![](https://img.shields.io/github/v/release/anydigital/blades?label=&color=white&include_prereleases)
10
+ [![](https://img.shields.io/github/stars/anydigital/blades?label=)](https://github.com/anydigital/blades)
8
11
 
9
12
  <!--section-->
10
13
 
11
14
  Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
12
15
 
16
+ [![](https://img.shields.io/badge/Demo_&_Docs-darkslategray?style=for-the-badge)](https://blades.ninja/)
17
+
13
18
  ---
14
19
 
15
20
  <!--section:index-->
16
21
 
17
- <hgroup id="css">
18
- <small>Class-light</small>
19
- <h2>CSS blades</h2>
20
- <p>inspired by Pico.css</p>
21
- </hgroup>
22
-
23
- <big>
24
-
25
- - [Typography](https://blades.ninja/css/typography/)
26
- - [Table](https://blades.ninja/css/table/)
27
- - [Responsive table without wrapper](https://blades.ninja/css/table/#responsive-table-without-wrapper) {data-marker=🥷}
28
- - [Heading anchors](https://blades.ninja/css/typography/#heading-anchors)
29
- - [List markers](https://blades.ninja/css/typography/#list-markers) {data-marker=🥷}
30
- - [Link [fav]icons](https://blades.ninja/css/typography/#link-fav-icons)
31
- - [Code](https://blades.ninja/css/code/)
32
- - [Layout](https://blades.ninja/css/layout/)
33
- - [Breakout elements](https://blades.ninja/css/breakout/) {data-marker=🥷}
34
- - [Utilities](https://blades.ninja/css/utilities/)
35
- - [Jump to top](https://blades.ninja/css/utilities/#jump-to-top)
36
- - [Table of contents](https://blades.ninja/css/utilities/#table-of-contents)
37
- - [Auto-columns](https://blades.ninja/css/utilities/#auto-columns)
38
- - [Auto-dark](https://blades.ninja/css/utilities/#auto-dark)
39
-
40
- {.columns}
41
-
42
- </big>
43
-
44
- <details><summary role="button" class="outline">Install CSS blades</summary>
45
-
46
- <mark>Option 1.</mark> From CDN:
22
+ ## <sup>Class-light</sup><br> [CSS blades](https://blades.ninja/css/) <br><sub>inspired by Pico.css</sub> <!--{#css}-->
23
+
24
+ <!-- copy-paste of ToC from https://blades.ninja/css/ -->
25
+ <ul class="unlist columns">
26
+ <li><a href="https://blades.ninja/css/#install">Install</a></li>
27
+ <li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/">🥷 Breakout elements →</a></li>
28
+ <li><a href="https://blades.ninja/css/#landmarks">Landmarks</a></li>
29
+ <li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li>
30
+ <li><a href="https://blades.ninja/css/#jump-to-top">Jump to top</a></li></ul></li>
31
+ <li><a href="https://blades.ninja/css/#content">Content</a><ul><li><a href="https://blades.ninja/css/#heading-anchors">Heading anchors</a></li>
32
+ <li><a href="https://blades.ninja/css/#list-markers">List markers</a></li>
33
+ <li><a href="https://blades.ninja/css/#link-fav-icons">Link [fav]icons</a></li>
34
+ <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
35
+ <li><a href="https://blades.ninja/css/#table">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/">🥷 Responsive table without wrapper →</a></li>
36
+ <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
37
+ <li><a href="https://blades.ninja/css/#borderless-table">Borderless table</a></li></ul></li>
38
+ <li><a href="https://blades.ninja/css/#utilities">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-dark">Auto-dark</a></li>
39
+ <li><a href="https://blades.ninja/css/#faded">Faded</a></li>
40
+ <li><a href="https://blades.ninja/css/#invert">Invert</a></li>
41
+ <li><a href="https://blades.ninja/css/#unreduce-motion">Unreduce motion</a></li></ul></li>
42
+ <li><a href="https://blades.ninja/css/#theme-optional">Theme (optional)</a></li>
43
+ </ul>
44
+
45
+ <!--section:index,install-css-->
46
+ <details><summary role="button" class="outline"><b>Install CSS blades</b></summary>
47
+
48
+ <mark>Option A.</mark> From CDN:
47
49
 
48
50
  <!--prettier-ignore-->
49
51
  ```html
@@ -51,7 +53,7 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
51
53
  <link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.theme.min.css" rel="stylesheet" /><!-- optional -->
52
54
  ```
53
55
 
54
- <mark>Option 2.</mark> Via npm:
56
+ <mark>Option B.</mark> Via npm:
55
57
 
56
58
  ```sh
57
59
  npm install @anydigital/blades
@@ -67,43 +69,36 @@ Then import in your .css:
67
69
  Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_styles/styles.css
68
70
 
69
71
  </details>
72
+ <!--section:index-->
70
73
 
71
74
  ---
72
75
 
73
- <hgroup>
74
- <small>Nunjucks / Liquid</small>
75
- <h2>HTML blades</h2>
76
- <p>for 11ty/Build Awesome, Jekyll, etc.</p>
77
- </hgroup>
76
+ ## <sup>Nunjucks / Liquid</sup><br> [HTML blades](https://blades.ninja/html/) <br><sub>for 11ty/Build Awesome, Jekyll, etc.</sub>
78
77
 
79
- <big>
78
+ - [Base HTML](https://blades.ninja/html/#base) <!--{data-marker=🥷}-->
79
+ - [Links](https://blades.ninja/html/#links)
80
+ - [Sitemap](https://blades.ninja/html/#sitemap)
81
+ - [Google Tag Manager](https://blades.ninja/html/#gtm)
80
82
 
81
- - [Base HTML](https://blades.ninja/html/) {data-marker=🥷}
82
- - [Links](https://blades.ninja/html/links/)
83
- - [Google Tag Manager](https://blades.ninja/html/gtm/)
83
+ <!--{.columns}-->
84
84
 
85
- {.columns}
86
-
87
- </big>
88
-
89
- <details><summary role="button" class="outline">Install HTML blades</summary>
85
+ <!--section:index,install-html-->
86
+ <details><summary role="button" class="outline"><b>Install HTML blades</b></summary>
90
87
 
91
88
  ```sh
92
89
  npm install @anydigital/blades
93
- cd ./_includes # or where your includes dir is
90
+ cd ./_includes # your includes dir
94
91
  ln -s ../node_modules/@anydigital/blades/_includes/blades
95
92
  ```
96
93
 
97
94
  That's it! Now you can use HTML blades in your templates like this:
98
95
 
99
- ```jinja2
96
+ ```jinja2 {data-caption=Nunjucks}
100
97
  {% extends 'blades/html.njk' %}
101
98
  {% include 'blades/gtm.njk' %}
102
99
  ```
103
100
 
104
- or:
105
-
106
- ```liquid
101
+ ```liquid {data-caption=Liquid}
107
102
  {% include blades/html.liquid %}
108
103
  {% include blades/gtm.liquid for_body=true %}
109
104
  {% render blades/links, links: site.links, current_url: page.url %}
@@ -113,26 +108,38 @@ or:
113
108
 
114
109
  ---
115
110
 
116
- <hgroup>
117
- <small>Open-source</small>
118
- <h2>Starter blades</h2><i></i>
119
- </hgroup>
120
-
121
- <nav class="grid">
122
- <a role="button" class="outline" href="https://github.com/anydigital/build-awesome-starter">
123
- <big>Blades with Tailwind</big><br>
124
- using Eleventy and Nunjucks <br>
125
- <small>(Build Awesome Starter)</small>
126
- </a>
127
- <a role="button" class="outline" href="https://github.com/anydigital/bladeswitch">
128
- <big>Blades with Pico</big><br>
129
- using Jekyll and Liquid <br>
130
- <small>(Bladeswitch Starter)</small>
131
- </a>
132
- </nav>
111
+ All CSS and HTML blades above are available as a Jekyll theme:
112
+
113
+ <details><summary role="button" class="outline"><b>Install as Jekyll theme</b></summary>
114
+
115
+ In you `_config.yml`:
116
+
117
+ ```yaml
118
+ remote_theme: anydigital/blades@v0.27.0-beta # or latest
119
+ plugins:
120
+ - jekyll-remote-theme
121
+ ```
122
+
123
+ Living example: https://github.com/anydigital/bladeswitch/blob/main/_config.yml
124
+
125
+ </details>
126
+
127
+ Or use a preconfigured template:
128
+
129
+ [🥷 Bladeswitch Starter ↗ &nbsp;<small style="white-space: nowrap">Jekyll ⁺ Pico ⁺ Blades</small>](https://github.com/anydigital/bladeswitch)<!--{role=button .outline}-->
130
+
131
+ <!--section:gh-only-->
133
132
 
134
133
  ---
135
134
 
136
- Featured by:
135
+ <!--section:appendix-->
136
+
137
+ - Featured by:
138
+ - https://github.com/uhub/awesome-css
139
+ - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
140
+ - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
141
+ - Credits:
142
+ - https://picocss.com/ for inspiration
143
+ - https://11ty.dev/ for build power
137
144
 
138
- - https://github.com/uhub/awesome-css
145
+ <!--{.unlist .columns}-->
package/_includes/blades/gtm.liquid CHANGED
@@ -22,7 +22,7 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
22
22
  {% endcapture %}
23
23
  {{ _ | strip }}
24
24
  {% endif %}
25
- {% # prettier-ignore %}
25
+ <!--prettier-ignore-->
26
26
  {% comment %}```
27
27
  <!--section:docs-->
28
28
  Usage in Liquid:
package/_includes/blades/sitemap.xml.njk ADDED
@@ -0,0 +1,12 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ {%- for page in collections.all %}
4
+ {% if page.data.permalink != false %}
5
+ <url>
6
+ <loc>{{ site.base }}{{ page.url }}</loc>
7
+ <lastmod>{{ page.date | date }}</lastmod>
8
+ </url>
9
+ {% endif %}
10
+ {%- endfor %}
11
+ </urlset>
12
+ {# https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk #}
package/assets/blades.css CHANGED
@@ -2,10 +2,11 @@
2
2
 
3
3
  /* Layout */
4
4
 
5
- /* <!--section:docs-->
6
- Extends https://github.com/picocss/pico/blob/main/scss/layout/_document.scss
5
+ /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
6
+ <!--section:docs-->
7
7
 
8
- Prevent horizontal overflow and scrolling, modern way:
8
+ Global styles:
9
+ - Prevent horizontal overflow and scrolling, modern way.
9
10
  ```css */
10
11
 
11
12
  html {
@@ -14,11 +15,9 @@ html {
14
15
 
15
16
  /*```
16
17
 
17
- ## Landmarks
18
- Extends https://github.com/picocss/pico/blob/main/scss/layout/_landmarks.scss
19
-
20
- 1. Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
21
- 2. Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
18
+ ### Landmarks
19
+ - Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
20
+ - Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
22
21
  ```css */
23
22
 
24
23
  body {
@@ -31,7 +30,43 @@ body {
31
30
  }
32
31
  }
33
32
 
34
- /*``` <!--section--> */
33
+ /*```
34
+
35
+ ### Auto-columns
36
+ ```css */
37
+
38
+ .columns,
39
+ [data-is-toc] > ul,
40
+ [data-is-toc] > ol {
41
+ columns: 30ch auto; /* 2 cols max for 65ch container */
42
+
43
+ /* Avoid breaking inside elements, such as nested lists */
44
+ > * {
45
+ break-inside: avoid;
46
+ }
47
+ }
48
+
49
+ /*```
50
+
51
+ Table of contents (`[data-is-toc]`) has auto-columns by default.
52
+
53
+ ### Jump to top
54
+ ```css */
55
+
56
+ [data-jump-to="top"] {
57
+ position: fixed;
58
+ bottom: 0;
59
+ right: 0;
60
+ padding-top: 50vh;
61
+ opacity: 25%;
62
+
63
+ &:hover {
64
+ opacity: 75%;
65
+ }
66
+ }
67
+
68
+ /*```
69
+ <!--section--> */
35
70
 
36
71
  /* <!--section:code-->```css */
37
72
 
@@ -132,7 +167,11 @@ The breakout container has `10%` inline padding and a max-width of `calc(10% + 6
132
167
 
133
168
  /* Content */
134
169
 
135
- /*** Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss ***/
170
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
171
+ <!--section:docs-->
172
+
173
+ Global styles:
174
+ ```css */
136
175
 
137
176
  html {
138
177
  /* Enable font smoothing */
@@ -150,9 +189,15 @@ body {
150
189
  }
151
190
  }
152
191
 
153
- /*
154
- <!--section:docs-->
155
- ## Heading anchors
192
+ /*```
193
+
194
+ ### Heading anchors
195
+
196
+ Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
197
+
198
+ <article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
199
+
200
+ How it works:
156
201
  ```css */
157
202
 
158
203
  h1,
@@ -172,61 +217,113 @@ h6 {
172
217
  color: silver;
173
218
  text-decoration: none;
174
219
  }
175
- &:hover {
176
- [data-is-anchor] {
177
- visibility: visible;
220
+ /* Avoid double-tap on touch devices */
221
+ @media (hover: hover) {
222
+ &:hover {
223
+ [data-is-anchor] {
224
+ visibility: visible;
225
+ }
178
226
  }
179
227
  }
180
228
  }
181
229
 
182
230
  /*```
231
+ > **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anydigital/eleventy-blades/blob/main/src/eleventy.config.js
232
+
233
+ ### List markers
234
+
235
+ Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
236
+ <article>
237
+
238
+ - Customize
239
+ - list
240
+ - markers
241
+ - with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
183
242
 
184
- ## List markers
243
+ {style="--list-marker:'🧊 '"}
244
+ </article>
245
+
246
+ How it works:
185
247
  ```css */
186
248
 
187
249
  ul,
188
250
  ol {
251
+ &[style*="--list-marker:"] {
252
+ list-style-type: var(--list-marker);
253
+
254
+ > li {
255
+ list-style-type: inherit;
256
+ }
257
+ }
258
+
259
+ li[style*="--list-marker:"] {
260
+ list-style-type: var(--list-marker);
261
+ }
189
262
  li[data-marker]::marker {
263
+ /* ⚠️ `data-marker` works only in Chrome and Firefox */
190
264
  content: attr(data-marker) " ";
191
265
  }
266
+
267
+ /* Helper class to remove list styling at all */
268
+ &.unlist {
269
+ padding-inline-start: 0;
270
+
271
+ > li {
272
+ list-style: none;
273
+ }
274
+ }
192
275
  }
193
276
 
194
- /*``` <!--section--> */
277
+ /*```
278
+ <!--section--> */
195
279
 
196
- /* <!--section:code-->```css */
280
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
281
+ <!--section:code-->
282
+ ```css */
197
283
 
198
284
  a {
199
- /* Helper to handle icons in links */
285
+ /* Helper to handle [fav]icons in links */
200
286
  > i {
201
287
  display: inline-block;
202
288
  font-style: normal;
203
- }
204
-
205
- /* Helper for favicons in links */
206
- &[data-has-favicon] {
207
- display: inline-block;
208
289
 
209
290
  > img {
210
- max-height: 1.25em;
211
- margin-top: calc(-0.25em / 2);
212
- margin-inline-end: 0.375ch; /* =3/8 */
291
+ height: 1.25em;
292
+ margin-block: calc(-0.25em / 2);
213
293
 
214
294
  /* for tw-typography (.prose) */
215
295
  display: inline-block;
216
- margin-bottom: 0;
217
296
  }
218
297
  }
219
298
  }
220
299
 
221
300
  /*```
301
+ > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
302
+
222
303
  <!--section:docs-->
223
- Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
224
304
 
225
- ## Link [fav]icons
305
+ ### Link [fav]icons
306
+
307
+ Wrap [fav]icons inside links using `<i>...&nbsp;</i>` helper to size automatically and avoid underline. Compare:
308
+
309
+ <big class="grid">
310
+ <article><a href="https://blades.ninja/"> 🥷 Blades</a></article>
311
+ <article><a href="https://blades.ninja/"><i>🥷&nbsp;</i>Blades</a></article>
312
+ </big>
313
+
314
+ <big class="grid">
315
+ <article><a href="https://any.digital/">
316
+ <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64" > any.digital
317
+ </a></article>
318
+ <article><a href="https://any.digital/">
319
+ <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64">&nbsp;</i>any.digital
320
+ </a></article>
321
+ </big>
322
+
226
323
  <!--section--> */
227
324
 
228
- /* <!--section:docs-->
229
- Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
325
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
326
+ <!--section:docs-->
230
327
 
231
328
  ### Horizontal expanders
232
329
 
@@ -234,17 +331,23 @@ Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especia
234
331
  ```html
235
332
  <th>Col <hr></th>
236
333
  ```
237
- Example table:
238
- | SSG <hr> | Description |
239
- | --- | --- |
240
- | Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
241
-
242
- Same table without `<hr>`-expander would render as:
243
- | SSG | Description |
244
- | --- | --- |
245
- | Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
246
-
247
- ###### How it works
334
+ Example table before:
335
+ <article class="overflow-auto"><table>
336
+ <tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
337
+ </table></article>
338
+
339
+ Same table after adding `<hr>`-expanders:
340
+ <article class="overflow-auto"><table>
341
+ <tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
342
+ </table></article>
343
+
344
+ Living examples of big tables with `<hr>`-expanders:
345
+ - https://any.digital/insights/ai-ide/
346
+ - https://any.digital/insights/css-frameworks/
347
+ - https://any.digital/insights/ssg/
348
+ - https://blades.ninja/build-awesome-11ty/#min-starters
349
+
350
+ How it works:
248
351
  ```css */
249
352
 
250
353
  table {
@@ -264,16 +367,22 @@ table {
264
367
 
265
368
  /*```
266
369
  ---
370
+
267
371
  ### Borderless table
268
372
 
269
373
  `<table class="borderless">` removes all default borders:
270
- | Less | | Borders |
271
- | ---- | --- | ------- |
272
- | More | | Fun |
374
+
375
+ <article>
376
+
377
+ | Less | borders |
378
+ | ---- | ------- |
379
+ | more | fun |
273
380
 
274
381
  {.borderless}
382
+ </article>
275
383
 
276
384
  Living example: https://bladeswitch.com/#minimal-dependencies table
385
+
277
386
  <!--section--> */
278
387
 
279
388
  table.borderless {
@@ -315,22 +424,31 @@ table.responsive,
315
424
  Soft-increase selector specificity trick:
316
425
 
317
426
  `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
427
+
318
428
  <!--section:docs-->
319
- ### Responsive table without wrapper
429
+
320
430
  `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
321
- <div>
431
+ <hr><div>
322
432
 
323
433
  | Term | Description <hr class="x2"> | Link |
324
434
  | --- | --- | --- |
325
435
  | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
326
436
 
327
437
  {.responsive}
328
- </div>
438
+ </div><hr>
439
+
440
+ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
441
+
442
+ Living examples:
443
+ - https://any.digital/insights/ai-ide/
444
+ - https://any.digital/insights/css-frameworks/
445
+ - https://any.digital/insights/ssg/
446
+ - https://blades.ninja/build-awesome-11ty/#min-starters
329
447
 
330
- Tables inside `.breakout[-all]` are responsive by default.
331
448
  <!--section--> */
332
449
 
333
450
  /* <!--section:docs-->
451
+ ### Code
334
452
  Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
335
453
  ```css */
336
454
 
@@ -380,56 +498,10 @@ code {
380
498
 
381
499
  /* Utilities */
382
500
 
383
- /* <!--section:docs-->
384
-
385
- ## Jump to top
386
- ```css */
387
-
388
- [data-jump-to="top"] {
389
- position: fixed;
390
- bottom: 0;
391
- right: 0;
392
- padding-top: 50vh;
393
- opacity: 25%;
394
-
395
- &:hover {
396
- opacity: 75%;
397
- }
398
- }
399
-
400
- /*```
401
-
402
- ## Table of contents
403
- ```css */
404
-
405
- [data-is-toc] {
406
- font-size: 87.5%;
407
-
408
- a {
409
- text-decoration: none;
410
- }
411
- > ul {
412
- columns: 30ch auto; /* 2 cols max for 65ch container */
413
- }
414
- }
415
-
416
- /*```
417
-
418
- ## Auto-columns
419
- ```css */
420
-
421
- .columns {
422
- columns: 20ch auto; /* 3 cols max for 65ch container */
423
-
424
- /* Avoid breaking inside elements, such as nested lists */
425
- > * {
426
- break-inside: avoid;
427
- }
428
- }
429
-
430
- /*```
501
+ /*
502
+ <!--section:docs-->
431
503
 
432
- ## Auto-dark
504
+ ### Auto-dark
433
505
  ```css */
434
506
 
435
507
  @media (prefers-color-scheme: dark) {
@@ -442,7 +514,7 @@ code {
442
514
 
443
515
  /*```
444
516
 
445
- ## Other
517
+ ### Faded
446
518
  ```css */
447
519
 
448
520
  .faded {
@@ -452,6 +524,11 @@ code {
452
524
  }
453
525
  }
454
526
 
527
+ /*```
528
+
529
+ ### Invert
530
+ ```css */
531
+
455
532
  /* Extends https://tailwindcss.com/docs/filter-invert */
456
533
 
457
534
  .invert {
package/assets/blades.theme.css CHANGED
@@ -1,3 +1,5 @@
1
+ /* <!--section:code-->
2
+ ```css */
1
3
  a {
2
4
  &:not([href^="#"]) {
3
5
  text-decoration-thickness: 1px;
@@ -6,29 +8,40 @@ a {
6
8
  }
7
9
  }
8
10
  }
9
-
10
11
  h1 {
11
12
  font-size: 2.5em; /* for pico.css & tw-typography */
12
13
  margin-bottom: 1rem; /* for tw-typography */
13
14
  }
14
-
15
+ /* Potential fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
16
+ :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
17
+ margin-top: var(--pico-typography-spacing-top);
18
+ }
19
+ h1,
20
+ h2,
21
+ h3,
22
+ h4,
23
+ h5,
24
+ h6 {
25
+ & ~ & {
26
+ margin-bottom: 2rem;
27
+ }
28
+ }
29
+ NOTE: be careful with wrapped headings, i.e. inside nav: https://blades.ninja/build-awesome-11ty/#usage
30
+ */
15
31
  hr {
16
32
  margin-block: 2em; /* for pico.css & tw-typography */
17
33
  }
18
-
19
34
  ul {
20
35
  ul {
21
36
  font-size: 87.5%;
22
37
  }
23
38
  }
24
-
25
39
  pre {
26
40
  small {
27
41
  opacity: 75%;
28
42
  font-weight: lighter;
29
43
  }
30
44
  }
31
-
32
45
  table {
33
46
  th {
34
47
  vertical-align: bottom;
@@ -41,7 +54,6 @@ table {
41
54
  margin-bottom: 0.25rem;
42
55
  }
43
56
  }
44
-
45
57
  [data-jump-to="top"] {
46
58
  > i {
47
59
  display: inline-block;
@@ -52,13 +64,16 @@ table {
52
64
  border-color: black;
53
65
  }
54
66
  }
55
-
56
67
  [data-is-toc] {
68
+ font-size: 87.5%;
69
+
70
+ a {
71
+ text-decoration: none;
72
+ }
57
73
  > ul > * > a {
58
74
  font-weight: 500;
59
75
  }
60
76
  }
61
-
62
77
  .breakout,
63
78
  .breakout-all {
64
79
  > img,
@@ -66,9 +81,10 @@ table {
66
81
  margin-bottom: 1rem;
67
82
  }
68
83
  }
69
-
70
84
  .faded {
71
85
  a {
72
86
  text-decoration-style: dotted;
73
87
  }
74
88
  }
89
+ /*```
90
+ <!--section--> */
package/assets/responsive-table.css CHANGED
@@ -28,17 +28,25 @@ table.responsive,
28
28
  Soft-increase selector specificity trick:
29
29
 
30
30
  `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
31
+
31
32
  <!--section:docs-->
32
- ### Responsive table without wrapper
33
+
33
34
  `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
34
- <div>
35
+ <hr><div>
35
36
 
36
37
  | Term | Description <hr class="x2"> | Link |
37
38
  | --- | --- | --- |
38
39
  | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
39
40
 
40
41
  {.responsive}
41
- </div>
42
+ </div><hr>
43
+
44
+ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
45
+
46
+ Living examples:
47
+ - https://any.digital/insights/ai-ide/
48
+ - https://any.digital/insights/css-frameworks/
49
+ - https://any.digital/insights/ssg/
50
+ - https://blades.ninja/build-awesome-11ty/#min-starters
42
51
 
43
- Tables inside `.breakout[-all]` are responsive by default.
44
52
  <!--section--> */
package/blades.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "blades"
5
- spec.version = "0.27.0-beta"
5
+ spec.version = "0.27.0-beta.10"
6
6
  spec.authors = ["Anton Staroverov"]
7
7
 
8
8
  spec.summary = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/blades",
3
- "version": "0.27.0-beta",
3
+ "version": "0.27.0-beta.10",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
5
5
  "style": "./assets/blades.css",
6
6
  "exports": {
package/src/_code.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /* <!--section:docs-->
2
+ ### Code
2
3
  Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
3
4
  ```css */
4
5
  pre {
package/src/_layout.css CHANGED
@@ -1,18 +1,17 @@
1
- /* <!--section:docs-->
2
- Extends https://github.com/picocss/pico/blob/main/scss/layout/_document.scss
1
+ /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
2
+ <!--section:docs-->
3
3
 
4
- Prevent horizontal overflow and scrolling, modern way:
4
+ Global styles:
5
+ - Prevent horizontal overflow and scrolling, modern way.
5
6
  ```css */
6
7
  html {
7
8
  overflow-x: clip;
8
9
  }
9
10
  /*```
10
11
 
11
- ## Landmarks
12
- Extends https://github.com/picocss/pico/blob/main/scss/layout/_landmarks.scss
13
-
14
- 1. Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
15
- 2. Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
12
+ ### Landmarks
13
+ - Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
14
+ - Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
16
15
  ```css */
17
16
  body {
18
17
  min-height: 100dvh;
@@ -23,4 +22,36 @@ body {
23
22
  flex-grow: 1;
24
23
  }
25
24
  }
26
- /*``` <!--section--> */
25
+ /*```
26
+
27
+ ### Auto-columns
28
+ ```css */
29
+ .columns,
30
+ [data-is-toc] > ul,
31
+ [data-is-toc] > ol {
32
+ columns: 30ch auto; /* 2 cols max for 65ch container */
33
+
34
+ /* Avoid breaking inside elements, such as nested lists */
35
+ > * {
36
+ break-inside: avoid;
37
+ }
38
+ }
39
+ /*```
40
+
41
+ Table of contents (`[data-is-toc]`) has auto-columns by default.
42
+
43
+ ### Jump to top
44
+ ```css */
45
+ [data-jump-to="top"] {
46
+ position: fixed;
47
+ bottom: 0;
48
+ right: 0;
49
+ padding-top: 50vh;
50
+ opacity: 25%;
51
+
52
+ &:hover {
53
+ opacity: 75%;
54
+ }
55
+ }
56
+ /*```
57
+ <!--section--> */
package/src/_link.css CHANGED
@@ -1,29 +1,42 @@
1
- /* <!--section:code-->```css */
1
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
2
+ <!--section:code-->
3
+ ```css */
2
4
  a {
3
- /* Helper to handle icons in links */
5
+ /* Helper to handle [fav]icons in links */
4
6
  > i {
5
7
  display: inline-block;
6
8
  font-style: normal;
7
- }
8
-
9
- /* Helper for favicons in links */
10
- &[data-has-favicon] {
11
- display: inline-block;
12
9
 
13
10
  > img {
14
- max-height: 1.25em;
15
- margin-top: calc(-0.25em / 2);
16
- margin-inline-end: 0.375ch; /* =3/8 */
11
+ height: 1.25em;
12
+ margin-block: calc(-0.25em / 2);
17
13
 
18
14
  /* for tw-typography (.prose) */
19
15
  display: inline-block;
20
- margin-bottom: 0;
21
16
  }
22
17
  }
23
18
  }
24
19
  /*```
20
+ > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
21
+
25
22
  <!--section:docs-->
26
- Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
27
23
 
28
- ## Link [fav]icons
24
+ ### Link [fav]icons
25
+
26
+ Wrap [fav]icons inside links using `<i>...&nbsp;</i>` helper to size automatically and avoid underline. Compare:
27
+
28
+ <big class="grid">
29
+ <article><a href="https://blades.ninja/"> 🥷 Blades</a></article>
30
+ <article><a href="https://blades.ninja/"><i>🥷&nbsp;</i>Blades</a></article>
31
+ </big>
32
+
33
+ <big class="grid">
34
+ <article><a href="https://any.digital/">
35
+ <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64" > any.digital
36
+ </a></article>
37
+ <article><a href="https://any.digital/">
38
+ <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64">&nbsp;</i>any.digital
39
+ </a></article>
40
+ </big>
41
+
29
42
  <!--section--> */
package/src/_table.css CHANGED
@@ -1,5 +1,5 @@
1
- /* <!--section:docs-->
2
- Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
1
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
2
+ <!--section:docs-->
3
3
 
4
4
  ### Horizontal expanders
5
5
 
@@ -7,17 +7,23 @@ Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especia
7
7
  ```html
8
8
  <th>Col <hr></th>
9
9
  ```
10
- Example table:
11
- | SSG <hr> | Description |
12
- | --- | --- |
13
- | Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
10
+ Example table before:
11
+ <article class="overflow-auto"><table>
12
+ <tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
13
+ </table></article>
14
14
 
15
- Same table without `<hr>`-expander would render as:
16
- | SSG | Description |
17
- | --- | --- |
18
- | Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
15
+ Same table after adding `<hr>`-expanders:
16
+ <article class="overflow-auto"><table>
17
+ <tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
18
+ </table></article>
19
19
 
20
- ###### How it works
20
+ Living examples of big tables with `<hr>`-expanders:
21
+ - https://any.digital/insights/ai-ide/
22
+ - https://any.digital/insights/css-frameworks/
23
+ - https://any.digital/insights/ssg/
24
+ - https://blades.ninja/build-awesome-11ty/#min-starters
25
+
26
+ How it works:
21
27
  ```css */
22
28
  table {
23
29
  th {
@@ -35,16 +41,22 @@ table {
35
41
  }
36
42
  /*```
37
43
  ---
44
+
38
45
  ### Borderless table
39
46
 
40
47
  `<table class="borderless">` removes all default borders:
41
- | Less | | Borders |
42
- | ---- | --- | ------- |
43
- | More | | Fun |
48
+
49
+ <article>
50
+
51
+ | Less | borders |
52
+ | ---- | ------- |
53
+ | more | fun |
44
54
 
45
55
  {.borderless}
56
+ </article>
46
57
 
47
58
  Living example: https://bladeswitch.com/#minimal-dependencies table
59
+
48
60
  <!--section--> */
49
61
  table.borderless {
50
62
  th,
package/src/_typography.css CHANGED
@@ -1,4 +1,8 @@
1
- /*** Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss ***/
1
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
2
+ <!--section:docs-->
3
+
4
+ Global styles:
5
+ ```css */
2
6
  html {
3
7
  /* Enable font smoothing */
4
8
  -webkit-font-smoothing: antialiased;
@@ -14,9 +18,15 @@ body {
14
18
  hyphens: none;
15
19
  }
16
20
  }
17
- /*
18
- <!--section:docs-->
19
- ## Heading anchors
21
+ /*```
22
+
23
+ ### Heading anchors
24
+
25
+ Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
26
+
27
+ <article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
28
+
29
+ How it works:
20
30
  ```css */
21
31
  h1,
22
32
  h2,
@@ -35,20 +45,59 @@ h6 {
35
45
  color: silver;
36
46
  text-decoration: none;
37
47
  }
38
- &:hover {
39
- [data-is-anchor] {
40
- visibility: visible;
48
+ /* Avoid double-tap on touch devices */
49
+ @media (hover: hover) {
50
+ &:hover {
51
+ [data-is-anchor] {
52
+ visibility: visible;
53
+ }
41
54
  }
42
55
  }
43
56
  }
44
57
  /*```
58
+ > **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anydigital/eleventy-blades/blob/main/src/eleventy.config.js
59
+
60
+ ### List markers
61
+
62
+ Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
63
+ <article>
64
+
65
+ - Customize
66
+ - list
67
+ - markers
68
+ - with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
45
69
 
46
- ## List markers
70
+ {style="--list-marker:'🧊 '"}
71
+ </article>
72
+
73
+ How it works:
47
74
  ```css */
48
75
  ul,
49
76
  ol {
77
+ &[style*="--list-marker:"] {
78
+ list-style-type: var(--list-marker);
79
+
80
+ > li {
81
+ list-style-type: inherit;
82
+ }
83
+ }
84
+
85
+ li[style*="--list-marker:"] {
86
+ list-style-type: var(--list-marker);
87
+ }
50
88
  li[data-marker]::marker {
89
+ /* ⚠️ `data-marker` works only in Chrome and Firefox */
51
90
  content: attr(data-marker) " ";
52
91
  }
92
+
93
+ /* Helper class to remove list styling at all */
94
+ &.unlist {
95
+ padding-inline-start: 0;
96
+
97
+ > li {
98
+ list-style: none;
99
+ }
100
+ }
53
101
  }
54
- /*``` <!--section--> */
102
+ /*```
103
+ <!--section--> */
package/src/_unreduce-motion.css CHANGED
@@ -1,5 +1,7 @@
1
- /* <!--section:docs-->
2
- Overrides for https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-motion.scss
1
+ /* Overrides https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-motion.scss
2
+ <!--section:docs-->
3
+
4
+ ### Unreduce motion
3
5
  ```css */
4
6
  @utility unreduce-animation-* {
5
7
  @media (prefers-reduced-motion: reduce) {
@@ -10,4 +12,5 @@ Overrides for https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-m
10
12
  }
11
13
  }
12
14
  }
13
- /*``` <!--section--> */
15
+ /*```
16
+ <!--section--> */
package/src/_utilities.css CHANGED
@@ -1,48 +1,7 @@
1
- /* <!--section:docs-->
1
+ /*
2
+ <!--section:docs-->
2
3
 
3
- ## Jump to top
4
- ```css */
5
- [data-jump-to="top"] {
6
- position: fixed;
7
- bottom: 0;
8
- right: 0;
9
- padding-top: 50vh;
10
- opacity: 25%;
11
-
12
- &:hover {
13
- opacity: 75%;
14
- }
15
- }
16
- /*```
17
-
18
- ## Table of contents
19
- ```css */
20
- [data-is-toc] {
21
- font-size: 87.5%;
22
-
23
- a {
24
- text-decoration: none;
25
- }
26
- > ul {
27
- columns: 30ch auto; /* 2 cols max for 65ch container */
28
- }
29
- }
30
-
31
- /*```
32
-
33
- ## Auto-columns
34
- ```css */
35
- .columns {
36
- columns: 20ch auto; /* 3 cols max for 65ch container */
37
-
38
- /* Avoid breaking inside elements, such as nested lists */
39
- > * {
40
- break-inside: avoid;
41
- }
42
- }
43
- /*```
44
-
45
- ## Auto-dark
4
+ ### Auto-dark
46
5
  ```css */
47
6
  @media (prefers-color-scheme: dark) {
48
7
  :root:not([data-theme="light"]) {
@@ -53,7 +12,7 @@
53
12
  }
54
13
  /*```
55
14
 
56
- ## Other
15
+ ### Faded
57
16
  ```css */
58
17
  .faded {
59
18
  opacity: 50%;
@@ -61,7 +20,10 @@
61
20
  opacity: 87.5%;
62
21
  }
63
22
  }
23
+ /*```
64
24
 
25
+ ### Invert
26
+ ```css */
65
27
  /* Extends https://tailwindcss.com/docs/filter-invert */
66
28
  .invert {
67
29
  /* Fix the scrollbar color when inverted */
package/src/blades.theme.css CHANGED
@@ -1,3 +1,5 @@
1
+ /* <!--section:code-->
2
+ ```css */
1
3
  a {
2
4
  &:not([href^="#"]) {
3
5
  text-decoration-thickness: 1px;
@@ -12,6 +14,23 @@ h1 {
12
14
  margin-bottom: 1rem; /* for tw-typography */
13
15
  }
14
16
 
17
+ /* Potential fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
18
+ :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
19
+ margin-top: var(--pico-typography-spacing-top);
20
+ }
21
+ h1,
22
+ h2,
23
+ h3,
24
+ h4,
25
+ h5,
26
+ h6 {
27
+ & ~ & {
28
+ margin-bottom: 2rem;
29
+ }
30
+ }
31
+ NOTE: be careful with wrapped headings, i.e. inside nav: https://blades.ninja/build-awesome-11ty/#usage
32
+ */
33
+
15
34
  hr {
16
35
  margin-block: 2em; /* for pico.css & tw-typography */
17
36
  }
@@ -54,6 +73,11 @@ table {
54
73
  }
55
74
 
56
75
  [data-is-toc] {
76
+ font-size: 87.5%;
77
+
78
+ a {
79
+ text-decoration: none;
80
+ }
57
81
  > ul > * > a {
58
82
  font-weight: 500;
59
83
  }
@@ -72,3 +96,5 @@ table {
72
96
  text-decoration-style: dotted;
73
97
  }
74
98
  }
99
+ /*```
100
+ <!--section--> */
package/src/responsive-table.css CHANGED
@@ -28,17 +28,25 @@ table.responsive,
28
28
  Soft-increase selector specificity trick:
29
29
 
30
30
  `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
31
+
31
32
  <!--section:docs-->
32
- ### Responsive table without wrapper
33
+
33
34
  `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
34
- <div>
35
+ <hr><div>
35
36
 
36
37
  | Term | Description <hr class="x2"> | Link |
37
38
  | --- | --- | --- |
38
39
  | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
39
40
 
40
41
  {.responsive}
41
- </div>
42
+ </div><hr>
43
+
44
+ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
45
+
46
+ Living examples:
47
+ - https://any.digital/insights/ai-ide/
48
+ - https://any.digital/insights/css-frameworks/
49
+ - https://any.digital/insights/ssg/
50
+ - https://blades.ninja/build-awesome-11ty/#min-starters
42
51
 
43
- Tables inside `.breakout[-all]` are responsive by default.
44
52
  <!--section--> */