@anyblades/blades 0.28.0-alpha.2 → 0.28.0-alpha.4

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 (11) hide show
  1. package/README.md +42 -35
  2. package/_includes/blades/html.liquid +4 -1
  3. package/_includes/blades/html.njk +4 -1
  4. package/assets/blades.core.css +11 -5
  5. package/assets/blades.css +11 -5
  6. package/assets/link-icon.css +2 -1
  7. package/blades.gemspec +1 -1
  8. package/package.json +2 -3
  9. package/src/_typography.css +9 -4
  10. package/src/link-icon.css +2 -1
  11. package/src/_unreduce-motion.css +0 -16
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,41 +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/)
12
-
13
- ---
14
-
15
- ## Documentation
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)
16
12
 
17
13
  <!--section:docs-->
18
14
 
19
- <!-- copy-paste of ToC from https://blades.ninja/css/ -->
15
+ ## [Docs & Demos <i><small>→</small></i>](https://blades.ninja/css/)
16
+
17
+ <!--section:docs,toc-->
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>
40
+
41
+ <!--section:gh-only-->
38
42
 
39
43
  ---
40
44
 
41
45
  ## Install
42
46
 
43
- <!--section:docs,install-->
47
+ <!--section:install-->
44
48
 
45
49
  <mark>Via CDN:</mark>
46
50
 
@@ -65,14 +69,15 @@ Then in your `.css`:
65
69
 
66
70
  Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_styles/styles.css
67
71
 
68
- <!--section:docs,install,install-preconf-->
72
+ <!--section:install,install-preconf-->
69
73
 
70
74
  <mark>Preconfigured:</mark>
71
75
 
76
+ - Pico: https://github.com/anyblades/pico
72
77
  - 11ty: https://github.com/anyblades/build-awesome-starter
73
78
  - Jekyll: https://github.com/anyblades/bladeswitch or [as a theme](https://blades.ninja/jekyll/#install)
74
79
 
75
- <!--section:docs,install-->
80
+ <!--section:install-->
76
81
 
77
82
  ##### Default theme <small>(optional)</small>
78
83
 
@@ -84,20 +89,22 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
84
89
 
85
90
  - Featured by:
86
91
  - https://github.com/uhub/awesome-css
87
- - 🕶️ [awesome-css-frameworks](https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries/tree/master/Lightweight)
88
- - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
89
- - [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/
90
95
  - [https://jekyll-themes.com/](https://jekyll-themes.com/anyblades/blades)
91
96
  - [https://sveltiacms.app/](https://sveltiacms.app/en/docs/start#starter-templates)
92
- - https://github.com/anyblades/build-awesome-starter
93
- - 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
94
100
  - Showcase:
95
101
  - https://any.digital/ (Pico + Blades)
96
102
  - https://build.blades.ninja/ (Tailwind + Blades)
97
103
  - https://bladeswitch.com/ (Pico + Blades)
98
104
  - https://minform.hostfurl.com/ (Pico + Blades)
105
+
99
106
  - Credits:
100
107
  - https://picocss.com/ for inspiration
101
108
  - https://11ty.dev/ for build power
102
109
 
103
- <!--{.unlist .columns}-->
110
+ <!--{.unlist-all .columns}-->
package/_includes/blades/html.liquid CHANGED
@@ -4,7 +4,10 @@
4
4
  <head>
5
5
  <meta charset="utf-8">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
7
- <link rel="icon" href="{{ site.favicon | default: '/favicon.ico' }}">
7
+ <link rel="icon" href="{{ site.favicon | default: '/favicon.svg' }}">
8
+ {% if site.favicon_alt %}
9
+ <link rel="alternate icon" href="{{ site.favicon_alt }}" type="image/png">
10
+ {% endif %}
8
11
  <title>
9
12
  {%- if title %}{{ title | strip_html | append: ' | ' }}{% endif -%}
10
13
  {{- site.title -}}
package/_includes/blades/html.njk CHANGED
@@ -4,7 +4,10 @@
4
4
  <head>
5
5
  <meta charset="utf-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
7
- <link rel="icon" href="{{ site.favicon | d('/favicon.ico') }}" />
7
+ <link rel="icon" href="{{ site.favicon | d('/favicon.svg') }}" />
8
+ {% if site.favicon_alt %}
9
+ <link rel="alternate icon" href="{{ site.favicon_alt }}" type="image/png" />
10
+ {% endif %}
8
11
  <title>
9
12
  {{- title | string | striptags ~ ' | ' if title -}}
10
13
  {{- site.title -}}
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
 
@@ -300,7 +305,8 @@ a {
300
305
  /* Favicons */
301
306
  > img {
302
307
  height: 1.25em;
303
- margin-block: calc(-0.25em / 2);
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
 
@@ -300,7 +305,8 @@ a {
300
305
  /* Favicons */
301
306
  > img {
302
307
  height: 1.25em;
303
- margin-block: calc(-0.25em / 2);
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
@@ -16,7 +16,8 @@ a {
16
16
  /* Favicons */
17
17
  > img {
18
18
  height: 1.25em;
19
- margin-block: calc(-0.25em / 2);
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.2"
5
+ spec.version = "0.28.0-alpha.4"
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,14 +1,13 @@
1
1
  {
2
2
  "name": "@anyblades/blades",
3
- "version": "0.28.0-alpha.2",
3
+ "version": "0.28.0-alpha.4",
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": {
7
7
  ".": "./src/blades.css",
8
8
  "./core": "./src/blades.core.css",
9
9
  "./theme": "./src/blades.theme.css",
10
- "./float-label": "./src/float-label.css",
11
- "./unreduce-motion": "./src/_unreduce-motion.css"
10
+ "./float-label": "./src/float-label.css"
12
11
  },
13
12
  "scripts": {
14
13
  "postcss": "postcss './src/!(_)*.css' --dir ./assets",
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
@@ -16,7 +16,8 @@ a {
16
16
  /* Favicons */
17
17
  > img {
18
18
  height: 1.25em;
19
- margin-block: calc(-0.25em / 2);
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/src/_unreduce-motion.css DELETED
@@ -1,16 +0,0 @@
1
- /* Overrides https://github.com/picocss/pico/blob/main/scss/utilities/_reduce-motion.scss
2
- <!--section:docs-->
3
-
4
- ### Unreduce motion
5
- ```css */
6
- @utility unreduce-animation-* {
7
- @media (prefers-reduced-motion: reduce) {
8
- &:not([aria-busy="true"]) {
9
- animation-duration: --value([ *]) !important;
10
- animation-delay: 0 !important;
11
- animation-iteration-count: infinite !important;
12
- }
13
- }
14
- }
15
- /*```
16
- <!--section--> */