@anydigital/blades 0.27.0-beta.12 → 0.27.0-beta.15

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 (7) hide show
  1. package/README.md +5 -4
  2. package/assets/blades.css +25 -29
  3. package/assets/link-icon.css +22 -29
  4. package/blades.gemspec +1 -1
  5. package/package.json +1 -1
  6. package/src/_table.css +3 -0
  7. package/src/link-icon.css +22 -29
package/README.md CHANGED
@@ -24,15 +24,15 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
24
24
  <!-- copy-paste of ToC from https://blades.ninja/css/ -->
25
25
  <ul class="unlist columns">
26
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>
27
+ <li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/"><i>🥷</i> Breakout elements →</a></li>
28
28
  <li><a href="https://blades.ninja/css/#landmarks">Landmarks</a></li>
29
29
  <li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li>
30
30
  <li><a href="https://blades.ninja/css/#jump-to-top">Jump to top</a></li></ul></li>
31
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
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>
33
+ <li><a href="https://blades.ninja/css/link-icon/"><i>🥷</i> Link [fav]icons →</a></li>
34
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>
35
+ <li><a href="https://blades.ninja/css/#table">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/"><i>🥷</i> Responsive table without wrapper →</a></li>
36
36
  <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
37
37
  <li><a href="https://blades.ninja/css/#borderless-table">Borderless table</a></li></ul></li>
38
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>
@@ -136,8 +136,9 @@ Or use a preconfigured template:
136
136
 
137
137
  - Featured by:
138
138
  - https://github.com/uhub/awesome-css
139
- - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
139
+ - 🕶️ [Awesome-CSS-Frameworks-and-UI-Libraries](https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries/tree/master/Lightweight)
140
140
  - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
