@anyblades/blades 0.28.0-alpha.6 → 0.28.0-alpha.7
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/_includes/blades/html.liquid +0 -3
- package/_includes/blades/html.njk +0 -2
- package/_includes/blades/links.liquid +1 -7
- package/_includes/blades/sitemap.xml.njk +15 -2
- package/assets/blades.core.css +30 -48
- package/assets/blades.css +32 -52
- package/assets/blades.theme.css +1 -3
- package/assets/breakout.css +3 -10
- package/assets/link-icon.css +4 -6
- package/assets/responsive-table.css +1 -6
- package/blades.gemspec +1 -1
- package/package.json +1 -1
- package/src/blades.theme.css +1 -3
- package/src/breakout.css +3 -10
- package/src/content/_code.css +3 -3
- package/src/content/_table.css +16 -20
- package/src/content/_typography.css +4 -4
- package/src/link-icon.css +4 -6
- package/src/responsive-table.css +1 -6
- package/_includes/blades/gtm.liquid +0 -39
- package/_includes/blades/gtm.njk +0 -42
|
@@ -12,16 +12,10 @@
|
|
|
12
12
|
{% # prettier-ignore %}
|
|
13
13
|
{% comment %}```
|
|
14
14
|
<!--section:docs-->
|
|
15
|
-
Usage
|
|
15
|
+
Usage example for https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually:
|
|
16
16
|
|
|
17
17
|
```liquid
|
|
18
18
|
{% assign links = collections.all | eleventyNavigation %}
|
|
19
19
|
{% render blades/links, links: links, current_url: page.url %}
|
|
20
20
|
```
|
|
21
|
-
|
|
22
|
-
Usage inside Pico's Navar:
|
|
23
|
-
|
|
24
|
-
```jinja2
|
|
25
|
-
TBD
|
|
26
|
-
```
|
|
27
21
|
<!--section-->{% endcomment %}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
{# Based on https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk
|
|
2
|
+
<!--section:code-->```jinja2 #}<?xml
|
|
3
|
+
version="1.0" encoding="utf-8"?>
|
|
2
4
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
|
3
5
|
{%- for page in collections.all %}
|
|
4
6
|
{% if page.data.permalink != false %}
|
|
@@ -9,4 +11,15 @@
|
|
|
9
11
|
{% endif %}
|
|
10
12
|
{%- endfor %}
|
|
11
13
|
</urlset>
|
|
12
|
-
{
|
|
14
|
+
{#```
|
|
15
|
+
<!--section:docs-->
|
|
16
|
+
Usage example for https://github.com/11ty/eleventy-plugin-rss:
|
|
17
|
+
```jinja2 {data-caption=sitemap.xml.njk}
|
|
18
|
+
---
|
|
19
|
+
permalink: /sitemap.xml
|
|
20
|
+
layout: false
|
|
21
|
+
eleventyExcludeFromCollections: true
|
|
22
|
+
---
|
|
23
|
+
{% include 'blades/sitemap.xml.njk' %}
|
|
24
|
+
```
|
|
25
|
+
<!--section--> #}
|
package/assets/blades.core.css
CHANGED
|
@@ -52,8 +52,7 @@ Useful for tables of contents and long lists.
|
|
|
52
52
|
<!--section--> */
|
|
53
53
|
|
|
54
54
|
/*
|
|
55
|
-
<!--section:
|
|
56
|
-
<details>How it works:
|
|
55
|
+
<!--section:code-->
|
|
57
56
|
```css */
|
|
58
57
|
|
|
59
58
|
.breakout,
|
|
@@ -138,8 +137,6 @@ Useful for tables of contents and long lists.
|
|
|
138
137
|
}
|
|
139
138
|
|
|
140
139
|
/*```
|
|
141
|
-
</details>
|
|
142
|
-
|
|
143
140
|
<!--section:summary-->
|
|
144
141
|
|
|
145
142
|
The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
|
|
@@ -162,18 +159,14 @@ Or table:
|
|
|
162
159
|
Or code block:
|
|
163
160
|
|
|
164
161
|
```html
|
|
165
|
-
<p>
|
|
166
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur
|
|
167
|
-
adipisicing elit. Quisquam, quod.
|
|
168
|
-
</p>
|
|
162
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
|
|
169
163
|
```
|
|
170
164
|
|
|
171
165
|
Or anything else:
|
|
172
166
|
|
|
173
167
|
<article class="breakout-item-max" data-theme="dark">
|
|
174
168
|
|
|
175
|
-
Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
|
|
176
|
-
|
|
169
|
+
Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
|
|
177
170
|
</article>
|
|
178
171
|
|
|
179
172
|
<div><hr></div>
|
|
@@ -262,13 +255,11 @@ ol {
|
|
|
262
255
|
list-style-type: inherit;
|
|
263
256
|
}
|
|
264
257
|
}
|
|
265
|
-
|
|
266
258
|
li[style*="--list-marker:"] {
|
|
267
259
|
list-style-type: var(--list-marker);
|
|
268
260
|
}
|
|
269
261
|
li[data-marker]::marker {
|
|
270
|
-
|
|
271
|
-
content: attr(data-marker) " ";
|
|
262
|
+
content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
|
|
272
263
|
}
|
|
273
264
|
}
|
|
274
265
|
|
|
@@ -277,7 +268,7 @@ ol {
|
|
|
277
268
|
|
|
278
269
|
### Unlist
|
|
279
270
|
|
|
280
|
-
|
|
271
|
+
`.unlist` removes list styling:
|
|
281
272
|
|
|
282
273
|
<article>
|
|
283
274
|
|
|
@@ -288,6 +279,8 @@ Helper class to remove list styling at all:
|
|
|
288
279
|
{.unlist .grid style=margin:0}
|
|
289
280
|
</article>
|
|
290
281
|
|
|
282
|
+
`.unlist-all` also removes styling from all nested lists.
|
|
283
|
+
|
|
291
284
|
<details>How it works:
|
|
292
285
|
```css */
|
|
293
286
|
|
|
@@ -309,8 +302,7 @@ ol {
|
|
|
309
302
|
<!--section--> */
|
|
310
303
|
|
|
311
304
|
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
|
|
312
|
-
<!--section:
|
|
313
|
-
<details>How it works:
|
|
305
|
+
<!--section:code-->
|
|
314
306
|
```css */
|
|
315
307
|
|
|
316
308
|
a {
|
|
@@ -346,15 +338,14 @@ a {
|
|
|
346
338
|
}
|
|
347
339
|
|
|
348
340
|
/*```
|
|
349
|
-
</details>
|
|
350
|
-
|
|
351
341
|
How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
|
|
352
342
|
|
|
353
343
|
**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
|
|
354
344
|
|
|
355
345
|
<!--section:summary-->
|
|
356
346
|
|
|
357
|
-
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
|
|
347
|
+
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
|
|
348
|
+
It automatically handles sizing and alignment while preventing underline on icons.
|
|
358
349
|
|
|
359
350
|
<!--section:docs-->
|
|
360
351
|
|
|
@@ -367,7 +358,7 @@ Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome
|
|
|
367
358
|
| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#) | `<a><i class="fa-..."></i> Text</a>` |
|
|
368
359
|
</article>
|
|
369
360
|
|
|
370
|
-
Or even:
|
|
361
|
+
Or even for:
|
|
371
362
|
|
|
372
363
|
<article>
|
|
373
364
|
<a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
|
|
@@ -384,14 +375,12 @@ Place `<hr>` element inside `<th>` column to expand it horizontally:
|
|
|
384
375
|
|
|
385
376
|
<article>
|
|
386
377
|
|
|
387
|
-
| Column with `<hr
|
|
388
|
-
| --- | --- |
|
|
378
|
+
| Column with `<hr>`<hr> | Same column without `<hr>` | ... {style=width:100%} |
|
|
379
|
+
| --- | --- | --- |
|
|
389
380
|
| (012) 345-6789 | (012) 345-6789 |
|
|
390
|
-
|
|
391
|
-
{style=max-width:30ch}
|
|
392
381
|
</article>
|
|
393
382
|
|
|
394
|
-
Living examples of big tables with `<hr>`-expanders:
|
|
383
|
+
Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
|
|
395
384
|
- https://blades.ninja/ai/ide/
|
|
396
385
|
- https://blades.ninja/build-awesome-11ty/starters/
|
|
397
386
|
- https://blades.ninja/css/frameworks/
|
|
@@ -400,20 +389,18 @@ Living examples of big tables with `<hr>`-expanders:
|
|
|
400
389
|
<details>How it works:
|
|
401
390
|
```css */
|
|
402
391
|
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
visibility: hidden;
|
|
392
|
+
th {
|
|
393
|
+
hr {
|
|
394
|
+
width: 12ch; /* min ~65/12 = ~5 cols */
|
|
395
|
+
height: 0;
|
|
396
|
+
margin: 0;
|
|
397
|
+
visibility: hidden;
|
|
410
398
|
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
}
|
|
399
|
+
&.lg {
|
|
400
|
+
width: 18ch;
|
|
401
|
+
}
|
|
402
|
+
&.x2 {
|
|
403
|
+
width: 24ch;
|
|
417
404
|
}
|
|
418
405
|
}
|
|
419
406
|
}
|
|
@@ -429,7 +416,7 @@ table {
|
|
|
429
416
|
|
|
430
417
|
| Less | borders |
|
|
431
418
|
| ---- | ------- |
|
|
432
|
-
|
|
|
419
|
+
| More | fun |
|
|
433
420
|
|
|
434
421
|
{.borderless}
|
|
435
422
|
</article>
|
|
@@ -446,8 +433,7 @@ table.borderless {
|
|
|
446
433
|
}
|
|
447
434
|
|
|
448
435
|
/*
|
|
449
|
-
<!--section:
|
|
450
|
-
<details>How it works:
|
|
436
|
+
<!--section:code-->
|
|
451
437
|
```css */
|
|
452
438
|
|
|
453
439
|
table.responsive,
|
|
@@ -475,14 +461,11 @@ table.responsive,
|
|
|
475
461
|
}
|
|
476
462
|
|
|
477
463
|
/*```
|
|
478
|
-
</details>
|
|
479
|
-
|
|
480
464
|
`table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
481
465
|
|
|
482
466
|
<!--section:summary-->
|
|
483
467
|
|
|
484
468
|
`.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
|
|
485
|
-
|
|
486
469
|
Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
487
470
|
|
|
488
471
|
<!--section:docs-->
|
|
@@ -498,7 +481,6 @@ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
|
498
481
|
---
|
|
499
482
|
|
|
500
483
|
Living examples: <!--A-Z-->
|
|
501
|
-
|
|
502
484
|
- https://blades.ninja/ai/ide/
|
|
503
485
|
- https://blades.ninja/build-awesome-11ty/starters/
|
|
504
486
|
- https://blades.ninja/css/frameworks/
|
|
@@ -513,12 +495,12 @@ Living examples: <!--A-Z-->
|
|
|
513
495
|
|
|
514
496
|
The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
|
|
515
497
|
|
|
516
|
-
```treeview {data-caption="
|
|
498
|
+
```treeview {data-caption="Blades CSS:"}
|
|
499
|
+
./assets/
|
|
517
500
|
├── blades.core.css # reusable class-light utilities, unthemed
|
|
518
501
|
├── blades.theme.css # minimal opinionated theme
|
|
519
502
|
└── blades.css # above two together
|
|
520
503
|
```
|
|
521
|
-
|
|
522
504
|
<details>How it works:
|
|
523
505
|
```css */
|
|
524
506
|
|
|
@@ -526,7 +508,7 @@ pre {
|
|
|
526
508
|
padding: 1rem 1.5rem;
|
|
527
509
|
padding-inline-end: 2rem;
|
|
528
510
|
|
|
529
|
-
@media
|
|
511
|
+
@media (max-width: 767px) {
|
|
530
512
|
border-radius: 0;
|
|
531
513
|
}
|
|
532
514
|
}
|
package/assets/blades.css
CHANGED
|
@@ -52,8 +52,7 @@ Useful for tables of contents and long lists.
|
|
|
52
52
|
<!--section--> */
|
|
53
53
|
|
|
54
54
|
/*
|
|
55
|
-
<!--section:
|
|
56
|
-
<details>How it works:
|
|
55
|
+
<!--section:code-->
|
|
57
56
|
```css */
|
|
58
57
|
|
|
59
58
|
.breakout,
|
|
@@ -138,8 +137,6 @@ Useful for tables of contents and long lists.
|
|
|
138
137
|
}
|
|
139
138
|
|
|
140
139
|
/*```
|
|
141
|
-
</details>
|
|
142
|
-
|
|
143
140
|
<!--section:summary-->
|
|
144
141
|
|
|
145
142
|
The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
|
|
@@ -162,18 +159,14 @@ Or table:
|
|
|
162
159
|
Or code block:
|
|
163
160
|
|
|
164
161
|
```html
|
|
165
|
-
<p>
|
|
166
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur
|
|
167
|
-
adipisicing elit. Quisquam, quod.
|
|
168
|
-
</p>
|
|
162
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
|
|
169
163
|
```
|
|
170
164
|
|
|
171
165
|
Or anything else:
|
|
172
166
|
|
|
173
167
|
<article class="breakout-item-max" data-theme="dark">
|
|
174
168
|
|
|
175
|
-
Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
|
|
176
|
-
|
|
169
|
+
Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
|
|
177
170
|
</article>
|
|
178
171
|
|
|
179
172
|
<div><hr></div>
|
|
@@ -262,13 +255,11 @@ ol {
|
|
|
262
255
|
list-style-type: inherit;
|
|
263
256
|
}
|
|
264
257
|
}
|
|
265
|
-
|
|
266
258
|
li[style*="--list-marker:"] {
|
|
267
259
|
list-style-type: var(--list-marker);
|
|
268
260
|
}
|
|
269
261
|
li[data-marker]::marker {
|
|
270
|
-
|
|
271
|
-
content: attr(data-marker) " ";
|
|
262
|
+
content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
|
|
272
263
|
}
|
|
273
264
|
}
|
|
274
265
|
|
|
@@ -277,7 +268,7 @@ ol {
|
|
|
277
268
|
|
|
278
269
|
### Unlist
|
|
279
270
|
|
|
280
|
-
|
|
271
|
+
`.unlist` removes list styling:
|
|
281
272
|
|
|
282
273
|
<article>
|
|
283
274
|
|
|
@@ -288,6 +279,8 @@ Helper class to remove list styling at all:
|
|
|
288
279
|
{.unlist .grid style=margin:0}
|
|
289
280
|
</article>
|
|
290
281
|
|
|
282
|
+
`.unlist-all` also removes styling from all nested lists.
|
|
283
|
+
|
|
291
284
|
<details>How it works:
|
|
292
285
|
```css */
|
|
293
286
|
|
|
@@ -309,8 +302,7 @@ ol {
|
|
|
309
302
|
<!--section--> */
|
|
310
303
|
|
|
311
304
|
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
|
|
312
|
-
<!--section:
|
|
313
|
-
<details>How it works:
|
|
305
|
+
<!--section:code-->
|
|
314
306
|
```css */
|
|
315
307
|
|
|
316
308
|
a {
|
|
@@ -346,15 +338,14 @@ a {
|
|
|
346
338
|
}
|
|
347
339
|
|
|
348
340
|
/*```
|
|
349
|
-
</details>
|
|
350
|
-
|
|
351
341
|
How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
|
|
352
342
|
|
|
353
343
|
**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
|
|
354
344
|
|
|
355
345
|
<!--section:summary-->
|
|
356
346
|
|
|
357
|
-
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
|
|
347
|
+
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
|
|
348
|
+
It automatically handles sizing and alignment while preventing underline on icons.
|
|
358
349
|
|
|
359
350
|
<!--section:docs-->
|
|
360
351
|
|
|
@@ -367,7 +358,7 @@ Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome
|
|
|
367
358
|
| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#) | `<a><i class="fa-..."></i> Text</a>` |
|
|
368
359
|
</article>
|
|
369
360
|
|
|
370
|
-
Or even:
|
|
361
|
+
Or even for:
|
|
371
362
|
|
|
372
363
|
<article>
|
|
373
364
|
<a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
|
|
@@ -384,14 +375,12 @@ Place `<hr>` element inside `<th>` column to expand it horizontally:
|
|
|
384
375
|
|
|
385
376
|
<article>
|
|
386
377
|
|
|
387
|
-
| Column with `<hr
|
|
388
|
-
| --- | --- |
|
|
378
|
+
| Column with `<hr>`<hr> | Same column without `<hr>` | ... {style=width:100%} |
|
|
379
|
+
| --- | --- | --- |
|
|
389
380
|
| (012) 345-6789 | (012) 345-6789 |
|
|
390
|
-
|
|
391
|
-
{style=max-width:30ch}
|
|
392
381
|
</article>
|
|
393
382
|
|
|
394
|
-
Living examples of big tables with `<hr>`-expanders:
|
|
383
|
+
Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
|
|
395
384
|
- https://blades.ninja/ai/ide/
|
|
396
385
|
- https://blades.ninja/build-awesome-11ty/starters/
|
|
397
386
|
- https://blades.ninja/css/frameworks/
|
|
@@ -400,20 +389,18 @@ Living examples of big tables with `<hr>`-expanders:
|
|
|
400
389
|
<details>How it works:
|
|
401
390
|
```css */
|
|
402
391
|
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
width: 24ch;
|
|
416
|
-
}
|
|
392
|
+
th {
|
|
393
|
+
hr {
|
|
394
|
+
width: 12ch; /* min ~65/12 = ~5 cols */
|
|
395
|
+
height: 0;
|
|
396
|
+
margin: 0;
|
|
397
|
+
visibility: hidden;
|
|
398
|
+
|
|
399
|
+
&.lg {
|
|
400
|
+
width: 18ch;
|
|
401
|
+
}
|
|
402
|
+
&.x2 {
|
|
403
|
+
width: 24ch;
|
|
417
404
|
}
|
|
418
405
|
}
|
|
419
406
|
}
|
|
@@ -429,7 +416,7 @@ table {
|
|
|
429
416
|
|
|
430
417
|
| Less | borders |
|
|
431
418
|
| ---- | ------- |
|
|
432
|
-
|
|
|
419
|
+
| More | fun |
|
|
433
420
|
|
|
434
421
|
{.borderless}
|
|
435
422
|
</article>
|
|
@@ -446,8 +433,7 @@ table.borderless {
|
|
|
446
433
|
}
|
|
447
434
|
|
|
448
435
|
/*
|
|
449
|
-
<!--section:
|
|
450
|
-
<details>How it works:
|
|
436
|
+
<!--section:code-->
|
|
451
437
|
```css */
|
|
452
438
|
|
|
453
439
|
table.responsive,
|
|
@@ -475,14 +461,11 @@ table.responsive,
|
|
|
475
461
|
}
|
|
476
462
|
|
|
477
463
|
/*```
|
|
478
|
-
</details>
|
|
479
|
-
|
|
480
464
|
`table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
481
465
|
|
|
482
466
|
<!--section:summary-->
|
|
483
467
|
|
|
484
468
|
`.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
|
|
485
|
-
|
|
486
469
|
Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
487
470
|
|
|
488
471
|
<!--section:docs-->
|
|
@@ -498,7 +481,6 @@ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
|
498
481
|
---
|
|
499
482
|
|
|
500
483
|
Living examples: <!--A-Z-->
|
|
501
|
-
|
|
502
484
|
- https://blades.ninja/ai/ide/
|
|
503
485
|
- https://blades.ninja/build-awesome-11ty/starters/
|
|
504
486
|
- https://blades.ninja/css/frameworks/
|
|
@@ -513,12 +495,12 @@ Living examples: <!--A-Z-->
|
|
|
513
495
|
|
|
514
496
|
The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
|
|
515
497
|
|
|
516
|
-
```treeview {data-caption="
|
|
498
|
+
```treeview {data-caption="Blades CSS:"}
|
|
499
|
+
./assets/
|
|
517
500
|
├── blades.core.css # reusable class-light utilities, unthemed
|
|
518
501
|
├── blades.theme.css # minimal opinionated theme
|
|
519
502
|
└── blades.css # above two together
|
|
520
503
|
```
|
|
521
|
-
|
|
522
504
|
<details>How it works:
|
|
523
505
|
```css */
|
|
524
506
|
|
|
@@ -526,7 +508,7 @@ pre {
|
|
|
526
508
|
padding: 1rem 1.5rem;
|
|
527
509
|
padding-inline-end: 2rem;
|
|
528
510
|
|
|
529
|
-
@media
|
|
511
|
+
@media (max-width: 767px) {
|
|
530
512
|
border-radius: 0;
|
|
531
513
|
}
|
|
532
514
|
}
|
|
@@ -686,8 +668,7 @@ Historically, this was not possible: the float label had to be placed after the
|
|
|
686
668
|
}
|
|
687
669
|
|
|
688
670
|
/*
|
|
689
|
-
<!--section:
|
|
690
|
-
<details>How it works:
|
|
671
|
+
<!--section:code-->
|
|
691
672
|
```css */
|
|
692
673
|
|
|
693
674
|
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
@@ -830,5 +811,4 @@ table {
|
|
|
830
811
|
}
|
|
831
812
|
|
|
832
813
|
/*```
|
|
833
|
-
</details>
|
|
834
814
|
<!--section--> */
|
package/assets/blades.theme.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
<!--section:
|
|
3
|
-
<details>How it works:
|
|
2
|
+
<!--section:code-->
|
|
4
3
|
```css */
|
|
5
4
|
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
6
5
|
.has-float-label {
|
|
@@ -130,5 +129,4 @@ table {
|
|
|
130
129
|
}
|
|
131
130
|
}
|
|
132
131
|
/*```
|
|
133
|
-
</details>
|
|
134
132
|
<!--section--> */
|
package/assets/breakout.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
<!--section:
|
|
3
|
-
<details>How it works:
|
|
2
|
+
<!--section:code-->
|
|
4
3
|
```css */
|
|
5
4
|
.breakout,
|
|
6
5
|
.breakout-all {
|
|
@@ -82,8 +81,6 @@
|
|
|
82
81
|
}
|
|
83
82
|
}
|
|
84
83
|
/*```
|
|
85
|
-
</details>
|
|
86
|
-
|
|
87
84
|
<!--section:summary-->
|
|
88
85
|
|
|
89
86
|
The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
|
|
@@ -106,18 +103,14 @@ Or table:
|
|
|
106
103
|
Or code block:
|
|
107
104
|
|
|
108
105
|
```html
|
|
109
|
-
<p>
|
|
110
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur
|
|
111
|
-
adipisicing elit. Quisquam, quod.
|
|
112
|
-
</p>
|
|
106
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
|
|
113
107
|
```
|
|
114
108
|
|
|
115
109
|
Or anything else:
|
|
116
110
|
|
|
117
111
|
<article class="breakout-item-max" data-theme="dark">
|
|
118
112
|
|
|
119
|
-
Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
|
|
120
|
-
|
|
113
|
+
Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
|
|
121
114
|
</article>
|
|
122
115
|
|
|
123
116
|
<div><hr></div>
|
package/assets/link-icon.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
|
|
2
|
-
<!--section:
|
|
3
|
-
<details>How it works:
|
|
2
|
+
<!--section:code-->
|
|
4
3
|
```css */
|
|
5
4
|
a {
|
|
6
5
|
/* Use inline flex only if link contains an icon */
|
|
@@ -34,15 +33,14 @@ a {
|
|
|
34
33
|
}
|
|
35
34
|
}
|
|
36
35
|
/*```
|
|
37
|
-
</details>
|
|
38
|
-
|
|
39
36
|
How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
|
|
40
37
|
|
|
41
38
|
**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
|
|
42
39
|
|
|
43
40
|
<!--section:summary-->
|
|
44
41
|
|
|
45
|
-
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
|
|
42
|
+
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
|
|
43
|
+
It automatically handles sizing and alignment while preventing underline on icons.
|
|
46
44
|
|
|
47
45
|
<!--section:docs-->
|
|
48
46
|
|
|
@@ -55,7 +53,7 @@ Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome
|
|
|
55
53
|
| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#) | `<a><i class="fa-..."></i> Text</a>` |
|
|
56
54
|
</article>
|
|
57
55
|
|
|
58
|
-
Or even:
|
|
56
|
+
Or even for:
|
|
59
57
|
|
|
60
58
|
<article>
|
|
61
59
|
<a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
<!--section:
|
|
3
|
-
<details>How it works:
|
|
2
|
+
<!--section:code-->
|
|
4
3
|
```css */
|
|
5
4
|
table.responsive,
|
|
6
5
|
.breakout > table:not(.does-not-exist),
|
|
@@ -26,14 +25,11 @@ table.responsive,
|
|
|
26
25
|
}
|
|
27
26
|
}
|
|
28
27
|
/*```
|
|
29
|
-
</details>
|
|
30
|
-
|
|
31
28
|
`table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
32
29
|
|
|
33
30
|
<!--section:summary-->
|
|
34
31
|
|
|
35
32
|
`.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
|
|
36
|
-
|
|
37
33
|
Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
38
34
|
|
|
39
35
|
<!--section:docs-->
|
|
@@ -49,7 +45,6 @@ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
|
49
45
|
---
|
|
50
46
|
|
|
51
47
|
Living examples: <!--A-Z-->
|
|
52
|
-
|
|
53
48
|
- https://blades.ninja/ai/ide/
|
|
54
49
|
- https://blades.ninja/build-awesome-11ty/starters/
|
|
55
50
|
- https://blades.ninja/css/frameworks/
|
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.28.0-alpha.
|
|
5
|
+
spec.version = "0.28.0-alpha.7"
|
|
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
package/src/blades.theme.css
CHANGED
package/src/breakout.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
<!--section:
|
|
3
|
-
<details>How it works:
|
|
2
|
+
<!--section:code-->
|
|
4
3
|
```css */
|
|
5
4
|
.breakout,
|
|
6
5
|
.breakout-all {
|
|
@@ -83,8 +82,6 @@
|
|
|
83
82
|
}
|
|
84
83
|
}
|
|
85
84
|
/*```
|
|
86
|
-
</details>
|
|
87
|
-
|
|
88
85
|
<!--section:summary-->
|
|
89
86
|
|
|
90
87
|
The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
|
|
@@ -107,18 +104,14 @@ Or table:
|
|
|
107
104
|
Or code block:
|
|
108
105
|
|
|
109
106
|
```html
|
|
110
|
-
<p>
|
|
111
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur
|
|
112
|
-
adipisicing elit. Quisquam, quod.
|
|
113
|
-
</p>
|
|
107
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
|
|
114
108
|
```
|
|
115
109
|
|
|
116
110
|
Or anything else:
|
|
117
111
|
|
|
118
112
|
<article class="breakout-item-max" data-theme="dark">
|
|
119
113
|
|
|
120
|
-
Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
|
|
121
|
-
|
|
114
|
+
Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
|
|
122
115
|
</article>
|
|
123
116
|
|
|
124
117
|
<div><hr></div>
|
package/src/content/_code.css
CHANGED
|
@@ -5,19 +5,19 @@
|
|
|
5
5
|
|
|
6
6
|
The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
|
|
7
7
|
|
|
8
|
-
```treeview {data-caption="
|
|
8
|
+
```treeview {data-caption="Blades CSS:"}
|
|
9
|
+
./assets/
|
|
9
10
|
├── blades.core.css # reusable class-light utilities, unthemed
|
|
10
11
|
├── blades.theme.css # minimal opinionated theme
|
|
11
12
|
└── blades.css # above two together
|
|
12
13
|
```
|
|
13
|
-
|
|
14
14
|
<details>How it works:
|
|
15
15
|
```css */
|
|
16
16
|
pre {
|
|
17
17
|
padding: 1rem 1.5rem;
|
|
18
18
|
padding-inline-end: 2rem;
|
|
19
19
|
|
|
20
|
-
@media
|
|
20
|
+
@media (max-width: 767px) {
|
|
21
21
|
border-radius: 0;
|
|
22
22
|
}
|
|
23
23
|
}
|
package/src/content/_table.css
CHANGED
|
@@ -7,14 +7,12 @@ Place `<hr>` element inside `<th>` column to expand it horizontally:
|
|
|
7
7
|
|
|
8
8
|
<article>
|
|
9
9
|
|
|
10
|
-
| Column with `<hr
|
|
11
|
-
| --- | --- |
|
|
10
|
+
| Column with `<hr>`<hr> | Same column without `<hr>` | ... {style=width:100%} |
|
|
11
|
+
| --- | --- | --- |
|
|
12
12
|
| (012) 345-6789 | (012) 345-6789 |
|
|
13
|
-
|
|
14
|
-
{style=max-width:30ch}
|
|
15
13
|
</article>
|
|
16
14
|
|
|
17
|
-
Living examples of big tables with `<hr>`-expanders:
|
|
15
|
+
Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
|
|
18
16
|
- https://blades.ninja/ai/ide/
|
|
19
17
|
- https://blades.ninja/build-awesome-11ty/starters/
|
|
20
18
|
- https://blades.ninja/css/frameworks/
|
|
@@ -22,20 +20,18 @@ Living examples of big tables with `<hr>`-expanders:
|
|
|
22
20
|
|
|
23
21
|
<details>How it works:
|
|
24
22
|
```css */
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
width: 24ch;
|
|
38
|
-
}
|
|
23
|
+
th {
|
|
24
|
+
hr {
|
|
25
|
+
width: 12ch; /* min ~65/12 = ~5 cols */
|
|
26
|
+
height: 0;
|
|
27
|
+
margin: 0;
|
|
28
|
+
visibility: hidden;
|
|
29
|
+
|
|
30
|
+
&.lg {
|
|
31
|
+
width: 18ch;
|
|
32
|
+
}
|
|
33
|
+
&.x2 {
|
|
34
|
+
width: 24ch;
|
|
39
35
|
}
|
|
40
36
|
}
|
|
41
37
|
}
|
|
@@ -50,7 +46,7 @@ table {
|
|
|
50
46
|
|
|
51
47
|
| Less | borders |
|
|
52
48
|
| ---- | ------- |
|
|
53
|
-
|
|
|
49
|
+
| More | fun |
|
|
54
50
|
|
|
55
51
|
{.borderless}
|
|
56
52
|
</article>
|
|
@@ -70,13 +70,11 @@ ol {
|
|
|
70
70
|
list-style-type: inherit;
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
|
-
|
|
74
73
|
li[style*="--list-marker:"] {
|
|
75
74
|
list-style-type: var(--list-marker);
|
|
76
75
|
}
|
|
77
76
|
li[data-marker]::marker {
|
|
78
|
-
|
|
79
|
-
content: attr(data-marker) " ";
|
|
77
|
+
content: attr(data-marker) " "; /* ⚠️ Chrome and Firefox only */
|
|
80
78
|
}
|
|
81
79
|
}
|
|
82
80
|
/*```
|
|
@@ -84,7 +82,7 @@ ol {
|
|
|
84
82
|
|
|
85
83
|
### Unlist
|
|
86
84
|
|
|
87
|
-
|
|
85
|
+
`.unlist` removes list styling:
|
|
88
86
|
|
|
89
87
|
<article>
|
|
90
88
|
|
|
@@ -95,6 +93,8 @@ Helper class to remove list styling at all:
|
|
|
95
93
|
{.unlist .grid style=margin:0}
|
|
96
94
|
</article>
|
|
97
95
|
|
|
96
|
+
`.unlist-all` also removes styling from all nested lists.
|
|
97
|
+
|
|
98
98
|
<details>How it works:
|
|
99
99
|
```css */
|
|
100
100
|
ul,
|
package/src/link-icon.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
|
|
2
|
-
<!--section:
|
|
3
|
-
<details>How it works:
|
|
2
|
+
<!--section:code-->
|
|
4
3
|
```css */
|
|
5
4
|
a {
|
|
6
5
|
/* Use inline flex only if link contains an icon */
|
|
@@ -34,15 +33,14 @@ a {
|
|
|
34
33
|
}
|
|
35
34
|
}
|
|
36
35
|
/*```
|
|
37
|
-
</details>
|
|
38
|
-
|
|
39
36
|
How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
|
|
40
37
|
|
|
41
38
|
**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
|
|
42
39
|
|
|
43
40
|
<!--section:summary-->
|
|
44
41
|
|
|
45
|
-
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
|
|
42
|
+
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
|
|
43
|
+
It automatically handles sizing and alignment while preventing underline on icons.
|
|
46
44
|
|
|
47
45
|
<!--section:docs-->
|
|
48
46
|
|
|
@@ -55,7 +53,7 @@ Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome
|
|
|
55
53
|
| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#) | `<a><i class="fa-..."></i> Text</a>` |
|
|
56
54
|
</article>
|
|
57
55
|
|
|
58
|
-
Or even:
|
|
56
|
+
Or even for:
|
|
59
57
|
|
|
60
58
|
<article>
|
|
61
59
|
<a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
|
package/src/responsive-table.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
<!--section:
|
|
3
|
-
<details>How it works:
|
|
2
|
+
<!--section:code-->
|
|
4
3
|
```css */
|
|
5
4
|
table.responsive,
|
|
6
5
|
.breakout > table:not(.does-not-exist),
|
|
@@ -26,14 +25,11 @@ table.responsive,
|
|
|
26
25
|
}
|
|
27
26
|
}
|
|
28
27
|
/*```
|
|
29
|
-
</details>
|
|
30
|
-
|
|
31
28
|
`table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
32
29
|
|
|
33
30
|
<!--section:summary-->
|
|
34
31
|
|
|
35
32
|
`.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
|
|
36
|
-
|
|
37
33
|
Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
38
34
|
|
|
39
35
|
<!--section:docs-->
|
|
@@ -49,7 +45,6 @@ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
|
49
45
|
---
|
|
50
46
|
|
|
51
47
|
Living examples: <!--A-Z-->
|
|
52
|
-
|
|
53
48
|
- https://blades.ninja/ai/ide/
|
|
54
49
|
- https://blades.ninja/build-awesome-11ty/starters/
|
|
55
50
|
- https://blades.ninja/css/frameworks/
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
{% comment %}<!--section:code-->```liquid{% endcomment %}
|
|
2
|
-
{% if site.prod and site.gtm_id %}
|
|
3
|
-
{% capture _ %}
|
|
4
|
-
{% unless for_body %}
|
|
5
|
-
|
|
6
|
-
<!-- Google Tag Manager -->
|
|
7
|
-
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
8
|
-
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
9
|
-
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
10
|
-
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
11
|
-
})(window,document,'script','dataLayer','{{ site.gtm_id }}');</script>
|
|
12
|
-
<!-- End Google Tag Manager -->
|
|
13
|
-
|
|
14
|
-
{% else %}
|
|
15
|
-
|
|
16
|
-
<!-- Google Tag Manager (noscript) -->
|
|
17
|
-
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm_id }}"
|
|
18
|
-
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
19
|
-
<!-- End Google Tag Manager (noscript) -->
|
|
20
|
-
|
|
21
|
-
{% endunless %}
|
|
22
|
-
{% endcapture %}
|
|
23
|
-
{{ _ | strip }}
|
|
24
|
-
{% endif %}
|
|
25
|
-
<!--prettier-ignore-->
|
|
26
|
-
{% comment %}```
|
|
27
|
-
<!--section:docs-->
|
|
28
|
-
Usage in Liquid:
|
|
29
|
-
```liquid
|
|
30
|
-
...
|
|
31
|
-
{% include blades/gtm.liquid %}
|
|
32
|
-
</head>
|
|
33
|
-
<body>
|
|
34
|
-
{% include blades/gtm.liquid for_body=true %}
|
|
35
|
-
...
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
Living example: https://github.com/anyblades/blades/blob/main/_includes/blades/html.liquid
|
|
39
|
-
<!--section-->{% endcomment %}
|
package/_includes/blades/gtm.njk
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
{# <!--section:code-->```jinja2 #}
|
|
2
|
-
{% if site.prod and site.gtm_id %}
|
|
3
|
-
{# prettier-ignore-start #}
|
|
4
|
-
{% if not for_body %}
|
|
5
|
-
|
|
6
|
-
<!-- Google Tag Manager -->
|
|
7
|
-
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
8
|
-
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
9
|
-
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
10
|
-
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
11
|
-
})(window,document,'script','dataLayer','{{ site.gtm_id }}');</script>
|
|
12
|
-
<!-- End Google Tag Manager -->
|
|
13
|
-
|
|
14
|
-
{% else %}
|
|
15
|
-
|
|
16
|
-
<!-- Google Tag Manager (noscript) -->
|
|
17
|
-
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm_id }}"
|
|
18
|
-
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
19
|
-
<!-- End Google Tag Manager (noscript) -->
|
|
20
|
-
|
|
21
|
-
{% endif %}
|
|
22
|
-
{# prettier-ignore-end #}
|
|
23
|
-
{% endif %}
|
|
24
|
-
{#```
|
|
25
|
-
<!--section:docs-->
|
|
26
|
-
Usage in Nunjucks:
|
|
27
|
-
```jinja2
|
|
28
|
-
...
|
|
29
|
-
{% include 'blades/gtm.njk' %}
|
|
30
|
-
</head>
|
|
31
|
-
<body>
|
|
32
|
-
{% set for_body = true %}{% include 'blades/gtm.njk' %}
|
|
33
|
-
...
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
Living example: https://github.com/anyblades/blades/blob/main/_includes/blades/html.njk
|
|
37
|
-
|
|
38
|
-
Parameters:
|
|
39
|
-
- `site.gtm_id` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
|
|
40
|
-
- `site.prod` - Boolean flag to enable GTM only in production
|
|
41
|
-
- `for_body` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
|
|
42
|
-
<!--section--> #}
|