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

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 (12) hide show
  1. package/README.md +81 -56
  2. package/assets/blades.css +62 -50
  3. package/assets/responsive-table.css +0 -1
  4. package/blades.gemspec +1 -1
  5. package/package.json +1 -1
  6. package/src/_code.css +1 -0
  7. package/src/_layout.css +36 -3
  8. package/src/_link.css +3 -4
  9. package/src/_table.css +2 -2
  10. package/src/_typography.css +10 -2
  11. package/src/_utilities.css +6 -35
  12. package/src/responsive-table.css +0 -1
package/README.md CHANGED
@@ -1,4 +1,4 @@
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
 
@@ -6,44 +6,49 @@
6
6
 
7
7
  <big>Use with Pico, Tailwind, or any other CSS reset/framework.</big>
8
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)
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/Docs_&_Demos-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)
22
+ <hgroup id="css"><small>Class-light</small>
39
23
 
40
- {.columns}
24
+ ## [CSS blades](https://blades.ninja/css/)
41
25
 
42
- </big>
26
+ inspired by Pico.css
43
27
 
44
- <details><summary role="button" class="outline">Install CSS blades</summary>
28
+ </hgroup>
45
29
 
46
- <mark>Option 1.</mark> From CDN:
30
+ <!-- copy-paste of ToC from https://blades.ninja/css/ -->
31
+ <ul class="unlist columns">
32
+ <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>
33
+ <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
34
+ <li><a href="https://blades.ninja/css/#borderless-table">Borderless table</a></li></ul></li>
35
+ <li><a href="https://blades.ninja/css/#content">Content</a><ul><li><a href="https://blades.ninja/css/#link-fav-icons">Link [fav]icons</a></li>
36
+ <li><a href="https://blades.ninja/css/#heading-anchors">Heading anchors</a></li>
37
+ <li><a href="https://blades.ninja/css/#list-markers">List markers</a></li>
38
+ <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
39
+ <li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/">🥷 Breakout elements →</a></li>
40
+ <li><a href="https://blades.ninja/css/#document">Document</a></li>
41
+ <li><a href="https://blades.ninja/css/#landmarks">Landmarks</a></li>
42
+ <li><a href="https://blades.ninja/css/#table-of-contents">Table of contents</a></li>
43
+ <li><a href="https://blades.ninja/css/#jump-to-top">Jump to top</a></li></ul></li>
44
+ <li><a href="https://blades.ninja/css/#utilities">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li>
45
+ <li><a href="https://blades.ninja/css/#auto-dark">Auto-dark</a></li>
46
+ <li><a href="https://blades.ninja/css/#misc">Misc</a></li></ul></li></ul>
47
+
48
+ <!--section:index,install-css-->
49
+ <details><summary role="button" class="outline"><b>Install CSS blades</b></summary>
50
+
51
+ <mark>Option A.</mark> From CDN:
47
52
 
48
53
  <!--prettier-ignore-->
49
54
  ```html
@@ -51,7 +56,7 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
51
56
  <link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.theme.min.css" rel="stylesheet" /><!-- optional -->
52
57
  ```
53
58
 
54
- <mark>Option 2.</mark> Via npm:
59
+ <mark>Option B.</mark> Via npm:
55
60
 
56
61
  ```sh
57
62
  npm install @anydigital/blades
@@ -67,26 +72,26 @@ Then import in your .css:
67
72
  Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_styles/styles.css
68
73
 
69
74
  </details>
75
+ <!--section:index-->
70
76
 
71
77
  ---
72
78
 
73
- <hgroup>
74
- <small>Nunjucks / Liquid</small>
75
- <h2>HTML blades</h2>
76
- <p>for 11ty/Build Awesome, Jekyll, etc.</p>
77
- </hgroup>
79
+ <hgroup><small>Nunjucks / Liquid</small>
78
80
 
79
- <big>
81
+ ## [HTML blades](https://blades.ninja/html/)
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
+ for 11ty/Build Awesome, Jekyll, etc.
84
84
 
85
- {.columns}
85
+ </hgroup>
86
86
 
87
- </big>
87
+ - [Base HTML](https://blades.ninja/html/#base) {data-marker=🥷}
88
+ - [Links](https://blades.ninja/html/#links)
89
+ - [Google Tag Manager](https://blades.ninja/html/#gtm)
90
+
91
+ {.columns}
88
92
 
89
- <details><summary role="button" class="outline">Install HTML blades</summary>
93
+ <!--section:index,install-html-->
94
+ <details><summary role="button" class="outline"><b>Install HTML blades</b></summary>
90
95
 
91
96
  ```sh
