@anyblades/blades 3.0.0-alpha.1 → 3.0.0-alpha.3

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 +7 -9
  2. package/_includes/blades/html.njk +1 -1
  3. package/_includes/blades/html.twig +1 -1
  4. package/css/blades.css +3 -3
  5. package/css/blades.min.css +1 -1
  6. package/css/blades.standalone.css +3 -3
  7. package/css/blades.standalone.min.css +1 -1
  8. package/package.json +1 -1
  9. package/src/standalone/layout/_breakout.css +2 -2
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <!--section:summary-->
6
6
 
7
- <h1><span class="mark-brand">Minimal CSS Framework</span> <small>for</small> Semantic HTML</h1>
7
+ <h1><b class="mark-brand">Minimal CSS Framework</b> <small>for</small> Semantic HTML</h1>
8
8
 
9
9
  <big>Fully compatible and actively maintained successor to [Pico CSS](//blades.ninja/css/pico/).</big>
10
10
 
@@ -42,13 +42,13 @@ Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with oth
42
42
  <!--prettier-ignore-->
43
43
  ```html
44
44
  <link rel="stylesheet" href="
45
- https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/blades.min.css
45
+ https://cdn.jsdelivr.net/npm/@anyblades/blades@^3.0.0-0/css/blades.min.css
46
46
  "/>
47
47
  ```
48
48
 
49
49
  Live example: https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html
50
50
 
51
- Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/
51
+ Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@^3.0.0-0/css/
52
52
 
53
53
  ### <mark>C.</mark> Install with NPM
54
54
 
@@ -56,7 +56,7 @@ Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades
56
56
  npm install @anyblades/blades
57
57
  ```
58
58
 
59
- Then, `@import` Blades into your CSS file:
59
+ Then, `@import` sources into your CSS file:
60
60
 
61
61
  ```css
62
62
  @import "@anyblades/blades";
@@ -82,9 +82,7 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
82
82
 
83
83
  ---
84
84
 
85
- ## Base HTML
86
-
87
- ### Static HTML template <!-- from /index.html -->
85
+ ## Starter HTML template <!-- from /index.html -->
88
86
 
89
87
  ```html
90
88
  <!doctype html>
@@ -104,9 +102,9 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
104
102
  </html>
105
103
  ```
106
104
 
107
- ### Dynamic HTML template
105
+ ### Dynamic templates
108
106
 
109
- [Available for Nunjucks, Twig or Liquid ↗](https://blades.ninja/html/base/)<!--{role=button .outline}-->
107
+ [Available for Nunjucks, Liquid and Twig ↗](https://blades.ninja/tpl/)<!--{role=button .outline}-->
110
108
 
111
109
  <!--section:gh-only-->
112
110
 
package/_includes/blades/html.njk CHANGED
@@ -5,7 +5,7 @@
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
7
 
8
- <title>{{ title | striptags }}{{ ' | ' if title and site.title }}{{ site.title }}</title>
8
+ <title>{{ title | striptags | replace('&nbsp;', ' ') }}{{ ' | ' if title and site.title }}{{ site.title }}</title>
9
9
  <meta name="description" content="{{ description | striptags }}" />
10
10
 
11
11
  <link rel="icon" href="{{ site.favicon | d('/favicon.ico') }}" />
package/_includes/blades/html.twig CHANGED
@@ -5,7 +5,7 @@
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
7
 
8
- <title>{{ title|striptags }}{% if title and site.title %} | {% endif %}{{ site.title }}</title>
8
+ <title>{{ title|striptags|replace({'&nbsp;': ' '}) }}{% if title and site.title %} | {% endif %}{{ site.title }}</title>
9
9
  <meta name="description" content="{{ description|striptags }}" />
10
10
 
11
11
  <link rel="icon" href="{{ site.favicon|default('/favicon.ico') }}" />
package/css/blades.css CHANGED
@@ -3296,17 +3296,17 @@ textarea,
3296
3296
 
3297
3297
  /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
3298
3298
 
3299
- .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
3299
+ .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr:not([class]) + *)::before {
3300
3300
  display: none !important;
3301
3301
  }
3302
3302
 
3303
- .breakout-all > *:is(hr) {
3303
+ .breakout-all > *:is(hr):not([class]) {
3304
3304
  height: 0.5rem;
3305
3305
  overflow: visible;
3306
3306
  border: none;
3307
3307
  }
3308
3308
 
3309
- .breakout-all > *:is(hr)::before {
3309
+ .breakout-all > *:is(hr):not([class])::before {
3310
3310
  left: 50%;
3311
3311
  width: 100dvw;
3312
3312
  height: 100%;
package/css/blades.min.css CHANGED
@@ -118,7 +118,7 @@ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
118
118
  table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
119
119
  ),.breakout>:is(
120
120
  table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
121
- ){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr)::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
121
+ ){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr:not([class]) + *)::before{display:none!important}.breakout-all>:is(hr):not([class]){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr):not([class])::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
122
122
  * Float Label CSS v2 by Blades CSS 🥷🏷️
123
123
  * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
124
124
  * Licensed under MIT
package/css/blades.standalone.css CHANGED
@@ -105,17 +105,17 @@
105
105
 
106
106
  /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
107
107
 
108
- .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
108
+ .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr:not([class]) + *)::before {
109
109
  display: none !important;
110
110
  }
111
111
 
112
- .breakout-all > *:is(hr) {
112
+ .breakout-all > *:is(hr):not([class]) {
113
113
  height: 0.5rem;
114
114
  overflow: visible;
115
115
  border: none;
116
116
  }
117
117
 
118
- .breakout-all > *:is(hr)::before {
118
+ .breakout-all > *:is(hr):not([class])::before {
119
119
  left: 50%;
120
120
  width: 100dvw;
121
121
  height: 100%;
package/css/blades.standalone.min.css CHANGED
@@ -10,7 +10,7 @@
10
10
  table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
11
11
  ),.breakout>:is(
12
12
  table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
13
- ){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr)::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
13
+ ){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr:not([class]) + *)::before{display:none!important}.breakout-all>:is(hr):not([class]){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr):not([class])::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
14
14
  * Float Label CSS v2 by Blades CSS 🥷🏷️
15
15
  * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
16
16
  * Licensed under MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anyblades/blades",
3
- "version": "3.0.0-alpha.1",
3
+ "version": "3.0.0-alpha.3",
4
4
  "exports": {
5
5
  ".": "./src/blades.css",
6
6
  "./pico": "./src/pico.css",
package/src/standalone/layout/_breakout.css CHANGED
@@ -67,13 +67,13 @@
67
67
  }
68
68
 
69
69
  /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
70
- &:where(hr + *) {
70
+ &:where(hr:not([class]) + *) {
71
71
  &::before {
72
72
  display: none !important;
73
73
  }
74
74
  }
75
75
  }
76
- &:is(hr) {
76
+ &:is(hr):not([class]) {
77
77
  height: 0.5rem;
78
78
  border: none;
79
79
  overflow: visible;