@anyblades/blades 2.3.0 → 2.3.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 (15) hide show
  1. package/README.md +32 -24
  2. package/_includes/blades/html.twig +52 -0
  3. package/_includes/blades/links.twig +18 -0
  4. package/_includes/blades/sitemap.xml.twig +23 -0
  5. package/blades.gemspec +1 -1
  6. package/css/blades.css +3038 -501
  7. package/css/blades.standalone.core.css +28 -28
  8. package/css/blades.standalone.css +37 -37
  9. package/css/blades.standalone.theme.css +9 -9
  10. package/css/breakout.css +9 -9
  11. package/css/float-label.core.css +2 -2
  12. package/css/float-label.css +2 -2
  13. package/css/link-icon.css +4 -4
  14. package/css/responsive-table.css +6 -6
  15. package/package.json +7 -5
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # 🥷 *Bl*ades  ![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=darkslategray)
1
+ # 🥷 *Bl*ades &nbsp;<img src='https://img.shields.io/npm/v/@anyblades/blades?label=&color=white'>
2
2
 
3
3
  <!--section:summary-->
4
4
 
@@ -18,7 +18,7 @@ Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//bl
18
18
 
19
19
  There are 4 ways to get started:
20
20
 
21
- ### Install manually
21
+ ### <mark>A.</mark> Install manually
22
22
 
