@anyblades/blades 0.28.0 → 2.2.0

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 (26) hide show
  1. package/README.md +145 -70
  2. package/_includes/blades/html.liquid +1 -1
  3. package/_includes/blades/html.njk +1 -1
  4. package/assets/blades.css +521 -177
  5. package/assets/{blades.core.css → blades.standalone.core.css} +41 -46
  6. package/assets/blades.standalone.css +857 -0
  7. package/assets/{blades.theme.css → blades.standalone.theme.css} +2 -2
  8. package/assets/breakout.css +6 -6
  9. package/assets/float-label.core.css +2 -2
  10. package/assets/float-label.css +2 -2
  11. package/assets/link-icon.css +4 -4
  12. package/assets/responsive-table.css +5 -5
  13. package/blades.gemspec +1 -1
  14. package/package.json +5 -6
  15. package/src/_layout.css +4 -4
  16. package/src/_utilities.css +2 -4
  17. package/src/blades.css +6 -2
  18. package/src/blades.standalone.css +2 -0
  19. package/src/content/_code.css +1 -2
  20. package/src/content/_table.css +1 -2
  21. package/src/content/_typography.css +6 -7
  22. package/assets/pico.blades.css +0 -1211
  23. package/src/pico.blades.css +0 -6
  24. /package/{LICENSE → LICENSE.md} +0 -0
  25. /package/src/{blades.core.css → blades.standalone.core.css} +0 -0
  26. /package/src/{blades.theme.css → blades.standalone.theme.css} +0 -0
