@anyblades/blades 2.2.4 → 2.3.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 (19) hide show
  1. package/README.md +30 -21
  2. package/_config.yml +1 -1
  3. package/_includes/blades/html.twig +52 -0
  4. package/_includes/blades/links.twig +18 -0
  5. package/_includes/blades/sitemap.xml.twig +23 -0
  6. package/blades.gemspec +3 -3
  7. package/css/blades.css +3763 -0
  8. package/{assets → css}/blades.standalone.core.css +29 -29
  9. package/{assets → css}/blades.standalone.css +38 -38
  10. package/{assets → css}/breakout.css +9 -9
  11. package/package.json +5 -4
  12. package/src/content/_code.css +1 -1
  13. package/assets/blades.css +0 -1226
  14. package/{assets → css}/blades.standalone.theme.css +9 -9
  15. package/{assets → css}/float-label.core.css +2 -2
  16. package/{assets → css}/float-label.css +2 -2
  17. package/{assets → css}/float-label.theme.css +0 -0
  18. package/{assets → css}/link-icon.css +4 -4
  19. package/{assets → css}/responsive-table.css +6 -6
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  <big>Fully compatible and actively maintained successor to Pico CSS.</big>
8
8
 
9
- Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css` or use `blades.standalone.css` with other frameworks.
9
+ Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//blades.ninja/css/breakout/) and other modern helpers. Simply switch `pico.css` to `blades.css`, or use `blades.standalone.css` with other frameworks.
10
10
 
11
11
  <!--section:gh-only-->
12
12
 
@@ -18,42 +18,51 @@ 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
- [Download *Bl*ades](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `assets/blades.css` in the `<head>` of your website.
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
 
25
25
  ```html
26
- <link rel="stylesheet" href="assets/blades.css" />
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
- Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/) to link `assets/blades.min.css`:
31
+ Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/):
32
32
 
33
33
  <!--prettier-ignore-->
34
34
  ```html
35
35
  <link rel="stylesheet" href="
36
- https://cdn.jsdelivr.net/npm/@anyblades/blades@2/assets/blades.min.css
36
+ https://cdn.jsdelivr.net/npm/@anyblades/blades@2/css/blades.min.css
37
37
  "/>
38
38
  ```
39
39
 
40
- Living examples: https://github.com/anyblades/subtle/blob/main/.subtle/package.json
41
-
42
- ### Install with NPM
40
+ ### <mark>C.</mark> Install with NPM
43
41
 
44
42
  ```sh
45
- npm install @anyblades/pico # optional
43
+ npm install @anyblades/pico # or other CSS framework
46
44
  npm install @anyblades/blades
47
45
  ```
48
46
 
49
47
  Then, import [Pico] and *Bl*ades into your CSS:
50
48
 
51
49
  ```css
52
- @import "@anyblades/pico"; /* optional */
53
- @import "@anyblades/blades"; /* can be used standalone */
50
+ @import "@anyblades/pico"; /* or other CSS framework */
51
+ @import "@anyblades/blades";
54
52
  ```
55
53
 
56
- Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_styles/styles.css
54
+ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-starters/blob/main/site-tailwind/styles.css
55
+
56
+ ### <mark>D.</mark> Starter projects
57
+
58
+ - https://subtle.blades.ninja/ 11ty micro-starter
59
+ - https://github.com/anyblades/buildawesome-starters 11ty Tailwind CLI starter(s)
60
+ - https://github.com/getgrav/grav-theme-quark2 for Grav CMS v2
61
+ - https://jekyll.blades.ninja/ starter <!--{.faded}-->
62
+
63
+ ### Standalone version
64
+
65
+ https://blades.ninja/css/standalone/
57
66
 
58
67
  ### Starter HTML template <!-- from index.html -->
59
68
 
@@ -64,7 +73,7 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
64
73
  <meta charset="utf-8" />
65
74
  <meta name="viewport" content="width=device-width, initial-scale=1" />
66
75
  <meta name="color-scheme" content="light dark" />
67
- <link rel="stylesheet" href="assets/blades.css" />
76
+ <link rel="stylesheet" href="css/blades.css" />
68
77
  <title>Hello world!</title>
69
78
  </head>
70
79
  <body>
@@ -157,17 +166,17 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
157
166
 
158
167
  <!--section:info-->
159
168
 
160
- ## <sup>Featured by</sup><!--awesome,sites,social/Z-A-->
169
+ ## <sup>Featured by</sup><!--projects,awesome,sites,social/Z-A-->
161
170
 
171
+ - https://github.com/getgrav/grav-theme-quark2 🚀
172
+ - [minform](https://github.com/johnheenan/minform#css-and-performance)
162
173
  - https://github.com/uhub/awesome-css
163
- - [classless-css](https://github.com/dbohdan/classless-css#components:~:text=float%20label) [#float-label](//blades.ninja/css/float-label/){.faded}
164
- - [awesome-css-frameworks-and-ui-libraries](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
165
- - [awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
174
+ - [awesome-css-frameworks](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
175
+ - [awesome-11ty](https://github.com/anyblades/awesome-11ty-buildawesome)
166
176
  - https://dummy.my/frameworks/
167
177
  - [sveltiacms.app](https://sveltiacms.app/en/docs/start#starter-templates)
168
- - [https://trendshift.io/](https://trendshift.io/repositories/29875) [#pico-fork](//blades.ninja/css/pico/){.faded}
169
178
  - [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
170
- - [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
179
+ - [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w) + [ ](https://www.instagram.com/reel/DXOSTpajG4f/)<!--{.faded}-->
171
180
 
172
181
  <!--{.markerless .columns}-->
173
182
 
package/_config.yml CHANGED
@@ -1,5 +1,5 @@
1
1
  exclude:
2
2
  - "**/*"
3
3
  include:
4
- - "assets/**/*"
4
+ - "css/**/*"
5
5
  - "*.md"
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,14 +2,14 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "blades"
5
- spec.version = "2.2.4"
5
+ spec.version = "2.3.1"
6
6
  spec.authors = ["Anton Staroverov"]
7
7
 
8
- spec.summary = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."
8
+ spec.summary = "Fully compatible and actively maintained successor to Pico CSS."
9
9
  spec.homepage = "https://github.com/anyblades/blades"
10
10
  spec.license = "MIT"
11
11
 
12
- spec.files = Dir.glob("{_includes,assets}/**/*")
12
+ spec.files = Dir.glob("{_includes,css}/**/*")
13
13
  # puts "spec.files: #{spec.files.inspect}"
14
14
 
15
15
  spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0"