@anyblades/blades 0.30.0 → 2.2.1

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 (8) hide show
  1. package/README.md +91 -36
  2. package/_includes/blades/sitemap.xml.njk +2 -2
  3. package/assets/blades.css +2 -2
  4. package/assets/blades.standalone.core.css +2 -2
  5. package/assets/blades.standalone.css +2 -2
  6. package/blades.gemspec +1 -1
  7. package/package.json +1 -2
  8. package/src/content/_typography.css +2 -2
package/README.md CHANGED
@@ -1,41 +1,15 @@
1
- # 🥷 *Bl*ades
1
+ # 🥷 *Bl*ades  ![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=darkslategray)
2
2
 
3
3
  <!--section:summary-->
4
4
 
5
- # <mark>Minimal CSS&nbsp;Framework</mark> <wbr> for Semantic&nbsp;HTML
5
+ <h1><mark>Minimal CSS&nbsp;Framework</mark> <wbr> for Semantic&nbsp;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 add `blades.standalone.css` to other frameworks.
10
10
 
11
11
  <!--section:gh-only-->
12
12
 
13
- ![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=darkslategray&style=for-the-badge)
14
- [![](https://img.shields.io/badge/Code-gainsboro?logo=github&logoColor=black&style=for-the-badge)](https://github.com/anyblades/blades)
15
- [![](https://img.shields.io/github/stars/anyblades/blades?label=Star&labelColor=gainsboro&color=silver&style=for-the-badge)](https://github.com/anyblades/blades)
16
-
17
- ## [Documentation ↗](https://blades.ninja/css/)
18
-
19
- <!-- ToC from https://blades.ninja/#documentation -->
20
- <ul class="columns"><li><a href="https://blades.ninja/css/#install" tabindex="-1">Install</a></li><p></p>
21
- <li><a href="https://blades.ninja/css/#layout" tabindex="-1">Layout</a><ul><li><a href="https://blades.ninja/css/#breakout">Breakout layout</a></li>
22
- <li><a href="https://blades.ninja/css/#auto-columns" tabindex="-1">Auto-columns</a></li>
23
- <li><a href="https://blades.ninja/css/#jump-to-top" tabindex="-1">Jump to top</a></li></ul></li>
24
- <li><a href="https://blades.ninja/css/#content" tabindex="-1">Content</a><ul><li><a href="https://blades.ninja/css/#link-icon">Link icon</a></li>
25
- <li><a href="https://blades.ninja/css/#heading-anchors" tabindex="-1">Heading anchors</a></li>
26
- <li><a href="https://blades.ninja/css/#list-markers" tabindex="-1">List markers</a></li>
27
- <li><a href="https://blades.ninja/css/#unlist" tabindex="-1">Unlist</a></li>
28
- <li><a href="https://blades.ninja/css/#code" tabindex="-1">Code</a></li></ul></li>
29
- <li><a href="https://blades.ninja/css/#table" tabindex="-1">Table</a><ul><li><a href="https://blades.ninja/css/#responsive-table">Responsive table</a></li>
30
- <li><a href="https://blades.ninja/css/#column-expanders" tabindex="-1">Column expanders</a></li>
31
- <li><a href="https://blades.ninja/css/#borderless-table" tabindex="-1">Borderless table</a></li></ul></li>
32
- <li><a href="https://blades.ninja/css/#forms" tabindex="-1">Forms</a><ul><li><a href="https://blades.ninja/css/#float-label">Float label CSS</a></li></ul></li>
33
- <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>
34
- <li><a href="https://blades.ninja/css/#faded" tabindex="-1">Faded</a></li></ul></li>
35
- <li><a href="https://blades.ninja/css/#more" tabindex="-1">More</a><ul><li><a href="https://blades.ninja/css/#pico">Pico+Blades CSS ✨🥷</a></li>
36
- <li><a href="https://blades.ninja/css/#html">Blades HTML</a></li>
37
- <li><a href="https://blades.ninja/css/#jekyll">Blades for Jekyll</a></li></ul></li></ul>
38
-
39
13
  ---
40
14
 
41
15
  ## Quick start
@@ -46,7 +20,7 @@ There are 4 ways to get started:
46
20
 
47
21
  ### Install manually
48
22
 
49
- [Download *Bl*ades](https://github.com/anyblades/pico/archive/refs/heads/main.zip) and link `assets/blades.css` in the `<head>` of your website.
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.
50
24
 
51
25
  ```html
52
26
  <link rel="stylesheet" href="assets/blades.css" />
@@ -54,12 +28,12 @@ There are 4 ways to get started:
54
28
 
55
29
  ### Usage from CDN
56
30
 
57
- Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@0/) to link `blades.min.css`:
31
+ Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/) to link `assets/blades.min.css`:
58
32
 
59
33
  <!--prettier-ignore-->
60
34
  ```html
61
35
  <link rel="stylesheet" href="
62
- https://cdn.jsdelivr.net/npm/@anyblades/blades@0/assets/blades.min.css
36
+ https://cdn.jsdelivr.net/npm/@anyblades/blades@2/assets/blades.min.css
63
37
  "/>
64
38
  ```
65
39
 
@@ -72,7 +46,7 @@ npm install @anyblades/pico # optional
72
46
  npm install @anyblades/blades
73
47
  ```
74
48
 
75
- Then, import [Pico and] *Bl*ades into your CSS:
49
+ Then, import [Pico] and *Bl*ades into your CSS:
76
50
 
77
51
  ```css
78
52
  @import "@anyblades/pico"; /* optional */
@@ -101,6 +75,86 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
101
75
  </html>
102
76
  ```
103
77
 
78
+ <!--section:gh-only-->
79
+
80
+ ## Documentation
81
+
82
+ <!-- ToC as is from https://blades.ninja/#docs -->
83
+ <ul class="columns">
84
+
85
+ <li>
86
+ <strong><a href="/">Get started</a></strong>
87
+ <ul><li><a href="https://blades.ninja/css/">Quick start</a></li>
88
+ <li><a href="https://blades.ninja/css/color-schemes/">Color schemes</a></li>
89
+ <li><a href="https://blades.ninja/css/variables/">CSS variables</a></li>
90
+ <li><a href="https://blades.ninja/css/standalone/">Standalone version <mark>NEW</mark></a></li>
91
+ <li><a href="https://blades.ninja/css/pico/">Pico fork <img src="https://img.shields.io/github/v/release/anyblades/pico?label=&amp;color=white"> <mark>NEW</mark></a></li>
92
+ <li><a href="https://blades.ninja/css/frameworks/">Frameworks</a></li></ul>
93
+ </li>
94
+
95
+ <li>
96
+ <strong><a href="/css/layout/">Layout</a></strong>
97
+ <ul><li><a href="https://blades.ninja/css/container/">Container</a></li>
98
+ <li><a href="https://blades.ninja/css/breakout/">Breakout container <mark>NEW</mark></a></li>
99
+ <li><a href="https://blades.ninja/css/landmarks-section/">Landmarks &amp; section</a></li>
100
+ <li><a href="https://blades.ninja/css/grid/">Grid</a></li>
101
+ <li><a href="https://blades.ninja/css/columns/">Text columns <mark>NEW</mark></a></li>
102
+ <li><a href="https://blades.ninja/css/overflow-auto/">Overflow auto</a></li></ul>
103
+ </li>
104
+
105
+ <li>
106
+ <strong><a href="/css/content/">Content</a></strong>
107
+ <ul><li><a href="https://blades.ninja/css/typography/">Typography</a></li>
108
+ <li><a href="https://blades.ninja/css/heading/">Heading helpers <mark>NEW</mark></a></li>
109
+ <li><a href="https://blades.ninja/css/link/">Link</a></li>
110
+ <li><a href="https://blades.ninja/css/link-icon/">Link icon <mark>NEW</mark></a></li>
111
+ <li><a href="https://blades.ninja/css/button/">Button</a></li>
112
+ <li><a href="https://blades.ninja/css/table/">Table <mark>UPD</mark></a></li>
113
+ <li><a href="https://blades.ninja/css/responsive-table/">Responsive table <mark>NEW</mark></a></li>
114
+ <li><a href="https://blades.ninja/css/list/">List helpers <mark>NEW</mark></a></li>
115
+ <li><a href="https://blades.ninja/css/code/">Code formatting <mark>NEW</mark></a></li></ul>
116
+ </li>
117
+
118
+ <li>
119
+ <strong><a href="/css/forms/">Forms</a></strong>
120
+ <ul><li><a href="https://blades.ninja/css/forms/">Overview</a></li>
121
+ <li><a href="https://blades.ninja/css/input/">Input</a></li>
122
+ <li><a href="https://blades.ninja/css/textarea/">Textarea</a></li>
123
+ <li><a href="https://blades.ninja/css/select/">Select</a></li>
124
+ <li><a href="https://blades.ninja/css/checkboxes/">Checkboxes</a></li>
125
+ <li><a href="https://blades.ninja/css/radios/">Radios</a></li>
126
+ <li><a href="https://blades.ninja/css/switch/">Switch</a></li>
127
+ <li><a href="https://blades.ninja/css/range/">Range</a></li>
128
+ <li><a href="https://blades.ninja/css/float-label/">Float labels <mark>NEW</mark></a></li></ul>
129
+ </li>
130
+
131
+ <li>
132
+ <strong><a href="/css/components/">Components</a></strong>
133
+ <ul><li><a href="https://blades.ninja/css/accordion/">Accordion</a></li>
134
+ <li><a href="https://blades.ninja/css/card/">Card</a></li>
135
+ <li><a href="https://blades.ninja/css/dropdown/">Dropdown</a></li>
136
+ <li><a href="https://blades.ninja/css/group/">Group</a></li>
137
+ <li><a href="https://blades.ninja/css/loading/">Loading</a></li>
138
+ <li><a href="https://blades.ninja/css/modal/">Modal</a></li>
139
+ <li><a href="https://blades.ninja/css/navigation/">Navigation</a></li>
140
+ <li><a href="https://blades.ninja/css/progress/">Progress</a></li>
141
+ <li><a href="https://blades.ninja/css/tooltip/">Tooltip</a></li>
142
+ <li><a href="https://blades.ninja/css/jump/">Jump to... <mark>NEW</mark></a></li>
143
+ <li><a href="https://blades.ninja/css/utils/">Utilities <mark>NEW</mark></a></li></ul>
144
+ </li>
145
+
146
+ <li>
147
+ <strong><a href="/html/">Templates <mark>NEW</mark></a></strong>
148
+ <ul><li><a href="https://blades.ninja/html/">Overview</a></li>
149
+ <li><a href="https://blades.ninja/html/starter/">HTML starter <mark>NEW</mark></a></li>
150
+ <li><a href="https://blades.ninja/html/links/">Links <mark>NEW</mark></a></li>
151
+ <li><a href="https://blades.ninja/html/sitemap/">Sitemap <mark>NEW</mark></a></li></ul>
152
+ </li>
153
+
154
+ </ul>
155
+
156
+ ---
157
+
104
158
  <!--section:info-->
105
159
 
106
160
  ## <sup>Featured by</sup><!--A-Z-->
@@ -109,14 +163,15 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
109
163
  - [https://github.com/@gabrielizalo/awesome-css](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
110
164
  - [https://github.com/@uhub/awesome-css](https://github.com/uhub/awesome-css)
111
165
  - [https://github.com/awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
112
- - [https://github.com/classless-css](https://github.com/dbohdan/classless-css#components) &nbsp;<small>🥷 *Fl*oat labels</small>
166
+ - [https://github.com/classless-css#float-label](https://github.com/dbohdan/classless-css#components:~:text=Float%20Label)
113
167
  - [https://sveltiacms.app/docs/start](https://sveltiacms.app/en/docs/start#starter-templates)
168
+ - [https://www.youtube.com/@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
114
169
 
115
170
  <!--{.unlist .columns}-->
116
171
 
117
172
  ## <sup>Credits</sup>
118
173
 
119
- - https://picocss.com/ for inspiration
120
- - https://11ty.dev/ for build power
174
+ - https://picocss.com/ as a [first-class citizen](https://blades.ninja/css/pico/)
175
+ - https://11ty.dev/ for [this site generation](https://github.com/anyblades/blades.ninja)
121
176
 
122
177
  <!--{.unlist}-->
package/_includes/blades/sitemap.xml.njk CHANGED
@@ -1,5 +1,5 @@
1
- {# Based on https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk
2
- <!--section:code-->```jinja2 #}<?xml
1
+ {#- Based on https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk
2
+ <!--section:code-->```jinja2 -#}<?xml
3
3
  version="1.0" encoding="utf-8"?>
4
4
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
5
5
  {%- for page in collections.all %}
package/assets/blades.css CHANGED
@@ -661,7 +661,7 @@ h5,
661
661
  h6 {
662
662
  position: relative;
663
663
  }
664
- h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
664
+ 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"] {
665
665
  position: absolute;
666
666
  right: 100%;
667
667
  top: 50%;
@@ -672,7 +672,7 @@ h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="
672
672
  visibility: hidden;
673
673
  }
674
674
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
675
- h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
675
+ 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"] {
676
676
  visibility: visible;
677
677
  }
678
678
  }
package/assets/blades.standalone.core.css CHANGED
@@ -213,7 +213,7 @@ h6 {
213
213
  position: relative;
214
214
  }
215
215
 
216
- h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
216
+ 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"] {
217
217
  position: absolute;
218
218
  right: 100%;
219
219
  top: 50%;
@@ -225,7 +225,7 @@ h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="
225
225
  }
226
226
 
227
227
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
228
- h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
228
+ 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"] {
229
229
  visibility: visible;
230
230
  }
231
231
  }
package/assets/blades.standalone.css CHANGED
@@ -213,7 +213,7 @@ h6 {
213
213
  position: relative;
214
214
  }
215
215
 
216
- h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="#"], h6 a[href^="#"] {
216
+ 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"] {
217
217
  position: absolute;
218
218
  right: 100%;
219
219
  top: 50%;
@@ -225,7 +225,7 @@ h1 a[href^="#"], h2 a[href^="#"], h3 a[href^="#"], h4 a[href^="#"], h5 a[href^="
225
225
  }
226
226
 
227
227
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
228
- h1:hover a[href^="#"], h2:hover a[href^="#"], h3:hover a[href^="#"], h4:hover a[href^="#"], h5:hover a[href^="#"], h6:hover a[href^="#"] {
228
+ 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"] {
229
229
  visibility: visible;
230
230
  }
231
231
  }
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.30.0"
5
+ spec.version = "2.2.1"
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,8 +1,7 @@
1
1
  {
2
2
  "name": "@anyblades/blades",
3
- "version": "0.30.0",
3
+ "version": "2.2.1",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
5
- "style": "./assets/blades.css",
6
5
  "exports": {
7
6
  ".": "./src/blades.standalone.css",
8
7
  "./core": "./src/blades.standalone.core.css",
package/src/content/_typography.css CHANGED
@@ -19,7 +19,7 @@ h5,
19
19
  h6 {
20
20
  position: relative;
21
21
 
22
- a[href^="#"] {
22
+ a[aria-hidden="true"] {
23
23
  position: absolute;
24
24
  right: 100%;
25
25
  top: 50%;
@@ -31,7 +31,7 @@ h6 {
31
31
  }
32
32
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
33
33
  &:hover {
34
- a[href^="#"] {
34
+ a[aria-hidden="true"] {
35
35
  visibility: visible;
36
36
  }
37
37
  }