141
+ - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
141
142
  - 🚀 [build-awesome-starter](https://github.com/anydigital/build-awesome-starter)
142
143
  - 🚀 [bladeswitch starter](https://github.com/anydigital/bladeswitch)
143
144
  - https://github.com/hostfurl/minformhf starter
package/assets/blades.css CHANGED
@@ -282,32 +282,35 @@ ol {
282
282
  ```css */
283
283
 
284
284
  a {
285
- /* Display as inline flex, if it contains an icon */
285
+ /* If link contains an icon, use inline flex */
286
286
  &:has(> i) {
287
287
  display: inline-flex;
288
- align-items: center;
289
288
  gap: 0.375ch; /* =3/8 */
289
+ text-wrap: balance;
290
290
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
291
291
  }
292
292
 
293
- /* Font Awesome specials */
294
- &:has(> i[class^="fa-"]),
295
- &:has(> i[class*=" fa-"]) {
296
- gap: 0.125ch; /* =1/8 */
297
- }
298
-
299
293
  /* Helper to handle [fav]icons in links */
300
294
  > i {
301
295
  font-style: normal;
302
- float: left; /* ✅ Chrome ❌ Safari */
303
- text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
296
+ float: left; /* ✅ Chrome ❌ Safari */
297
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
304
298
 
299
+ /* Favicons */
305
300
  > img {
306
301
  height: 1.25em;
307
302
  margin-block: calc(-0.25em / 2);
303
+ display: inline-block; /* for Tailwind CSS Typography */
304
+ }
308
305
 
309
- /* for tw-typography (.prose) */
310
- display: inline-block;
306
+ /* Font Awesome */
307
+ &[class^="fa-"],
308
+ &[class*=" fa-"] {
309
+ line-height: inherit;
310
+ --fa-width: auto;
311
+ }
312
+ &.fa-lg {
313
+ line-height: normal;
311
314
  }
312
315
  }
313
316
  }
@@ -317,25 +320,15 @@ a {
317
320
 
318
321
  <!--section:docs-->
319
322
 
320
- Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
323
+ Use Blades' `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons. Compare:
321
324
 
322
- <big class="grid">
323
- <article><a href="https://blades.ninja/"> 🥷 Blades</a></article>
324
- <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
325
- </big>
326
-
327
- <big class="grid">
328
- <article><a href="https://any.digital/">
329
- <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"> any.digital
330
- </a></article>
331
- <article><a href="https://any.digital/">
332
- <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
333
- </a></article>
334
- </big>
335
-
336
- Or simply drop-in any Font Awesome icon (without wrapping it):
325
+ ---
337
326
 
338
- <big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
327
+ | Without Blades <hr class="lg"> | With Blades' `<i>`-helper <hr class="lg"> | Clean HTML without `<span>ning` <hr class="x2"> |
328
+ | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
329
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
330
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
331
+ | [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#) | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#) | `<a><i class="fa-..."></i> Text</a>` |
339
332
 
340
333
  ---
341
334
 
@@ -379,6 +372,9 @@ table {
379
372
  margin: 0;
380
373
  visibility: hidden;
381
374
 
375
+ &.lg {
376
+ width: 18ch;
377
+ }
382
378
  &.x2 {
383
379
  width: 24ch;
384
380
  }
package/assets/link-icon.css CHANGED
@@ -2,32 +2,35 @@
2
2
  <!--section:code-->
3
3
  ```css */
4
4
  a {
5
- /* Display as inline flex, if it contains an icon */
5
+ /* If link contains an icon, use inline flex */
6
6
  &:has(> i) {
7
7
  display: inline-flex;
8
- align-items: center;
9
8
  gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
10
10
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
11
11
  }
12
12
 
13
- /* Font Awesome specials */
14
- &:has(> i[class^="fa-"]),
15
- &:has(> i[class*=" fa-"]) {
16
- gap: 0.125ch; /* =1/8 */
17
- }
18
-
19
13
  /* Helper to handle [fav]icons in links */
20
14
  > i {
21
15
  font-style: normal;
22
- float: left; /* ✅ Chrome ❌ Safari */
23
- text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
16
+ float: left; /* ✅ Chrome ❌ Safari */
17
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
24
18
 
19
+ /* Favicons */
25
20
  > img {
26
21
  height: 1.25em;
27
22
  margin-block: calc(-0.25em / 2);
23
+ display: inline-block; /* for Tailwind CSS Typography */
24
+ }
28
25
 
29
- /* for tw-typography (.prose) */
30
- display: inline-block;
26
+ /* Font Awesome */
27
+ &[class^="fa-"],
28
+ &[class*=" fa-"] {
29
+ line-height: inherit;
30
+ --fa-width: auto;
31
+ }
32
+ &.fa-lg {
33
+ line-height: normal;
31
34
  }
32
35
  }
33
36
  }
@@ -36,25 +39,15 @@ a {
36
39
 
37
40
  <!--section:docs-->
38
41
 
39
- Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
42
+ Use Blades' `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons. Compare:
40
43
 
41
- <big class="grid">
42
- <article><a href="https://blades.ninja/"> 🥷 Blades</a></article>
43
- <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
44
- </big>
45
-
46
- <big class="grid">
47
- <article><a href="https://any.digital/">
48
- <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"> any.digital
49
- </a></article>
50
- <article><a href="https://any.digital/">
51
- <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
52
- </a></article>
53
- </big>
54
-
55
- Or simply drop-in any Font Awesome icon (without wrapping it):
44
+ ---
56
45
 
57
- <big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
46
+ | Without Blades <hr class="lg"> | With Blades' `<i>`-helper <hr class="lg"> | Clean HTML without `<span>ning` <hr class="x2"> |
47
+ | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
48
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
49
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
50
+ | [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#) | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#) | `<a><i class="fa-..."></i> Text</a>` |
58
51
 
59
52
  ---
60
53
 
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.12"
5
+ spec.version = "0.27.0-beta.14"
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.12",
3
+ "version": "0.27.0-beta.15",
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/_table.css CHANGED
@@ -33,6 +33,9 @@ table {
33
33
  margin: 0;
34
34
  visibility: hidden;
35
35
 
36
+ &.lg {
37
+ width: 18ch;
38
+ }
36
39
  &.x2 {
37
40
  width: 24ch;
38
41
  }
package/src/link-icon.css CHANGED
@@ -2,32 +2,35 @@
2
2
  <!--section:code-->
3
3
  ```css */
4
4
  a {
5
- /* Display as inline flex, if it contains an icon */
5
+ /* If link contains an icon, use inline flex */
6
6
  &:has(> i) {
7
7
  display: inline-flex;
8
- align-items: center;
9
8
  gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
10
10
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
11
11
  }
12
12
 
13
- /* Font Awesome specials */
14
- &:has(> i[class^="fa-"]),
15
- &:has(> i[class*=" fa-"]) {
16
- gap: 0.125ch; /* =1/8 */
17
- }
18
-
19
13
  /* Helper to handle [fav]icons in links */
20
14
  > i {
21
15
  font-style: normal;
22
- float: left; /* ✅ Chrome ❌ Safari */
23
- text-underline-offset: 1em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
16
+ float: left; /* ✅ Chrome ❌ Safari */
17
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
24
18
 
19
+ /* Favicons */
25
20
  > img {
26
21
  height: 1.25em;
27
22
  margin-block: calc(-0.25em / 2);
23
+ display: inline-block; /* for Tailwind CSS Typography */
24
+ }
28
25
 
29
- /* for tw-typography (.prose) */
30
- display: inline-block;
26
+ /* Font Awesome */
27
+ &[class^="fa-"],
28
+ &[class*=" fa-"] {
29
+ line-height: inherit;
30
+ --fa-width: auto;
31
+ }
32
+ &.fa-lg {
33
+ line-height: normal;
31
34
  }
32
35
  }
33
36
  }
@@ -36,25 +39,15 @@ a {
36
39
 
37
40
  <!--section:docs-->
38
41
 
39
- Wrap icons, favicons, or even emojis inside links using simple `<i>`-helper to size them automatically and prevent underline. Compare:
42
+ Use Blades' `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons. Compare:
40
43
 
41
- <big class="grid">
42
- <article><a href="https://blades.ninja/"> 🥷 Blades</a></article>
43
- <article><a href="https://blades.ninja/"><i>🥷</i> Blades</a></article>
44
- </big>
45
-
46
- <big class="grid">
47
- <article><a href="https://any.digital/">
48
- <img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"> any.digital
49
- </a></article>
50
- <article><a href="https://any.digital/">
51
- <i><img src="https://www.google.com/s2/favicons?domain=any.digital&amp;sz=64"></i> any.digital
52
- </a></article>
53
- </big>
54
-
55
- Or simply drop-in any Font Awesome icon (without wrapping it):
44
+ ---
56
45
 
57
- <big><article><a href="https://github.com/anydigital/blades"><i class="fa-brands fa-github fa-lg"></i> /anydigital/blades</a></article></big>
46
+ | Without Blades <hr class="lg"> | With Blades' `<i>`-helper <hr class="lg"> | Clean HTML without `<span>ning` <hr class="x2"> |
47
+ | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
48
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
49
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
50
+ | [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#) | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#) | `<a><i class="fa-..."></i> Text</a>` |
58
51
 
59
52
  ---
60
53