92
97
  npm install @anydigital/blades
@@ -111,28 +116,48 @@ or:
111
116
 
112
117
  </details>
113
118
 
119
+ <!--section:gh-only-->
120
+
114
121
  ---
115
122
 
116
- <hgroup>
117
- <small>Open-source</small>
118
- <h2>Starter blades</h2><i></i>
119
- </hgroup>
123
+ <!--section:appendix-->
124
+
125
+ <hgroup><small>Old-school</small><h2>Jekyll blades</h2><p></p></hgroup>
120
126
 
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>
127
+ All CSS and HTML blades above are available as a Jekyll theme:
128
+
129
+ <details><summary role="button" class="outline"><b>Install as Jekyll theme</b></summary>
130
+
131
+ In you `_config.yml`:
132
+
133
+ ```yaml
134
+ remote_theme: anydigital/blades@v0.27.0-beta # or latest
135
+ plugins:
136
+ - jekyll-remote-theme
137
+ ```
138
+
139
+ Living example: https://github.com/anydigital/bladeswitch/blob/main/_config.yml
140
+
141
+ </details>
142
+
143
+ Or use a preconfigured template:
144
+
145
+ [🥷 Bladeswitch Starter ↗ &nbsp;<small style="white-space: nowrap">Jekyll ⁺ Pico ⁺ Blades</small>](https://github.com/anydigital/bladeswitch){role=button .outline}
133
146
 
134
147
  ---
135
148
 
149
+ <div class="grid"><div>
150
+
136
151
  Featured by:
137
152
 
138
153
  - https://github.com/uhub/awesome-css
154
+ - [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome) list
155
+
156
+ </div><div>
157
+
158
+ Credits:
159
+
160
+ - https://picocss.com/ for inspiration
161
+ - https://11ty.dev/ for build power
162
+
163
+ </div></div>
package/assets/blades.css CHANGED
@@ -2,7 +2,10 @@
2
2
 
3
3
  /* Layout */
4
4
 
5
- /* <!--section:docs-->
5
+ /*
6
+ <!--section:docs-->
7
+
8
+ ### Document
6
9
  Extends https://github.com/picocss/pico/blob/main/scss/layout/_document.scss
7
10
 
8
11
  Prevent horizontal overflow and scrolling, modern way:
@@ -14,7 +17,7 @@ html {
14
17
 
15
18
  /*```
16
19
 
17
- ## Landmarks
20
+ ### Landmarks
18
21
  Extends https://github.com/picocss/pico/blob/main/scss/layout/_landmarks.scss
19
22
 
20
23
  1. Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
@@ -31,7 +34,41 @@ body {
31
34
  }
32
35
  }
33
36
 
34
- /*``` <!--section--> */
37
+ /*```
38
+
39
+ ### Table of contents
40
+ ```css */
41
+
42
+ [data-is-toc] {
43
+ font-size: 87.5%;
44
+
45
+ a {
46
+ text-decoration: none;
47
+ }
48
+ > ul {
49
+ columns: 30ch auto; /* 2 cols max for 65ch container */
50
+ }
51
+ }
52
+
53
+ /*```
54
+
55
+ ### Jump to top
56
+ ```css */
57
+
58
+ [data-jump-to="top"] {
59
+ position: fixed;
60
+ bottom: 0;
61
+ right: 0;
62
+ padding-top: 50vh;
63
+ opacity: 25%;
64
+
65
+ &:hover {
66
+ opacity: 75%;
67
+ }
68
+ }
69
+
70
+ /*```
71
+ <!--section--> */
35
72
 
36
73
  /* <!--section:code-->```css */
37
74
 
@@ -152,7 +189,7 @@ body {
152
189
 
153
190
  /*
154
191
  <!--section:docs-->
155
- ## Heading anchors
192
+ ### Heading anchors
156
193
  ```css */
157
194
 
158
195
  h1,
@@ -181,7 +218,7 @@ h6 {
181
218
 
182
219
  /*```
183
220
 
184
- ## List markers
221
+ ### List markers
185
222
  ```css */
186
223
 
187
224
  ul,
@@ -189,11 +226,20 @@ ol {
189
226
  li[data-marker]::marker {
190
227
  content: attr(data-marker) " ";
191
228
  }
229
+
230
+ &.unlist {
231
+ padding-inline-start: 0;
232
+
233
+ > li {
234
+ list-style: none;
235
+ }
236
+ }
192
237
  }
193
238
 
194
239
  /*``` <!--section--> */
195
240
 
196
- /* <!--section:code-->```css */
241
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
242
+ <!--section:code-->```css */
197
243
 
198
244
  a {
199
245
  /* Helper to handle icons in links */
@@ -220,13 +266,11 @@ a {
220
266
 
221
267
  /*```
222
268
  <!--section:docs-->
223
- Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
224
-
225
- ## Link [fav]icons
269
+ ### Link [fav]icons
226
270
  <!--section--> */
227
271
 
228
- /* <!--section:docs-->
229
- Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
272
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
273
+ <!--section:docs-->
230
274
 
231
275
  ### Horizontal expanders
232
276
 
@@ -316,7 +360,6 @@ Soft-increase selector specificity trick:
316
360
 
317
361
  `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
318
362
  <!--section:docs-->
319
- ### Responsive table without wrapper
320
363
  `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
321
364
  <div>
322
365
 
@@ -331,6 +374,7 @@ Tables inside `.breakout[-all]` are responsive by default.
331
374
  <!--section--> */
332
375
 
333
376
  /* <!--section:docs-->
377
+ ### Code
334
378
  Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
335
379
  ```css */
336
380
 
@@ -380,46 +424,14 @@ code {
380
424
 
381
425
  /* Utilities */
382
426
 
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
- /*```
427
+ /*
428
+ <!--section:docs-->
417
429
 
418
- ## Auto-columns
430
+ ### Auto-columns
419
431
  ```css */
420
432
 
421
433
  .columns {
422
- columns: 20ch auto; /* 3 cols max for 65ch container */
434
+ columns: 30ch auto; /* 2 cols max for 65ch container */
423
435
 
424
436
  /* Avoid breaking inside elements, such as nested lists */
425
437
  > * {
@@ -429,7 +441,7 @@ code {
429
441
 
430
442
  /*```
431
443
 
432
- ## Auto-dark
444
+ ### Auto-dark
433
445
  ```css */
434
446
 
435
447
  @media (prefers-color-scheme: dark) {
@@ -442,7 +454,7 @@ code {
442
454
 
443
455
  /*```
444
456
 
445
- ## Other
457
+ ### Misc
446
458
  ```css */
447
459
 
448
460
  .faded {
package/assets/responsive-table.css CHANGED
@@ -29,7 +29,6 @@ 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
  <!--section:docs-->
32
- ### Responsive table without wrapper
33
32
  `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
34
33
  <div>
35
34
 
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.2"
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.2",
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,4 +1,7 @@
1
- /* <!--section:docs-->
1
+ /*
2
+ <!--section:docs-->
3
+
4
+ ### Document
2
5
  Extends https://github.com/picocss/pico/blob/main/scss/layout/_document.scss
3
6
 
4
7
  Prevent horizontal overflow and scrolling, modern way:
@@ -8,7 +11,7 @@ html {
8
11
  }
9
12
  /*```
10
13
 
11
- ## Landmarks
14
+ ### Landmarks
12
15
  Extends https://github.com/picocss/pico/blob/main/scss/layout/_landmarks.scss
13
16
 
14
17
  1. Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
@@ -23,4 +26,34 @@ body {
23
26
  flex-grow: 1;
24
27
  }
25
28
  }
26
- /*``` <!--section--> */
29
+ /*```
30
+
31
+ ### Table of contents
32
+ ```css */
33
+ [data-is-toc] {
34
+ font-size: 87.5%;
35
+
36
+ a {
37
+ text-decoration: none;
38
+ }
39
+ > ul {
40
+ columns: 30ch auto; /* 2 cols max for 65ch container */
41
+ }
42
+ }
43
+ /*```
44
+
45
+ ### Jump to top
46
+ ```css */
47
+ [data-jump-to="top"] {
48
+ position: fixed;
49
+ bottom: 0;
50
+ right: 0;
51
+ padding-top: 50vh;
52
+ opacity: 25%;
53
+
54
+ &:hover {
55
+ opacity: 75%;
56
+ }
57
+ }
58
+ /*```
59
+ <!--section--> */
package/src/_link.css CHANGED
@@ -1,4 +1,5 @@
1
- /* <!--section:code-->```css */
1
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
2
+ <!--section:code-->```css */
2
3
  a {
3
4
  /* Helper to handle icons in links */
4
5
  > i {
@@ -23,7 +24,5 @@ a {
23
24
  }
24
25
  /*```
25
26
  <!--section:docs-->
26
- Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
27
-
28
- ## Link [fav]icons
27
+ ### Link [fav]icons
29
28
  <!--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
 
package/src/_typography.css CHANGED
@@ -16,7 +16,7 @@ body {
16
16
  }
17
17
  /*
18
18
  <!--section:docs-->
19
- ## Heading anchors
19
+ ### Heading anchors
20
20
  ```css */
21
21
  h1,
22
22
  h2,
@@ -43,12 +43,20 @@ h6 {
43
43
  }
44
44
  /*```
45
45
 
46
- ## List markers
46
+ ### List markers
47
47
  ```css */
48
48
  ul,
49
49
  ol {
50
50
  li[data-marker]::marker {
51
51
  content: attr(data-marker) " ";
52
52
  }
53
+
54
+ &.unlist {
55
+ padding-inline-start: 0;
56
+
57
+ > li {
58
+ list-style: none;
59
+ }
60
+ }
53
61
  }
54
62
  /*``` <!--section--> */
package/src/_utilities.css CHANGED
@@ -1,39 +1,10 @@
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
4
+ ### Auto-columns
34
5
  ```css */
35
6
  .columns {
36
- columns: 20ch auto; /* 3 cols max for 65ch container */
7
+ columns: 30ch auto; /* 2 cols max for 65ch container */
37
8
 
38
9
  /* Avoid breaking inside elements, such as nested lists */
39
10
  > * {
@@ -42,7 +13,7 @@
42
13
  }
43
14
  /*```
44
15
 
45
- ## Auto-dark
16
+ ### Auto-dark
46
17
  ```css */
47
18
  @media (prefers-color-scheme: dark) {
48
19
  :root:not([data-theme="light"]) {
@@ -53,7 +24,7 @@
53
24
  }
54
25
  /*```
55
26
 
56
- ## Other
27
+ ### Misc
57
28
  ```css */
58
29
  .faded {
59
30
  opacity: 50%;
package/src/responsive-table.css CHANGED
@@ -29,7 +29,6 @@ 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
  <!--section:docs-->
32
- ### Responsive table without wrapper
33
32
  `<table class="responsive">` allows a table to full-bleed and scroll on mobile:
34
33
  <div>
35
34