package/README.md CHANGED
@@ -1,104 +1,179 @@
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
- <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
- ![](https://img.shields.io/github/v/release/anyblades/blades?label=&color=darkslategray&style=for-the-badge&include_prereleases)
10
- [![](https://img.shields.io/badge/Code-gainsboro?logo=github&logoColor=black&style=for-the-badge)](https://github.com/anyblades/blades)
11
- [![](https://img.shields.io/github/stars/anyblades/blades?label=Star&labelColor=gainsboro&color=silver&style=for-the-badge)](https://github.com/anyblades/blades)
12
-
13
- <!--section:docs-->
14
-
15
- ## [Docs & demos <i><small>→</small></i>](https://blades.ninja/css/)
16
-
17
- <!--section:docs,toc-->
18
- <!-- ToC from https://blades.ninja/css/ with `href="/css/#` instead of `href="#` -->
19
- <ul class="columns"><li><a href="/css/#install" tabindex="-1">Install</a></li>
20
- <li><a href="/css/#layout" tabindex="-1">Layout</a><ul><li><a href="/css/#breakout">Breakout layout</a></li>
21
- <li><a href="/css/#auto-columns" tabindex="-1">Auto-columns</a></li>
22
- <li><a href="/css/#jump-to-top" tabindex="-1">Jump to top</a></li></ul></li>
23
- <li><a href="/css/#content" tabindex="-1">Content</a><ul><li><a href="/css/#link-icon">Link icon</a></li>
24
- <li><a href="/css/#heading-anchors" tabindex="-1">Heading anchors</a></li>
25
- <li><a href="/css/#list-markers" tabindex="-1">List markers</a></li>
26
- <li><a href="/css/#unlist" tabindex="-1">Unlist</a></li>
27
- <li><a href="/css/#code" tabindex="-1">Code</a></li></ul></li>
28
- <li><a href="/css/#table" tabindex="-1">Table</a><ul><li><a href="/css/#responsive-table">Responsive table</a></li>
29
- <li><a href="/css/#column-expanders" tabindex="-1">Column expanders</a></li>
30
- <li><a href="/css/#borderless-table" tabindex="-1">Borderless table</a></li></ul></li>
31
- <li><a href="/css/#forms" tabindex="-1">Forms</a><ul><li><a href="/css/#float-label">Float label CSS</a></li></ul></li>
32
- <li><a href="/css/#utilities" tabindex="-1">Utilities</a><ul><li><a href="/css/#auto-dark" tabindex="-1">Auto-dark</a></li>
33
- <li><a href="/css/#faded" tabindex="-1">Faded</a></li></ul></li></ul>
5
+ <h1><mark>Minimal CSS&nbsp;Framework</mark> <wbr> for Semantic&nbsp;HTML</h1>
6
+
7
+ <big>Fully compatible and actively maintained successor to Pico CSS.</big>
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.
10
+
34
11
  <!--section:gh-only-->
35
12
 
36
13
  ---
37
14
 
38
- ## Install
15
+ ## Quick start
16
+
17
+ <!--section:install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
18
+
19
+ There are 4 ways to get started:
20
+
21
+ ### Install manually
22
+
23
+ [Download *Bl*ades](https://github.com/anyblades/pico/archive/refs/heads/main.zip) and link `assets/blades.css` in the `<head>` of your website.
24
+
25
+ ```html
26
+ <link rel="stylesheet" href="assets/blades.css" />
27
+ ```
39
28
 
40
- <!--section:install-->
29
+ ### Usage from CDN
41
30
 
42
- ###### <mark>Via CDN</mark>
31
+ Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@0/) to link `blades.min.css`:
43
32
 
44
33
  <!--prettier-ignore-->
45
34
  ```html
46
35
  <link rel="stylesheet" href="
47
- https://cdn.jsdelivr.net/npm/@anyblades/blades@^0.28.0-alpha/assets/blades.min.css
48
- ">
36
+ https://cdn.jsdelivr.net/npm/@anyblades/blades@0/assets/blades.min.css
37
+ "/>
49
38
  ```
50
39
 
51
- ###### <mark>Via npm</mark>
40
+ Living examples: https://github.com/anyblades/subtle/blob/main/.subtle/package.json
41
+
42
+ ### Install with NPM
52
43
 
53
44
  ```sh
45
+ npm install @anyblades/pico # optional
54
46
  npm install @anyblades/blades
55
47
  ```
56
48
 
57
- Then in your `.css`:
49
+ Then, import [Pico and] *Bl*ades into your CSS:
58
50
 
59
51
  ```css
60
- @import "@anyblades/blades";
52
+ @import "@anyblades/pico"; /* optional */
53
+ @import "@anyblades/blades"; /* can be used standalone */
61
54
  ```
62
55
 
63
56
  Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_styles/styles.css
64
57
 
65
- <!--section:install,install-preconf-->
58
+ ### Starter HTML template <!-- from index.html -->
66
59
 
67
- ###### <mark>Preconfigured</mark>
60
+ ```html
61
+ <!doctype html>
62
+ <html lang="en">
63
+ <head>
64
+ <meta charset="utf-8" />
65
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
66
+ <meta name="color-scheme" content="light dark" />
67
+ <link rel="stylesheet" href="assets/blades.css" />
68
+ <title>Hello world!</title>
69
+ </head>
70
+ <body>
71
+ <main class="container">
72
+ <h1>Hello world!</h1>
73
+ </main>
74
+ </body>
75
+ </html>
76
+ ```
68
77
 
69
- - Pico: https://github.com/anyblades/pico
70
- - 11ty: https://github.com/anyblades/build-awesome-starter
71
- - Jekyll: https://github.com/anyblades/bladeswitch or [as a theme](https://blades.ninja/jekyll/#install)
78
+ <!--section:gh-only-->
72
79
 
73
- <!--section:install-->
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/"><em>St</em>andalone 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/examples/">Examples</a></li>
93
+ <li><a href="https://blades.ninja/css/frameworks/">Frameworks</a></li></ul>
94
+ </li>
95
+
96
+ <li>
97
+ <strong><a href="/css/layout/">Layout</a></strong>
98
+ <ul><li><a href="https://blades.ninja/css/container/">Container</a></li>
99
+ <li><a href="https://blades.ninja/css/breakout/"><em>Br</em>eakout container <mark>NEW</mark></a></li>
100
+ <li><a href="https://blades.ninja/css/landmarks-section/">Landmarks &amp; section</a></li>
101
+ <li><a href="https://blades.ninja/css/grid/">Grid</a></li>
102
+ <li><a href="https://blades.ninja/css/columns/"><em>Te</em>xt columns <mark>NEW</mark></a></li>
103
+ <li><a href="https://blades.ninja/css/overflow-auto/">Overflow auto</a></li></ul>
104
+ </li>
105
+
106
+ <li>
107
+ <strong><a href="/css/content/">Content</a></strong>
108
+ <ul><li><a href="https://blades.ninja/css/typography/">Typography</a></li>
109
+ <li><a href="https://blades.ninja/css/heading/"><em>H</em>eading helpers <mark>NEW</mark></a></li>
110
+ <li><a href="https://blades.ninja/css/link/">Link</a></li>
111
+ <li><a href="https://blades.ninja/css/link-icon/">Link icon <mark>NEW</mark></a></li>
112
+ <li><a href="https://blades.ninja/css/button/">Button</a></li>
113
+ <li><a href="https://blades.ninja/css/table/">Table</a></li>
114
+ <li><a href="https://blades.ninja/css/table-helpers/"><em>T</em>able helpers <mark>NEW</mark></a></li>
115
+ <li><a href="https://blades.ninja/css/responsive-table/">Responsive table <mark>NEW</mark></a></li>
116
+ <li><a href="https://blades.ninja/css/list/"><em>L</em>ist helpers <mark>NEW</mark></a></li>
117
+ <li><a href="https://blades.ninja/css/code/"><em>C</em>ode formatting <mark>NEW</mark></a></li></ul>
118
+ </li>
119
+
120
+ <li>
121
+ <strong><a href="/css/forms/">Forms</a></strong>
122
+ <ul><li><a href="https://blades.ninja/css/forms/overview/">Overview</a></li>
123
+ <li><a href="https://blades.ninja/css/forms/input/">Input</a></li>
124
+ <li><a href="https://blades.ninja/css/forms/textarea/">Textarea</a></li>
125
+ <li><a href="https://blades.ninja/css/forms/select/">Select</a></li>
126
+ <li><a href="https://blades.ninja/css/forms/checkboxes/">Checkboxes</a></li>
127
+ <li><a href="https://blades.ninja/css/forms/radios/">Radios</a></li>
128
+ <li><a href="https://blades.ninja/css/forms/switch/">Switch</a></li>
129
+ <li><a href="https://blades.ninja/css/forms/range/">Range</a></li>
130
+ <li><a href="https://blades.ninja/css/float-label/"><em>Fl</em>oat labels <mark>NEW</mark></a></li></ul>
131
+ </li>
132
+
133
+ <li>
134
+ <strong><a href="/css/components/">Components</a></strong>
135
+ <ul><li><a href="https://blades.ninja/css/accordion/">Accordion</a></li>
136
+ <li><a href="https://blades.ninja/css/card/">Card</a></li>
137
+ <li><a href="https://blades.ninja/css/dropdown/">Dropdown</a></li>
138
+ <li><a href="https://blades.ninja/css/group/">Group</a></li>
139
+ <li><a href="https://blades.ninja/css/loading/">Loading</a></li>
140
+ <li><a href="https://blades.ninja/css/modal/">Modal</a></li>
141
+ <li><a href="https://blades.ninja/css/nav/">Navigation</a></li>
142
+ <li><a href="https://blades.ninja/css/progress/">Progress</a></li>
143
+ <li><a href="https://blades.ninja/css/tooltip/">Tooltip</a></li>
144
+ <li><a href="https://blades.ninja/css/jump/"><em>Ju</em>mp to... <mark>NEW</mark></a></li>
145
+ <li><a href="https://blades.ninja/css/utils/"><em>Ut</em>ilities <mark>NEW</mark></a></li></ul>
146
+ </li>
147
+
148
+ <li>
149
+ <strong><a href="/html/">Templates <mark>NEW</mark></a></strong>
150
+ <ul><li><a href="https://blades.ninja/html/">Overview</a></li>
151
+ <li><a href="https://blades.ninja/html/starter/"><em>HTML</em> starter <mark>NEW</mark></a></li>
152
+ <li><a href="https://blades.ninja/html/links/"><em>L</em>inks <mark>NEW</mark></a></li>
153
+ <li><a href="https://blades.ninja/html/sitemap/"><em>S</em>itemap <mark>NEW</mark></a></li></ul>
154
+ </li>
155
+
156
+ </ul>
74
157
 
75
- ###### Theme <small>(optional)</small>
158
+ ---
76
159
 
77
- `blades.css` includes default minimal styling; use `blades.core.css` to opt-out.
160
+ <!--section:info-->
78
161
 
79
- <!--section:docs-->
162
+ ## <sup>Featured by</sup><!--A-Z-->
80
163
 
81
- ---
164
+ - [https://fosstodon.org/@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
165
+ - [https://github.com/@gabrielizalo/awesome-css](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
166
+ - [https://github.com/@uhub/awesome-css](https://github.com/uhub/awesome-css)
167
+ - [https://github.com/awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
168
+ - [https://github.com/classless-css#float-label](https://github.com/dbohdan/classless-css#components:~:text=Float%20Label)
169
+ - [https://sveltiacms.app/docs/start](https://sveltiacms.app/en/docs/start#starter-templates)
170
+ - [https://www.youtube.com/@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
171
+
172
+ <!--{.unlist .columns}-->
173
+
174
+ ## <sup>Credits</sup>
175
+
176
+ - https://picocss.com/ for inspiration
177
+ - https://11ty.dev/ for build power
82
178
 
83
- - Featured by:
84
- - https://github.com/uhub/awesome-css
85
- - https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/lightweight
86
- - https://github.com/anyblades/awesome-11ty-build-awesome
87
- - https://11tybundle.dev/blog/11ty-bundle-88/
88
- - [https://jekyll-themes.com/](https://jekyll-themes.com/anyblades/blades)
89
- - [https://sveltiacms.app/](https://sveltiacms.app/en/docs/start#starter-templates)
90
- - ✨ [pico.css](https://github.com/anyblades/pico) community fork
91
- - 🚀 [build-awesome-starter](https://github.com/anyblades/build-awesome-starter)
92
- - 🚀 [bladeswitch](https://github.com/anyblades/bladeswitch) starter
93
-
94
- - Showcase:
95
- - <abbr data-tooltip="Pico CSS + Blades">✨+🥷</abbr> = https://any.digital/
96
- - <abbr data-tooltip="Tailwind CSS + Typography plugin + Blades">💨+🥷</abbr> = https://build.blades.ninja/
97
- - <abbr data-tooltip="Pico CSS + Blades">✨+🥷</abbr> = https://bladeswitch.com/
98
- - <abbr data-tooltip="Pico CSS + Blades">✨+🥷</abbr> = https://minform.hostfurl.com/
99
-
100
- - Credits:
101
- - https://picocss.com/ for inspiration
102
- - https://11ty.dev/ for build power
103
-
104
- <!--{.unlist-all .columns}-->
179
+ <!--{.unlist}-->
package/_includes/blades/html.liquid CHANGED
@@ -12,7 +12,7 @@
12
12
  {%- if title %}{{ title | strip_html | append: ' | ' }}{% endif -%}
13
13
  {{- site.title -}}
14
14
  </title>
15
- <meta name="description" content="{{ summary | strip_html }}">
15
+ <meta name="description" content="{{ description | strip_html }}">
16
16
 
17
17
  {%- for href in site.styles %}
18
18
  <link rel="stylesheet" href="{{ href | relative_url }}">
package/_includes/blades/html.njk CHANGED
@@ -12,7 +12,7 @@
12
12
  {{- title | string | striptags ~ ' | ' if title -}}
13
13
  {{- site.title -}}
14
14
  </title>
15
- <meta name="description" content="{{ summary | striptags }}" />
15
+ <meta name="description" content="{{ description | striptags }}" />
16
16
 
17
17
  {%- for href in site.styles %}
18
18
  <link rel="stylesheet" href="{{ href }}" />