23
23
  [Download *Bl*ades](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `css/blades.css` in the `<head>` of your website.
24
24
 
@@ -26,7 +26,7 @@ There are 4 ways to get started:
26
26
  <link rel="stylesheet" href="css/blades.css" />
27
27
  ```
28
28
 
29
- ### Usage from CDN
29
+ ### <mark>B.</mark> Usage from CDN
30
30
 
31
31
  Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/):
32
32
 
@@ -37,21 +37,31 @@ Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblade
37
37
  "/>
38
38
  ```
39
39
 
40
- ### Install with NPM
40
+ ### <mark>C.</mark> Install with NPM
41
41
 
42
42
  ```sh
43
43
  npm install @anyblades/pico # or other CSS framework
44
44
  npm install @anyblades/blades
45
45
  ```
46
46
 
47
- Then, import [Pico] and *Bl*ades into your CSS:
47
+ Then, import *Bl*ades into your CSS:
48
48
 
49
49
  ```css
50
- @import "@anyblades/pico"; /* or other CSS framework */
51
50
  @import "@anyblades/blades";
52
51
  ```
53
52
 
54
- A live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-starters/blob/main/site-tailwind/styles.css
53
+ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-starters/blob/main/site-tailwind/styles.css
54
+
55
+ ### <mark>D.</mark> Starter projects
56
+
57
+ - https://subtle.blades.ninja/ 11ty micro-starter
58
+ - https://github.com/anyblades/buildawesome-starters 11ty Tailwind CLI starter(s)
59
+ - https://github.com/getgrav/grav-theme-quark2 for Grav CMS v2
60
+ - https://jekyll.blades.ninja/ starter <!--{.faded}-->
61
+
62
+ ### Standalone version
63
+
64
+ - https://blades.ninja/css/standalone/
55
65
 
56
66
  ### Starter HTML template <!-- from index.html -->
57
67
 
@@ -73,13 +83,6 @@ A live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https:/
73
83
  </html>
74
84
  ```
75
85
 
76
- ### More ways to get started
77
-
78
- - https://blades.ninja/css/standalone/ version
79
- - https://subtle.blades.ninja/ 11ty micro-starter
80
- - https://tw.11ty.blades.ninja/ Tailwind CLI starter
81
- - https://jekyll.blades.ninja/ starter <!--{.faded}-->
82
-
83
86
  <!--section:gh-only-->
84
87
 
85
88
  ## Documentation
@@ -160,25 +163,30 @@ A live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https:/
160
163
 
161
164
  ---
162
165
 
166
+ ## <sup>Trusted by</sup>
167
+
168
+ - https://github.com/pallets/website 🐍
169
+ - https://github.com/getgrav/grav-theme-quark2 🛸
170
+ - https://www.11ty.dev/docs/starter/#:~:text=blades
171
+ - https://sveltiacms.app/en/docs/start#starter-templates:~:text=anyblades
172
+ - https://github.com/johnheenan/minform#css-and-performance
173
+ - https://github.com/hostfurl/minformhf
174
+
163
175
  <!--section:info-->
164
176
 
165
- ## <sup>Featured by</sup><!--awesome,sites,social/Z-A-->
177
+ ## <sup>Featured by</sup>
166
178
 
167
- - https://github.com/uhub/awesome-css
168
- - [classless-css](https://github.com/dbohdan/classless-css#components:~:text=float%20label) [#float-label](//blades.ninja/css/float-label/)<!--{.faded}-->
169
- - [awesome-css-frameworks-and-ui-libraries](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
170
- - [awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
171
- - https://dummy.my/frameworks/
172
- - [sveltiacms.app](https://sveltiacms.app/en/docs/start#starter-templates)
173
- - [https://trendshift.io/](https://trendshift.io/repositories/29875) [#pico-fork](//blades.ninja/css/pico/)<!--{.faded}-->
179
+ - [awesome-css _@uhub_](https://github.com/uhub/awesome-css)
180
+ - [awesome-css-frameworks _@gabrielizalo_](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
181
+ - [dummy<em>.</em>my/frameworks](https://dummy.my/frameworks/)
174
182
  - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
175
- - [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
183
+ - [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w) [↗](https://www.instagram.com/reel/DXOSTpajG4f/)
176
184
 
177
185
  <!--{.markerless .columns}-->
178
186
 
179
187
  ## <sup>Credits</sup>
180
188
 
181
189
  - https://picocss.com/ for [inspiration](//blades.ninja/css/pico/)
182
- - https://11ty.dev/ for [this site generation ↗](https://github.com/anyblades/blades.ninja)
190
+ - https://11ty.dev/ for [site generation ↗](https://github.com/anyblades/blades.ninja)
183
191
 
184
192
  <!--{.markerless}-->
package/_includes/blades/html.twig ADDED
@@ -0,0 +1,52 @@
1
+ {# <!--section:code-->```twig #}
2
+ <!doctype html>
3
+ <html lang="{{ site.lang|default('en') }}">
4
+ <head>
5
+ <meta charset="utf-8" />
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.svg') }}" />
8
+ {% if site.favicon_alt %}
9
+ <link rel="alternate icon" href="{{ site.favicon_alt }}" type="image/png" />
10
+ {% endif %}
11
+ <title>
12
+ {{- title ? title|striptags ~ ' | ' -}}
13
+ {{- site.title -}}
14
+ </title>
15
+ <meta name="description" content="{{ description|striptags }}" />
16
+
17
+ {%- for href in site.styles %}
18
+ <link rel="stylesheet" href="{{ href }}" />
19
+ {%- endfor %}
20
+ <style>
21
+ {{ site.inline_styles|default([])|join('\n')|raw }}
22
+ </style>
23
+
24
+ {%- for src in site.scripts %}
25
+ <script src="{{ src }}" defer></script>
26
+ {%- endfor %}
27
+ <script type="module">
28
+ {{ site.inline_scripts|default([])|join('\n')|raw }}
29
+ </script>
30
+
31
+ {{ content_for_header|default('')|raw }}
32
+ </head>
33
+
34
+ <body>
35
+ {% block body %}
36
+ {% endblock %}
37
+ </body>
38
+ </html>
39
+ {#```
40
+ - `title ? …` renders the prefix only when a title is set, mirroring the Nunjucks `if title` guard.
41
+
42
+ <!--section:docs-->
43
+ Usage in Twig layout:
44
+
45
+ ```twig
46
+ {% extends 'blades/html.twig' %}
47
+
48
+ {% block body %}...{% endblock %}
49
+ ```
50
+
51
+ Pass `site`, `title` and `description` via the render context.
52
+ <!--section--> #}
package/_includes/blades/links.twig ADDED
@@ -0,0 +1,18 @@
1
+ {# <!--section:code-->```twig #}
2
+ <ul>
3
+ {%- for link in links %}
4
+ <li>
5
+ <a href="{{ link.url }}" {% if link.url == current_url %}aria-current="page"{% endif %}>
6
+ {{- link.title -}}
7
+ </a>
8
+ </li>
9
+ {%- endfor %}
10
+ </ul>
11
+ {#```
12
+ <!--section:docs-->
13
+ Pass the links and the current URL explicitly so nothing else leaks into scope:
14
+
15
+ ```twig
16
+ {% include 'blades/links.twig' with { links: menu, current_url: app.request.pathInfo } only %}
17
+ ```
18
+ <!--section--> #}
package/_includes/blades/sitemap.xml.twig ADDED
@@ -0,0 +1,23 @@
1
+ {#- Based on https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk
2
+ <!--section:code-->```twig -#}
3
+ <?xml version="1.0" encoding="utf-8"?>
4
+ <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
5
+ {%- for page in collections.all %}
6
+ {% if page.data.permalink != false %}
7
+ <url>
8
+ <loc>{{ site.base }}{{ page.url }}</loc>
9
+ <lastmod>{{ page.date|date('c') }}</lastmod>
10
+ </url>
11
+ {% endif %}
12
+ {%- endfor %}
13
+ </urlset>
14
+ {#```
15
+ <!--section:docs-->
16
+ Render from a standalone route/template that outputs `application/xml`:
17
+
18
+ ```twig
19
+ {% include 'blades/sitemap.xml.twig' %}
20
+ ```
21
+
22
+ `date('c')` emits an ISO-8601 `lastmod`, which is what the sitemap spec expects.
23
+ <!--section--> #}
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.3.0"
5
+ spec.version = "2.3.2"
6
6
  spec.authors = ["Anton Staroverov"]
7
7
 
8
8
  spec.summary = "Fully compatible and actively maintained successor to Pico CSS."