@anydigital/blades 0.27.0-beta.11 → 0.27.0-beta.14

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 (8) hide show
  1. package/README.md +10 -2
  2. package/assets/blades.css +32 -17
  3. package/assets/link-icon.css +57 -0
  4. package/blades.gemspec +1 -1
  5. package/package.json +1 -1
  6. package/src/blades.css +1 -1
  7. package/src/link-icon.css +57 -0
  8. package/src/_link.css +0 -42
package/README.md CHANGED
@@ -30,7 +30,7 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
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/">🥷 Link [fav]icons →</a></li>
34
34
  <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
35
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
36
  <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
@@ -136,8 +136,16 @@ Or use a preconfigured template:
136
136
 
137
137
  - Featured by:
138
138
  - https://github.com/uhub/awesome-css
139
- - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
140
139
  - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
140
+ - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
141
+ - 🚀 [build-awesome-starter](https://github.com/anydigital/build-awesome-starter)
142
+ - 🚀 [bladeswitch starter](https://github.com/anydigital/bladeswitch)
143
+ - https://github.com/hostfurl/minformhf starter
144
+ - Showcase:
145
+ - https://any.digital/ (Pico ⁺ Blades)
146
+ - https://build.blades.ninja/ (Tailwind ⁺ Blades)
147
+ - https://bladeswitch.com/ (Pico ⁺ Blades)
148
+ - https://minform.hostfurl.com/ (Pico ⁺ Blades)
141
149
  - Credits:
142
150
  - https://picocss.com/ for inspiration
143
151
  - https://11ty.dev/ for build power
package/assets/blades.css CHANGED
@@ -282,17 +282,36 @@ ol {
282
282
  ```css */
283
283
 
284
284
  a {
285
+ /* If link contains an icon, use inline flex */
286
+ &:has(> i) {
287
+ display: inline-flex;
288
+ gap: 0.375ch; /* =3/8 */
289
+ text-wrap: balance;
290
+ overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
291
+ }
292
+
285
293
  /* Helper to handle [fav]icons in links */
286
294
  > i {
287
- display: inline-block;
288
295
  font-style: normal;
296
+ float: left; /* ✅ Chrome ❌ Safari */
297
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
289
298
 
299
+ /* Favicons */
290
300
  > img {
291
301
  height: 1.25em;
292
302
  margin-block: calc(-0.25em / 2);
303
+ display: inline-block; /* for Tailwind CSS Typography */
304
+ }
293
305
 
294
- /* for tw-typography (.prose) */
295
- display: inline-block;
306
+ /* Font Awesome */
307
+ &[class^="fa-"],
308
+ &[class*=" fa-"] {
309
+ line-height: inherit;
310
+ margin-inline-start: -0.25ch;
311
+ margin-inline-end: -0.125ch; /* =1/8 */
312
+ }
313
+ &.fa-lg {
314
+ line-height: normal;
296
315
  }
297
316
  }
298
317
  }
@@ -302,23 +321,19 @@ a {
302
321
 
303
322
  <!--section:docs-->
304
323
 
305
- ### Link [fav]icons
324
+ Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
306
325
 
307
- Wrap [fav]icons inside links using `<i>...&nbsp;</i>` helper to size automatically and avoid underline. Compare:
326
+ ---
327
+
328
+ | Without Blades <hr> | With Blades' `<i>` helper <hr> | Clean HTML without `<span>`ning |
329
+ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
330
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
331
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
332
+ | [<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>` |
308
333
 
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>
334
+ ---
313
335
 
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>
336
+ [How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
322
337
 
323
338
  <!--section--> */
324
339
 
package/assets/link-icon.css ADDED
@@ -0,0 +1,57 @@
1
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
2
+ <!--section:code-->
3
+ ```css */
4
+ a {
5
+ /* If link contains an icon, use inline flex */
6
+ &:has(> i) {
7
+ display: inline-flex;
8
+ gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
10
+ overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
11
+ }
12
+
13
+ /* Helper to handle [fav]icons in links */
14
+ > i {
15
+ font-style: normal;
16
+ float: left; /* ✅ Chrome ❌ Safari */
17
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
18
+
19
+ /* Favicons */
20
+ > img {
21
+ height: 1.25em;
22
+ margin-block: calc(-0.25em / 2);
23
+ display: inline-block; /* for Tailwind CSS Typography */
24
+ }
25
+
26
+ /* Font Awesome */
27
+ &[class^="fa-"],
28
+ &[class*=" fa-"] {
29
+ line-height: inherit;
30
+ margin-inline-start: -0.25ch;
31
+ margin-inline-end: -0.125ch; /* =1/8 */
32
+ }
33
+ &.fa-lg {
34
+ line-height: normal;
35
+ }
36
+ }
37
+ }
38
+ /*```
39
+ > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
40
+
41
+ <!--section:docs-->
42
+
43
+ Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
44
+
45
+ ---
46
+
47
+ | Without Blades <hr> | With Blades' `<i>` helper <hr> | Clean HTML without `<span>`ning |
48
+ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
49
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
50
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
51
+ | [<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>` |
52
+
53
+ ---
54
+
55
+ [How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
56
+
57
+ <!--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.11"
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.11",
3
+ "version": "0.27.0-beta.14",
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/blades.css CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  /* Content */
8
8
  @import "./_typography";
9
- @import "./_link";
9
+ @import "./link-icon";
10
10
  @import "./_table";
11
11
  @import "./responsive-table";
12
12
  @import "./_code";
package/src/link-icon.css ADDED
@@ -0,0 +1,57 @@
1
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
2
+ <!--section:code-->
3
+ ```css */
4
+ a {
5
+ /* If link contains an icon, use inline flex */
6
+ &:has(> i) {
7
+ display: inline-flex;
8
+ gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
10
+ overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
11
+ }
12
+
13
+ /* Helper to handle [fav]icons in links */
14
+ > i {
15
+ font-style: normal;
16
+ float: left; /* ✅ Chrome ❌ Safari */
17
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
18
+
19
+ /* Favicons */
20
+ > img {
21
+ height: 1.25em;
22
+ margin-block: calc(-0.25em / 2);
23
+ display: inline-block; /* for Tailwind CSS Typography */
24
+ }
25
+
26
+ /* Font Awesome */
27
+ &[class^="fa-"],
28
+ &[class*=" fa-"] {
29
+ line-height: inherit;
30
+ margin-inline-start: -0.25ch;
31
+ margin-inline-end: -0.125ch; /* =1/8 */
32
+ }
33
+ &.fa-lg {
34
+ line-height: normal;
35
+ }
36
+ }
37
+ }
38
+ /*```
39
+ > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
40
+
41
+ <!--section:docs-->
42
+
43
+ Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
44
+
45
+ ---
46
+
47
+ | Without Blades <hr> | With Blades' `<i>` helper <hr> | Clean HTML without `<span>`ning |
48
+ | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
49
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
50
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
51
+ | [<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>` |
52
+
53
+ ---
54
+
55
+ [How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
56
+
57
+ <!--section--> */
package/src/_link.css DELETED
@@ -1,42 +0,0 @@
1
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
2
- <!--section:code-->
3
- ```css */
4
- a {
5
- /* Helper to handle [fav]icons in links */
6
- > i {
7
- display: inline-block;
8
- font-style: normal;
9
-
10
- > img {
11
- height: 1.25em;
12
- margin-block: calc(-0.25em / 2);
13
-
14
- /* for tw-typography (.prose) */
15
- display: inline-block;
16
- }
17
- }
18
- }
19
- /*```
20
- > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
21
-
22
- <!--section:docs-->
23
-
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
-
42
- <!--section--> */