@anyblades/blades 0.28.0-alpha.3 → 0.28.0-alpha.5

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 (9) hide show
  1. package/README.md +39 -35
  2. package/_includes/blades/html.njk +1 -1
  3. package/assets/blades.core.css +10 -4
  4. package/assets/blades.css +10 -4
  5. package/assets/link-icon.css +1 -0
  6. package/blades.gemspec +1 -1
  7. package/package.json +1 -1
  8. package/src/_typography.css +9 -4
  9. package/src/link-icon.css +1 -0
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # 🥷 Blades <sup>![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=black&include_prereleases)</sup>
1
+ # 🥷 *Bl*ades
2
2
 
3
3
  <!--section:summary-->
4
4
 
@@ -6,43 +6,45 @@
6
6
 
7
7
  <big>Use with Pico, Simple, Tailwind, or any other CSS reset/framework.</big>
8
8
 
9
- <!--section:gh-only-->
10
-
11
- [![](https://img.shields.io/badge/Demo_&_Docs-darkslategray?style=for-the-badge)](https://blades.ninja/)
9
+ ![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=darkslategray&style=for-the-badge&include_prereleases)
10
+ [![](https://img.shields.io/badge/Code-gainsboro?logo=github&logoColor=black&style=for-the-badge)](https://github.com/anyblades/blades)
11
+ [![](https://img.shields.io/github/stars/anyblades/blades?label=Star&labelColor=gainsboro&color=silver&style=for-the-badge)](https://github.com/anyblades/blades)
12
12
 
13
- ---
13
+ <!--section:docs-->
14
14
 
15
- ## Documentation
15
+ ## [Docs & demos <i><small>→</small></i>](https://blades.ninja/css/)
16
16
 
17
17
  <!--section:docs,toc-->
18
-
19
- <!-- copy-paste of ToC from https://blades.ninja/css/ -->
18
+ <!--
19
+ 1. copy-paste ToC from https://blades.ninja/css/
20
+ 2. replace href="# => href="/css/#
21
+ 3. replace href="/ => href="https://blades.ninja/
22
+ -->
20
23
  <ul class="unlist columns">
21
- <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>
22
- <li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li>
23
- <li><a href="https://blades.ninja/css/#jump-to-top">Jump to top</a></li></ul></li>
24
- <li><a href="https://blades.ninja/css/#content">Content</a><ul><li><a href="https://blades.ninja/css/link-icon/"><i>🥷</i> Link [fav]icons</a></li>
25
- <li><a href="https://blades.ninja/css/#heading-anchors">Heading anchors</a></li>
26
- <li><a href="https://blades.ninja/css/#list-markers">List markers</a></li>
27
- <li><a href="https://blades.ninja/css/#unlist">Unlist</a></li>
28
- <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
29
- <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>
30
- <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
31
- <li><a href="https://blades.ninja/css/#borderless-table">Borderless table</a></li></ul></li>
32
- <li><a href="https://blades.ninja/css/#forms">Forms</a><ul><li><a href="https://blades.ninja/css/float-label/"><i>🥷</i> Float label without CSS classes</a></li></ul></li>
33
- <li><a href="https://blades.ninja/css/#utilities">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-dark">Auto-dark</a></li>
34
- <li><a href="https://blades.ninja/css/#faded">Faded</a></li>
35
- <li><a href="https://blades.ninja/css/#invert">Invert</a></li>
36
- <li><a href="https://blades.ninja/css/#unreduce-motion">Unreduce motion</a></li></ul></li>
37
- </ul>
24
+ <li><a href="https://blades.ninja/css/#install" tabindex="-1">Install</a></li>
25
+ <li><a href="https://blades.ninja/css/#layout" tabindex="-1">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/" tabindex="-1">Breakout elements →</a></li>
26
+ <li><a href="https://blades.ninja/css/#auto-columns" tabindex="-1">Auto-columns</a></li>
27
+ <li><a href="https://blades.ninja/css/#jump-to-top" tabindex="-1">Jump to top</a></li></ul></li>
28
+ <li><a href="https://blades.ninja/css/#content" tabindex="-1">Content</a><ul><li><a href="https://blades.ninja/css/link-icon/" tabindex="-1">Link [fav]icons →</a></li>
29
+ <li><a href="https://blades.ninja/css/#heading-anchors" tabindex="-1">Heading anchors</a></li>
30
+ <li><a href="https://blades.ninja/css/#list-markers" tabindex="-1">List markers</a></li>
31
+ <li><a href="https://blades.ninja/css/#unlist" tabindex="-1">Unlist</a></li>
32
+ <li><a href="https://blades.ninja/css/#code" tabindex="-1">Code</a></li></ul></li>
33
+ <li><a href="https://blades.ninja/css/#table" tabindex="-1">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/" tabindex="-1">Responsive table without wrapper →</a></li>
34
+ <li><a href="https://blades.ninja/css/#horizontal-expanders" tabindex="-1">Horizontal expanders</a></li>
35
+ <li><a href="https://blades.ninja/css/#borderless-table" tabindex="-1">Borderless table</a></li></ul></li>
36
+ <li><a href="https://blades.ninja/css/#forms" tabindex="-1">Forms</a><ul><li><a href="https://blades.ninja/css/float-label/" tabindex="-1">Float label without CSS classes →</a></li></ul></li>
37
+ <li><a href="https://blades.ninja/css/#utilities" tabindex="-1">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-dark" tabindex="-1">Auto-dark</a></li>
38
+ <li><a href="https://blades.ninja/css/#faded" tabindex="-1">Faded</a></li>
39
+ <li><a href="https://blades.ninja/css/#invert" tabindex="-1">Invert</a></li></ul></li></ul>
38
40
 
39
- <!--section:docs-->
41
+ <!--section:gh-only-->
40
42
 
41
43
  ---
42
44
 
43
45
  ## Install
44
46
 
45
- <!--section:docs,install-->
47
+ <!--section:install-->
46
48
 
47
49
  <mark>Via CDN:</mark>
48
50
 
@@ -67,7 +69,7 @@ Then in your `.css`:
67
69
 
68
70
  Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_styles/styles.css
69
71
 
70
- <!--section:docs,install,install-preconf-->
72
+ <!--section:install,install-preconf-->
71
73
 
72
74
  <mark>Preconfigured:</mark>
73
75
 
@@ -75,7 +77,7 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
75
77
  - 11ty: https://github.com/anyblades/build-awesome-starter
76
78
  - Jekyll: https://github.com/anyblades/bladeswitch or [as a theme](https://blades.ninja/jekyll/#install)
77
79
 
78
- <!--section:docs,install-->
80
+ <!--section:install-->
79
81
 
80
82
  ##### Default theme <small>(optional)</small>
81
83
 
@@ -87,20 +89,22 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
87
89
 
88
90
  - Featured by:
89
91
  - https://github.com/uhub/awesome-css
90
- - 🕶️ [awesome-css-frameworks](https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries/tree/master/Lightweight)
91
- - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
92
- - [https://11tybundle.dev/](https://11tybundle.dev/showcase/)
92
+ - https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/lightweight
93
+ - https://github.com/anydigital/awesome-11ty-build-awesome
94
+ - https://11tybundle.dev/blog/11ty-bundle-88/
93
95
  - [https://jekyll-themes.com/](https://jekyll-themes.com/anyblades/blades)
94
96
  - [https://sveltiacms.app/](https://sveltiacms.app/en/docs/start#starter-templates)
95
- - https://github.com/anyblades/build-awesome-starter
96
- - https://github.com/anyblades/bladeswitch starter
97
+ - ✨ [pico.css](https://github.com/anyblades/pico) community fork
98
+ - 🚀 [build-awesome-starter](https://github.com/anyblades/build-awesome-starter)
99
+ - 🚀 [bladeswitch](https://github.com/anyblades/bladeswitch) starter
97
100
  - Showcase:
98
101
  - https://any.digital/ (Pico + Blades)
99
102
  - https://build.blades.ninja/ (Tailwind + Blades)
100
103
  - https://bladeswitch.com/ (Pico + Blades)
101
104
  - https://minform.hostfurl.com/ (Pico + Blades)
105
+
102
106
  - Credits:
103
107
  - https://picocss.com/ for inspiration
104
108
  - https://11ty.dev/ for build power
105
109
 
106
- <!--{.unlist .columns}-->
110
+ <!--{.unlist-all .columns}-->
package/_includes/blades/html.njk CHANGED
@@ -28,7 +28,7 @@
28
28
  {{ site.inline_scripts | d([]) | join('\n') }}
29
29
  </script>{# prettier-ignore-end #}
30
30
 
31
- {{ content_for_header }}
31
+ {{ content_for_header | safe }}
32
32
  {% include 'blades/gtm.njk' %}
33
33
  </head>
34
34
 
package/assets/blades.core.css CHANGED
@@ -270,11 +270,16 @@ ol {
270
270
  Helper class to remove list styling at all:
271
271
  ```css */
272
272
 
273
- .unlist {
274
- padding-inline-start: 0;
273
+ ul,
274
+ ol {
275
+ &.unlist,
276
+ &.unlist-all,
277
+ .unlist-all & {
278
+ padding-inline-start: 0;
275
279
 
276
- > li {
277
- list-style: none;
280
+ > li {
281
+ list-style: none;
282
+ }
278
283
  }
279
284
  }
280
285
 
@@ -301,6 +306,7 @@ a {
301
306
  > img {
302
307
  height: 1.25em;
303
308
  margin-block-start: calc(-0.25em / 2);
309
+ max-width: none; /* to keep ratio safe */
304
310
  display: inline-block; /* for Tailwind CSS Typography */
305
311
  }
306
312
 
package/assets/blades.css CHANGED
@@ -270,11 +270,16 @@ ol {
270
270
  Helper class to remove list styling at all:
271
271
  ```css */
272
272
 
273
- .unlist {
274
- padding-inline-start: 0;
273
+ ul,
274
+ ol {
275
+ &.unlist,
276
+ &.unlist-all,
277
+ .unlist-all & {
278
+ padding-inline-start: 0;
275
279
 
276
- > li {
277
- list-style: none;
280
+ > li {
281
+ list-style: none;
282
+ }
278
283
  }
279
284
  }
280
285
 
@@ -301,6 +306,7 @@ a {
301
306
  > img {
302
307
  height: 1.25em;
303
308
  margin-block-start: calc(-0.25em / 2);
309
+ max-width: none; /* to keep ratio safe */
304
310
  display: inline-block; /* for Tailwind CSS Typography */
305
311
  }
306
312
 
package/assets/link-icon.css CHANGED
@@ -17,6 +17,7 @@ a {
17
17
  > img {
18
18
  height: 1.25em;
19
19
  margin-block-start: calc(-0.25em / 2);
20
+ max-width: none; /* to keep ratio safe */
20
21
  display: inline-block; /* for Tailwind CSS Typography */
21
22
  }
22
23
 
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.3"
5
+ spec.version = "0.28.0-alpha.5"
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": "0.28.0-alpha.3",
3
+ "version": "0.28.0-alpha.5",
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/_typography.css CHANGED
@@ -100,11 +100,16 @@ ol {
100
100
 
101
101
  Helper class to remove list styling at all:
102
102
  ```css */
103
- .unlist {
104
- padding-inline-start: 0;
103
+ ul,
104
+ ol {
105
+ &.unlist,
106
+ &.unlist-all,
107
+ .unlist-all & {
108
+ padding-inline-start: 0;
105
109
 
106
- > li {
107
- list-style: none;
110
+ > li {
111
+ list-style: none;
112
+ }
108
113
  }
109
114
  }
110
115
  /*```
package/src/link-icon.css CHANGED
@@ -17,6 +17,7 @@ a {
17
17
  > img {
18
18
  height: 1.25em;
19
19
  margin-block-start: calc(-0.25em / 2);
20
+ max-width: none; /* to keep ratio safe */
20
21
  display: inline-block; /* for Tailwind CSS Typography */
21
22
  }
22
23