@anyblades/blades 2.2.1 → 2.2.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 (10) hide show
  1. package/README.md +8 -6
  2. package/_includes/blades/html.njk +2 -2
  3. package/assets/blades.css +26 -2
  4. package/assets/blades.standalone.core.css +29 -2
  5. package/assets/blades.standalone.css +29 -2
  6. package/assets/link-icon.css +1 -0
  7. package/blades.gemspec +1 -1
  8. package/package.json +1 -1
  9. package/src/content/_typography.css +29 -2
  10. package/src/link-icon.css +1 -0
package/README.md CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  <!--section:summary-->
4
4
 
5
- <h1><mark>Minimal CSS&nbsp;Framework</mark> <wbr> for Semantic&nbsp;HTML</h1>
5
+ <h1><mark>Minimal CSS Framework</mark> <small>for</small> Semantic HTML</h1>
6
6
 
7
7
  <big>Fully compatible and actively maintained successor to Pico CSS.</big>
8
8
 
9
- Includes [Float labels](https://blades.ninja/css/float-label/), [Breakout layout](https://blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css` or add `blades.standalone.css` to other frameworks.
9
+ Includes [Float labels](https://blades.ninja/css/float-label/), [Breakout layout](https://blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css` or use `blades.standalone.css` with other frameworks.
10
10
 
11
11
  <!--section:gh-only-->
12
12
 
@@ -20,7 +20,7 @@ There are 4 ways to get started:
20
20
 
21
21
  ### Install manually
22
22
 
23
- [Download Pico+*Bl*ades](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `assets/blades.css` in the `<head>` of your website.
23
+ [Download *Bl*ades](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `assets/blades.css` in the `<head>` of your website.
24
24
 
25
25
  ```html
26
26
  <link rel="stylesheet" href="assets/blades.css" />
@@ -163,15 +163,17 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
163
163
  - [https://github.com/@gabrielizalo/awesome-css](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
164
164
  - [https://github.com/@uhub/awesome-css](https://github.com/uhub/awesome-css)
165
165
  - [https://github.com/awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
166
- - [https://github.com/classless-css#float-label](https://github.com/dbohdan/classless-css#components:~:text=Float%20Label)
167
166
  - [https://sveltiacms.app/docs/start](https://sveltiacms.app/en/docs/start#starter-templates)
168
167
  - [https://www.youtube.com/@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
168
+ - [https://dummy.my/](https://dummy.my/frameworks/fw-blades-css/)
169
+ - [https://github.com/classless-css](https://github.com/dbohdan/classless-css#components:~:text=Float%20Label) for [Float label](https://blades.ninja/css/float-label/)
170
+ - [https://trendshift.io/](https://trendshift.io/repositories/29875) for [Pico fork](https://blades.ninja/css/pico/)
169
171
 
170
- <!--{.unlist .columns}-->
172
+ <!--{.markerless .columns}-->
171
173
 
172
174
  ## <sup>Credits</sup>
173
175
 
174
176
  - https://picocss.com/ as a [first-class citizen](https://blades.ninja/css/pico/)
175
177
  - https://11ty.dev/ for [this site generation](https://github.com/anyblades/blades.ninja)
176
178
 
177
- <!--{.unlist}-->
179
+ <!--{.markerless}-->
package/_includes/blades/html.njk CHANGED
@@ -18,14 +18,14 @@
18
18
  <link rel="stylesheet" href="{{ href }}" />
19
19
  {%- endfor %}
20
20
  {# prettier-ignore-start #}<style>
21
- {{ site.inline_styles | d([]) | join('\n') }}
21
+ {{ site.inline_styles | d([]) | join('\n') | safe }}
22
22
  </style>{# prettier-ignore-end #}
23
23
 
24
24
  {%- for src in site.scripts %}
25
25
  <script src="{{ src }}" defer></script>
26
26
  {%- endfor %}
27
27
  {# prettier-ignore-start #}<script type="module">
28
- {{ site.inline_scripts | d([]) | join('\n') }}
28
+ {{ site.inline_scripts | d([]) | join('\n') | safe }}
29
29
  </script>{# prettier-ignore-end #}
30
30
 
31
31
  {{ content_for_header | safe }}
package/assets/blades.css CHANGED
@@ -715,9 +715,32 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
715
715
  }
716
716
  /*```
717
717
 
718
+ ### Markerless
719
+
720
+ `.markerless` removes markers and reduces padding:
721
+
722
+ <article>
723
+
724
+ - 1️⃣ so you can use
725
+ - 2️⃣ emojis or images
726
+ - 3️⃣ instead of bullets
727
+
728
+ {.markerless}
729
+ </article>
730
+
731
+ How it works:
732
+ ```css */
733
+ ul.markerless, ol.markerless {
734
+ padding-inline-start: 1.25rem;
735
+ }
736
+ ul.markerless li, ol.markerless li {
737
+ list-style: none;
738
+ }
739
+ /*```
740
+
718
741
  ### Unlist
719
742
 
720
- `.unlist` removes list styling:
743
+ `.unlist` removes list styling at all:
721
744
 
722
745
  <article>
723
746
 
@@ -728,7 +751,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
728
751
  {.unlist .grid style=margin:0}
729
752
  </article>
730
753
 
731
- `.unlist-all` also removes styling from all nested lists.
754
+ `.unlist-all` removes styling from all nested lists too.
732
755
 
733
756
  How it works:
734
757
  ```css */
@@ -752,6 +775,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
752
775
  a:has(> i) {
753
776
  display: inline-flex;
754
777
  gap: 0.375ch; /* =3/8 */
778
+ text-wrap: balance;
755
779
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
756
780
  }
757
781
  a > i {
package/assets/blades.standalone.core.css CHANGED
@@ -274,9 +274,35 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
274
274
 
275
275
  /*```
276
276
 
277
+ ### Markerless
278
+
279
+ `.markerless` removes markers and reduces padding:
280
+
281
+ <article>
282
+
283
+ - 1️⃣ so you can use
284
+ - 2️⃣ emojis or images
285
+ - 3️⃣ instead of bullets
286
+
287
+ {.markerless}
288
+ </article>
289
+
290
+ How it works:
291
+ ```css */
292
+
293
+ ul.markerless, ol.markerless {
294
+ padding-inline-start: 1.25rem;
295
+ }
296
+
297
+ ul.markerless li, ol.markerless li {
298
+ list-style: none;
299
+ }
300
+
301
+ /*```
302
+
277
303
  ### Unlist
278
304
 
279
- `.unlist` removes list styling:
305
+ `.unlist` removes list styling at all:
280
306
 
281
307
  <article>
282
308
 
@@ -287,7 +313,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
287
313
  {.unlist .grid style=margin:0}
288
314
  </article>
289
315
 
290
- `.unlist-all` also removes styling from all nested lists.
316
+ `.unlist-all` removes styling from all nested lists too.
291
317
 
292
318
  How it works:
293
319
  ```css */
@@ -317,6 +343,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
317
343
  a:has(> i) {
318
344
  display: inline-flex;
319
345
  gap: 0.375ch; /* =3/8 */
346
+ text-wrap: balance;
320
347
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
321
348
  }
322
349
 
package/assets/blades.standalone.css CHANGED
@@ -274,9 +274,35 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
274
274
 
275
275
  /*```
276
276
 
277
+ ### Markerless
278
+
279
+ `.markerless` removes markers and reduces padding:
280
+
281
+ <article>
282
+
283
+ - 1️⃣ so you can use
284
+ - 2️⃣ emojis or images
285
+ - 3️⃣ instead of bullets
286
+
287
+ {.markerless}
288
+ </article>
289
+
290
+ How it works:
291
+ ```css */
292
+
293
+ ul.markerless, ol.markerless {
294
+ padding-inline-start: 1.25rem;
295
+ }
296
+
297
+ ul.markerless li, ol.markerless li {
298
+ list-style: none;
299
+ }
300
+
301
+ /*```
302
+
277
303
  ### Unlist
278
304
 
279
- `.unlist` removes list styling:
305
+ `.unlist` removes list styling at all:
280
306
 
281
307
  <article>
282
308
 
@@ -287,7 +313,7 @@ ul li[data-marker]::marker, ol li[data-marker]::marker {
287
313
  {.unlist .grid style=margin:0}
288
314
  </article>
289
315
 
290
- `.unlist-all` also removes styling from all nested lists.
316
+ `.unlist-all` removes styling from all nested lists too.
291
317
 
292
318
  How it works:
293
319
  ```css */
@@ -317,6 +343,7 @@ ul.unlist > li, ul.unlist-all > li, .unlist-all ul > li, ol.unlist > li, ol.unli
317
343
  a:has(> i) {
318
344
  display: inline-flex;
319
345
  gap: 0.375ch; /* =3/8 */
346
+ text-wrap: balance;
320
347
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
321
348
  }
322
349
 
package/assets/link-icon.css CHANGED
@@ -5,6 +5,7 @@
5
5
  a:has(> i) {
6
6
  display: inline-flex;
7
7
  gap: 0.375ch; /* =3/8 */
8
+ text-wrap: balance;
8
9
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
9
10
  }
10
11
  a > i {
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 = "2.2.1"
5
+ spec.version = "2.2.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": "@anyblades/blades",
3
- "version": "2.2.1",
3
+ "version": "2.2.2",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
5
5
  "exports": {
6
6
  ".": "./src/blades.standalone.css",
package/src/content/_typography.css CHANGED
@@ -80,9 +80,36 @@ ol {
80
80
  }
81
81
  /*```
82
82
 
83
+ ### Markerless
84
+
85
+ `.markerless` removes markers and reduces padding:
86
+
87
+ <article>
88
+
89
+ - 1️⃣ so you can use
90
+ - 2️⃣ emojis or images
91
+ - 3️⃣ instead of bullets
92
+
93
+ {.markerless}
94
+ </article>
95
+
96
+ How it works:
97
+ ```css */
98
+ ul,
99
+ ol {
100
+ &.markerless {
101
+ padding-inline-start: 1.25rem;
102
+
103
+ li {
104
+ list-style: none;
105
+ }
106
+ }
107
+ }
108
+ /*```
109
+
83
110
  ### Unlist
84
111
 
85
- `.unlist` removes list styling:
112
+ `.unlist` removes list styling at all:
86
113
 
87
114
  <article>
88
115
 
@@ -93,7 +120,7 @@ ol {
93
120
  {.unlist .grid style=margin:0}
94
121
  </article>
95
122
 
96
- `.unlist-all` also removes styling from all nested lists.
123
+ `.unlist-all` removes styling from all nested lists too.
97
124
 
98
125
  How it works:
99
126
  ```css */
package/src/link-icon.css CHANGED
@@ -6,6 +6,7 @@ a {
6
6
  &:has(> i) {
7
7
  display: inline-flex;
8
8
  gap: 0.375ch; /* =3/8 */
9
+ text-wrap: balance;
9
10
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
10
11
  }
11
12
  > i {