@anyblades/blades 0.28.0-alpha.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.
- package/.prettierrc.json +12 -0
- package/LICENSE +20 -0
- package/README.md +103 -0
- package/_config.yml +5 -0
- package/_includes/blades/gtm.liquid +39 -0
- package/_includes/blades/gtm.njk +42 -0
- package/_includes/blades/html.liquid +49 -0
- package/_includes/blades/html.njk +51 -0
- package/_includes/blades/links.liquid +27 -0
- package/_includes/blades/sitemap.xml.njk +12 -0
- package/assets/blades.core.css +611 -0
- package/assets/blades.css +755 -0
- package/assets/blades.theme.css +129 -0
- package/assets/breakout.css +98 -0
- package/assets/float-label.core.css +44 -0
- package/assets/float-label.css +76 -0
- package/assets/float-label.theme.css +31 -0
- package/assets/link-icon.css +55 -0
- package/assets/responsive-table.css +55 -0
- package/blades.gemspec +16 -0
- package/package.json +38 -0
- package/postcss.config.js +5 -0
- package/src/_code.css +45 -0
- package/src/_layout.css +47 -0
- package/src/_table.css +67 -0
- package/src/_typography.css +111 -0
- package/src/_unreduce-motion.css +16 -0
- package/src/_utilities.css +34 -0
- package/src/blades.core.css +18 -0
- package/src/blades.css +2 -0
- package/src/blades.theme.css +111 -0
- package/src/breakout.css +99 -0
- package/src/float-label.core.css +44 -0
- package/src/float-label.css +3 -0
- package/src/float-label.theme.css +31 -0
- package/src/link-icon.css +55 -0
- package/src/responsive-table.css +55 -0
package/.prettierrc.json
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2013 Anton Staroverov
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
|
6
|
+
this software and associated documentation files (the "Software"), to deal in
|
|
7
|
+
the Software without restriction, including without limitation the rights to
|
|
8
|
+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
|
9
|
+
the Software, and to permit persons to whom the Software is furnished to do so,
|
|
10
|
+
subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
|
17
|
+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
|
18
|
+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
|
19
|
+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
|
20
|
+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# 🥷 Blades <sup></sup>
|
|
2
|
+
|
|
3
|
+
<!--section:summary-->
|
|
4
|
+
|
|
5
|
+
<hgroup>Framework-agnostic,<wbr> class-light CSS<a href="https://blades.ninja/html/" style="padding: 0"><i>⁺</i></a> blade kit.</hgroup>
|
|
6
|
+
|
|
7
|
+
<big>Use with Pico, Simple, Tailwind, or any other CSS reset/framework.</big>
|
|
8
|
+
|
|
9
|
+
<!--section:gh-only-->
|
|
10
|
+
|
|
11
|
+
[](https://blades.ninja/)
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Documentation
|
|
16
|
+
|
|
17
|
+
<!--section:docs-->
|
|
18
|
+
|
|
19
|
+
<!-- copy-paste of ToC from https://blades.ninja/css/ -->
|
|
20
|
+
<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>
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## Install
|
|
42
|
+
|
|
43
|
+
<!--section:docs,install-->
|
|
44
|
+
|
|
45
|
+
<mark>Via CDN:</mark>
|
|
46
|
+
|
|
47
|
+
<!--prettier-ignore-->
|
|
48
|
+
```html
|
|
49
|
+
<link rel="stylesheet" href="
|
|
50
|
+
https://cdn.jsdelivr.net/npm/@anyblades/blades@^0.27.0-beta/assets/blades.min.css
|
|
51
|
+
">
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
<mark>Via npm:</mark>
|
|
55
|
+
|
|
56
|
+
```sh
|
|
57
|
+
npm install @anyblades/blades
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Then in your `.css`:
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
@import "@anyblades/blades";
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_styles/styles.css
|
|
67
|
+
|
|
68
|
+
<!--section:docs,install,install-preconf-->
|
|
69
|
+
|
|
70
|
+
<mark>Preconfigured:</mark>
|
|
71
|
+
|
|
72
|
+
- 11ty: https://github.com/anyblades/build-awesome-starter
|
|
73
|
+
- Jekyll: https://github.com/anyblades/bladeswitch or [as a theme](https://blades.ninja/jekyll/#install)
|
|
74
|
+
|
|
75
|
+
<!--section:docs,install-->
|
|
76
|
+
|
|
77
|
+
##### Default theme <small>(optional)</small>
|
|
78
|
+
|
|
79
|
+
`blades.css` includes default minimal styling; use `blades.core.css` to opt out.
|
|
80
|
+
|
|
81
|
+
<!--section:docs-->
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
- Featured by:
|
|
86
|
+
- 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/)
|
|
90
|
+
- [https://jekyll-themes.com/](https://jekyll-themes.com/anyblades/blades)
|
|
91
|
+
- [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
|
|
94
|
+
- Showcase:
|
|
95
|
+
- https://any.digital/ (Pico + Blades)
|
|
96
|
+
- https://build.blades.ninja/ (Tailwind + Blades)
|
|
97
|
+
- https://bladeswitch.com/ (Pico + Blades)
|
|
98
|
+
- https://minform.hostfurl.com/ (Pico + Blades)
|
|
99
|
+
- Credits:
|
|
100
|
+
- https://picocss.com/ for inspiration
|
|
101
|
+
- https://11ty.dev/ for build power
|
|
102
|
+
|
|
103
|
+
<!--{.unlist .columns}-->
|
package/_config.yml
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{% comment %}<!--section:code-->```liquid{% endcomment %}
|
|
2
|
+
{% if site.prod and site.gtm_id %}
|
|
3
|
+
{% capture _ %}
|
|
4
|
+
{% unless for_body %}
|
|
5
|
+
|
|
6
|
+
<!-- Google Tag Manager -->
|
|
7
|
+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
8
|
+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
9
|
+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
10
|
+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
11
|
+
})(window,document,'script','dataLayer','{{ site.gtm_id }}');</script>
|
|
12
|
+
<!-- End Google Tag Manager -->
|
|
13
|
+
|
|
14
|
+
{% else %}
|
|
15
|
+
|
|
16
|
+
<!-- Google Tag Manager (noscript) -->
|
|
17
|
+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm_id }}"
|
|
18
|
+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
19
|
+
<!-- End Google Tag Manager (noscript) -->
|
|
20
|
+
|
|
21
|
+
{% endunless %}
|
|
22
|
+
{% endcapture %}
|
|
23
|
+
{{ _ | strip }}
|
|
24
|
+
{% endif %}
|
|
25
|
+
<!--prettier-ignore-->
|
|
26
|
+
{% comment %}```
|
|
27
|
+
<!--section:docs-->
|
|
28
|
+
Usage in Liquid:
|
|
29
|
+
```liquid
|
|
30
|
+
...
|
|
31
|
+
{% include blades/gtm.liquid %}
|
|
32
|
+
</head>
|
|
33
|
+
<body>
|
|
34
|
+
{% include blades/gtm.liquid for_body=true %}
|
|
35
|
+
...
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Living example: https://github.com/anyblades/blades/blob/main/_includes/blades/html.liquid
|
|
39
|
+
<!--section-->{% endcomment %}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{# <!--section:code-->```jinja2 #}
|
|
2
|
+
{% if site.prod and site.gtm_id %}
|
|
3
|
+
{# prettier-ignore-start #}
|
|
4
|
+
{% if not for_body %}
|
|
5
|
+
|
|
6
|
+
<!-- Google Tag Manager -->
|
|
7
|
+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
|
8
|
+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
|
9
|
+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
|
10
|
+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
|
11
|
+
})(window,document,'script','dataLayer','{{ site.gtm_id }}');</script>
|
|
12
|
+
<!-- End Google Tag Manager -->
|
|
13
|
+
|
|
14
|
+
{% else %}
|
|
15
|
+
|
|
16
|
+
<!-- Google Tag Manager (noscript) -->
|
|
17
|
+
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm_id }}"
|
|
18
|
+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
|
19
|
+
<!-- End Google Tag Manager (noscript) -->
|
|
20
|
+
|
|
21
|
+
{% endif %}
|
|
22
|
+
{# prettier-ignore-end #}
|
|
23
|
+
{% endif %}
|
|
24
|
+
{#```
|
|
25
|
+
<!--section:docs-->
|
|
26
|
+
Usage in Nunjucks:
|
|
27
|
+
```jinja2
|
|
28
|
+
...
|
|
29
|
+
{% include 'blades/gtm.njk' %}
|
|
30
|
+
</head>
|
|
31
|
+
<body>
|
|
32
|
+
{% set for_body = true %}{% include 'blades/gtm.njk' %}
|
|
33
|
+
...
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Living example: https://github.com/anyblades/blades/blob/main/_includes/blades/html.njk
|
|
37
|
+
|
|
38
|
+
Parameters:
|
|
39
|
+
- `site.gtm_id` - Your Google Tag Manager container ID (e.g., `GTM-XXXXXXX`)
|
|
40
|
+
- `site.prod` - Boolean flag to enable GTM only in production
|
|
41
|
+
- `for_body` - Boolean flag (default: `false`). When `false`, renders the script tag for the `<head>`. When `true`, renders the noscript fallback for the `<body>`.
|
|
42
|
+
<!--section--> #}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{% comment %}<!--section:code-->```liquid{% endcomment %}
|
|
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.ico' }}">
|
|
8
|
+
<title>
|
|
9
|
+
{%- if title %}{{ title | strip_html | append: ' | ' }}{% endif -%}
|
|
10
|
+
{{- site.title -}}
|
|
11
|
+
</title>
|
|
12
|
+
<meta name="description" content="{{ summary | strip_html }}">
|
|
13
|
+
|
|
14
|
+
{%- for href in site.styles %}
|
|
15
|
+
<link rel="stylesheet" href="{{ href | relative_url }}">
|
|
16
|
+
{%- endfor %}
|
|
17
|
+
<style>
|
|
18
|
+
{{ site.inline_styles | join: '\n' }}
|
|
19
|
+
</style>
|
|
20
|
+
|
|
21
|
+
{%- for src in site.scripts %}
|
|
22
|
+
<script src="{{ src }}" defer></script>
|
|
23
|
+
{%- endfor %}
|
|
24
|
+
<script type="module">
|
|
25
|
+
{{ site.inline_scripts | join: '\n' }}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
{{ content_for_header }}
|
|
29
|
+
{% include blades/gtm.liquid %}
|
|
30
|
+
</head>
|
|
31
|
+
|
|
32
|
+
<body>
|
|
33
|
+
{% include blades/gtm.liquid for_body=true %}
|
|
34
|
+
|
|
35
|
+
{{ body }}
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
38
|
+
{% comment %}```
|
|
39
|
+
<!--section:docs-->
|
|
40
|
+
Usage in Liquid layout:
|
|
41
|
+
|
|
42
|
+
```liquid
|
|
43
|
+
{% capture body %}...{% endcapture %}
|
|
44
|
+
|
|
45
|
+
{% include blades/html.liquid %}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Living example: https://github.com/anyblades/bladeswitch/blob/main/_includes/default.liquid
|
|
49
|
+
<!--section-->{% endcomment %}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{# <!--section:code-->```jinja2 #}
|
|
2
|
+
<!doctype html>
|
|
3
|
+
<html lang="{{ site.lang | d('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 | d('/favicon.ico') }}" />
|
|
8
|
+
<title>
|
|
9
|
+
{{- title | string | striptags ~ ' | ' if title -}}
|
|
10
|
+
{{- site.title -}}
|
|
11
|
+
</title>
|
|
12
|
+
<meta name="description" content="{{ summary | striptags }}" />
|
|
13
|
+
|
|
14
|
+
{%- for href in site.styles %}
|
|
15
|
+
<link rel="stylesheet" href="{{ href }}" />
|
|
16
|
+
{%- endfor %}
|
|
17
|
+
{# prettier-ignore-start #}<style>
|
|
18
|
+
{{ site.inline_styles | d([]) | join('\n') }}
|
|
19
|
+
</style>{# prettier-ignore-end #}
|
|
20
|
+
|
|
21
|
+
{%- for src in site.scripts %}
|
|
22
|
+
<script src="{{ src }}" defer></script>
|
|
23
|
+
{%- endfor %}
|
|
24
|
+
{# prettier-ignore-start #}<script type="module">
|
|
25
|
+
{{ site.inline_scripts | d([]) | join('\n') }}
|
|
26
|
+
</script>{# prettier-ignore-end #}
|
|
27
|
+
|
|
28
|
+
{{ content_for_header }}
|
|
29
|
+
{% include 'blades/gtm.njk' %}
|
|
30
|
+
</head>
|
|
31
|
+
|
|
32
|
+
<body>
|
|
33
|
+
{% set for_body = true %}{% include 'blades/gtm.njk' %}
|
|
34
|
+
{% block body %}
|
|
35
|
+
{% endblock %}
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
38
|
+
{#```
|
|
39
|
+
- `title | string` avoids error with `| striptags` when you pass a pure number.
|
|
40
|
+
|
|
41
|
+
<!--section:docs-->
|
|
42
|
+
Usage in Nunjucks layout:
|
|
43
|
+
|
|
44
|
+
```jinja2
|
|
45
|
+
{% extends 'blades/html.njk' %}
|
|
46
|
+
|
|
47
|
+
{% block body %}...{% endblock %}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_includes/default.njk
|
|
51
|
+
<!--section--> #}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
{% comment %}<!--section:code-->```liquid{% endcomment %}
|
|
2
|
+
<ul>
|
|
3
|
+
{%- for link in links %}
|
|
4
|
+
<li>
|
|
5
|
+
{% # prettier-ignore %}
|
|
6
|
+
<a href="{{ link.url }}" {% if link.url == current_url %}aria-current="page"{% endif %}>
|
|
7
|
+
{{- link.title -}}
|
|
8
|
+
</a>
|
|
9
|
+
</li>
|
|
10
|
+
{%- endfor %}
|
|
11
|
+
</ul>
|
|
12
|
+
{% # prettier-ignore %}
|
|
13
|
+
{% comment %}```
|
|
14
|
+
<!--section:docs-->
|
|
15
|
+
Usage with [Eleventy Navigation plugin](https://www.11ty.dev/docs/plugins/navigation/#bring-your-own-html-render-the-menu-items-manually):
|
|
16
|
+
|
|
17
|
+
```liquid
|
|
18
|
+
{% assign links = collections.all | eleventyNavigation %}
|
|
19
|
+
{% render blades/links, links: links, current_url: page.url %}
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Usage inside Pico's Navar:
|
|
23
|
+
|
|
24
|
+
```jinja2
|
|
25
|
+
TBD
|
|
26
|
+
```
|
|
27
|
+
<!--section-->{% endcomment %}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
|
3
|
+
{%- for page in collections.all %}
|
|
4
|
+
{% if page.data.permalink != false %}
|
|
5
|
+
<url>
|
|
6
|
+
<loc>{{ site.base }}{{ page.url }}</loc>
|
|
7
|
+
<lastmod>{{ page.date | date }}</lastmod>
|
|
8
|
+
</url>
|
|
9
|
+
{% endif %}
|
|
10
|
+
{%- endfor %}
|
|
11
|
+
</urlset>
|
|
12
|
+
{# https://github.com/11ty/eleventy-base-blog/blob/main/content/sitemap.xml.njk #}
|