@anyblades/blades 2.4.8 → 3.0.0-alpha.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.
- package/.github/ISSUE_TEMPLATE/bug_report.md +25 -0
- package/.github/ISSUE_TEMPLATE/config.yml +8 -0
- package/.prettierrc.json +6 -0
- package/README.md +130 -104
- package/context7.json +4 -0
- package/css/blades.css +454 -198
- package/css/blades.min.css +145 -0
- package/css/blades.standalone.css +216 -272
- package/css/blades.standalone.min.css +37 -0
- package/css/{blades.ninja.css → ninja.css} +7 -2
- package/css/ninja.min.css +5 -0
- package/css/pico.conditional.css +3189 -0
- package/css/pico.conditional.min.css +107 -0
- package/css/pico.css +3186 -0
- package/css/pico.min.css +105 -0
- package/css/postcss.config.js +23 -0
- package/index.html +63 -0
- package/package.json +27 -11
- package/src/blades.css +4 -3
- package/src/blades.standalone.css +2 -2
- package/src/{blades.ninja.css → ninja.css} +7 -2
- package/src/pico/_components.css +974 -0
- package/src/pico/_content.css +608 -0
- package/src/pico/_forms.css +747 -0
- package/src/pico/_index.css +12 -0
- package/src/pico/_layout.css +128 -0
- package/src/pico/_utilities.css +53 -0
- package/src/pico/_variables.css +671 -0
- package/src/pico.css +1 -0
- package/src/standalone/_core.css +32 -0
- package/src/{blades.standalone.theme.css → standalone/_theme.css} +3 -7
- package/src/{_utilities.css → standalone/_utilities.css} +3 -4
- package/src/standalone/_variables.css +20 -0
- package/src/{link-icon.css → standalone/components/_icon-helper.css} +0 -2
- package/src/{components → standalone/components}/_timeline.css +1 -2
- package/src/{content → standalone/content}/_code.css +9 -12
- package/src/{content/_typography.css → standalone/content/_list.css} +4 -49
- package/src/{content → standalone/content}/_table.css +4 -7
- package/src/standalone/content/_typography.css +38 -0
- package/src/{float-label.core.css → standalone/forms/_float-label.core.css} +22 -14
- package/src/standalone/forms/_float-label.css +2 -0
- package/src/{breakout.css → standalone/layout/_breakout.css} +3 -6
- package/src/{_layout.css → standalone/layout/_columns.css} +2 -20
- package/src/standalone/layout/_scroller.css +10 -0
- package/_config.yml +0 -5
- package/blades.gemspec +0 -16
- package/css/blades.standalone.core.css +0 -738
- package/css/blades.standalone.theme.css +0 -147
- package/css/breakout.css +0 -125
- package/css/float-label.core.css +0 -56
- package/css/float-label.css +0 -96
- package/css/float-label.theme.css +0 -39
- package/css/link-icon.css +0 -59
- package/css/responsive-table.css +0 -57
- package/src/blades.standalone.core.css +0 -21
- package/src/float-label.css +0 -3
- /package/src/{responsive-table.css → standalone/content/_table-responsive.css} +0 -0
- /package/src/{float-label.theme.css → standalone/forms/_float-label.theme.css} +0 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Bug report
|
|
3
|
+
about: Create a bug report if you've already asked for help with a problem and confirmed something is broken with Blades CSS.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
Please search for duplicate or closed issues first.
|
|
7
|
+
|
|
8
|
+
## Describe the issue
|
|
9
|
+
|
|
10
|
+
### Current Behavior
|
|
11
|
+
|
|
12
|
+
A concise description of the bug.
|
|
13
|
+
|
|
14
|
+
### Expected Behavior
|
|
15
|
+
|
|
16
|
+
A concise description of what you expected.
|
|
17
|
+
|
|
18
|
+
### Reproduction URL
|
|
19
|
+
|
|
20
|
+
We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool.
|
|
21
|
+
**Please do not link to your actual project.** Instead, we need a reduced test case in a new project without any unnecessary code.
|
|
22
|
+
|
|
23
|
+
### Environment
|
|
24
|
+
|
|
25
|
+
Example: OS, versions, browser details.
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
blank_issues_enabled: false
|
|
2
|
+
contact_links:
|
|
3
|
+
- name: Get Help
|
|
4
|
+
url: https://github.com/orgs/anyblades/discussions/categories/help
|
|
5
|
+
about: If you can't get something to work the way you expect, open a question in our discussion forums.
|
|
6
|
+
- name: Feature Request
|
|
7
|
+
url: https://github.com/orgs/anyblades/discussions/categories/ideas
|
|
8
|
+
about: Suggest any ideas you have using our discussion forums.
|
package/.prettierrc.json
CHANGED
package/README.md
CHANGED
|
@@ -1,14 +1,23 @@
|
|
|
1
|
-
# 🥷 *Bl*ades ![][
|
|
1
|
+
# 🥷 *Bl*ades ![][NPM_V]
|
|
2
2
|
|
|
3
|
-
[
|
|
3
|
+
[NPM_V]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=darkslategray
|
|
4
4
|
|
|
5
5
|
<!--section:summary-->
|
|
6
6
|
|
|
7
|
-
<h1><mark>Minimal CSS Framework</
|
|
7
|
+
<h1><span class="mark-brand">Minimal CSS Framework</span> <small>for</small> Semantic HTML</h1>
|
|
8
8
|
|
|
9
|
-
<big>Fully compatible and actively maintained successor to Pico CSS.</big>
|
|
9
|
+
<big>Fully compatible and actively maintained successor to [Pico CSS](//blades.ninja/css/pico/).</big>
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Introduces [float labels](//blades.ninja/css/float-label/), [breakout container](//blades.ninja/css/breakout/) and other modern, opt-out [helpers](//blades.ninja/#docs).
|
|
12
|
+
Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with other frameworks.
|
|
13
|
+
|
|
14
|
+
<nav>
|
|
15
|
+
<a href="//blades.ninja/css/" role="button">Get started <i>✨</i></a>
|
|
16
|
+
<b hidden>|</b>
|
|
17
|
+
<a href="//blades.ninja/css/standalone/" role="button" class="outline">
|
|
18
|
+
Standalone <i><i class="fa-brands fa-tailwind-css"></i><i class="fa-brands fa-bootstrap"></i></i>
|
|
19
|
+
</a>
|
|
20
|
+
</nav>
|
|
12
21
|
|
|
13
22
|
<!--section:gh-only-->
|
|
14
23
|
|
|
@@ -16,13 +25,13 @@ Includes [Float labels](//blades.ninja/css/float-label/), [Breakout layout](//bl
|
|
|
16
25
|
|
|
17
26
|
## Quick start
|
|
18
27
|
|
|
19
|
-
<!--section:install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
|
|
28
|
+
<!--section:install-all,install--><!-- for https://blades.ninja/css/ and https://blades.ninja/css/standalone/ -->
|
|
20
29
|
|
|
21
|
-
There are 4 ways to get started
|
|
30
|
+
<big>There are 4 ways to get started:</big>
|
|
22
31
|
|
|
23
32
|
### <mark>A.</mark> Install manually
|
|
24
33
|
|
|
25
|
-
[Download
|
|
34
|
+
[Download CSS archive](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `css/blades.css` in the `<head>` of your website.
|
|
26
35
|
|
|
27
36
|
```html
|
|
28
37
|
<link rel="stylesheet" href="css/blades.css" />
|
|
@@ -30,42 +39,52 @@ There are 4 ways to get started:
|
|
|
30
39
|
|
|
31
40
|
### <mark>B.</mark> Usage from CDN
|
|
32
41
|
|
|
33
|
-
Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/):
|
|
34
|
-
|
|
35
42
|
<!--prettier-ignore-->
|
|
36
43
|
```html
|
|
37
44
|
<link rel="stylesheet" href="
|
|
38
|
-
https://cdn.jsdelivr.net/npm/@anyblades/blades@
|
|
45
|
+
https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/blades.min.css
|
|
39
46
|
"/>
|
|
40
47
|
```
|
|
41
48
|
|
|
49
|
+
Live example: https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html
|
|
50
|
+
|
|
51
|
+
Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/
|
|
52
|
+
|
|
42
53
|
### <mark>C.</mark> Install with NPM
|
|
43
54
|
|
|
44
55
|
```sh
|
|
45
|
-
npm install @anyblades/pico # or other CSS framework
|
|
46
56
|
npm install @anyblades/blades
|
|
47
57
|
```
|
|
48
58
|
|
|
49
|
-
Then, import
|
|
59
|
+
Then, `@import` Blades into your CSS file:
|
|
50
60
|
|
|
51
61
|
```css
|
|
52
62
|
@import "@anyblades/blades";
|
|
53
63
|
```
|
|
54
64
|
|
|
55
|
-
|
|
65
|
+
<div><hr></div>
|
|
66
|
+
|
|
67
|
+
Alternatively, import [standalone](//blades.ninja/css/standalone/) Blades CSS sources only (without underlying [Pico CSS](//blades.ninja/css/pico/) base styles):
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
@import "@anyblades/blades/standalone";
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://github.com/anyblades/buildawesome-micro-starters/blob/main/tailwind/styles.css
|
|
56
74
|
|
|
57
|
-
### <mark>D.</mark>
|
|
75
|
+
### <mark>D.</mark> Official starters
|
|
58
76
|
|
|
59
|
-
- https://
|
|
60
|
-
|
|
61
|
-
- https://
|
|
62
|
-
|
|
77
|
+
- [11ty / Build Awesome Micro-Starter[s]](https://micro.build.blades.ninja/),
|
|
78
|
+
including the best [Content-First Starter](//content.build.blades.ninja/)
|
|
79
|
+
- [Grav CMS v2](https://getgrav.org/migrate-to-2#:~:text=blades) uses Blades CSS by default
|
|
80
|
+
([Quark2 theme](//github.com/getgrav/grav-theme-quark2#quark-2-theme:~:text=blades)
|
|
81
|
+
& [Devtools plugin](//github.com/getgrav/grav-plugin-devtools#theme-scaffolding:~:text=blades))
|
|
63
82
|
|
|
64
|
-
|
|
83
|
+
---
|
|
65
84
|
|
|
66
|
-
|
|
85
|
+
## Base HTML
|
|
67
86
|
|
|
68
|
-
###
|
|
87
|
+
### Static HTML template <!-- from /index.html -->
|
|
69
88
|
|
|
70
89
|
```html
|
|
71
90
|
<!doctype html>
|
|
@@ -85,110 +104,117 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
|
|
|
85
104
|
</html>
|
|
86
105
|
```
|
|
87
106
|
|
|
107
|
+
### Dynamic HTML template
|
|
108
|
+
|
|
109
|
+
[Available for Nunjucks, Twig or Liquid ↗](https://blades.ninja/html/base/)<!--{role=button .outline}-->
|
|
110
|
+
|
|
88
111
|
<!--section:gh-only-->
|
|
89
112
|
|
|
113
|
+
---
|
|
114
|
+
|
|
90
115
|
## Documentation
|
|
91
116
|
|
|
92
117
|
<!-- ToC as is from https://blades.ninja/#docs -->
|
|
93
118
|
<ul class="columns">
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
<li><a href="
|
|
99
|
-
<li><a href="
|
|
100
|
-
<li><a href="
|
|
101
|
-
<li><a href="
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<li><a href="
|
|
109
|
-
<li><a href="
|
|
110
|
-
<li><a href="
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<li><a href="
|
|
119
|
-
<li><a href="
|
|
120
|
-
<li><a href="
|
|
121
|
-
<li><a href="
|
|
122
|
-
<li><a href="
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<li
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<li><a href="
|
|
132
|
-
<li><a href="
|
|
133
|
-
<li><a href="
|
|
134
|
-
<li><a href="
|
|
135
|
-
<li><a href="
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
<li
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
<li><a href="
|
|
145
|
-
<li><a href="
|
|
146
|
-
<li><a href="
|
|
147
|
-
<li><a href="
|
|
148
|
-
<li><a href="
|
|
149
|
-
<li><a href="
|
|
150
|
-
<li><a href="
|
|
151
|
-
<li><a href="
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
<li><a href="
|
|
160
|
-
<li><a href="
|
|
161
|
-
<li><a href="
|
|
162
|
-
|
|
163
|
-
|
|
119
|
+
|
|
120
|
+
<li>
|
|
121
|
+
<strong><a href="//blades.ninja/css/">Get started</a></strong>
|
|
122
|
+
<ul><li><a href="//blades.ninja/css/">Quick start</a></li>
|
|
123
|
+
<li><a href="//blades.ninja/css/color-schemes/">Dark scheme</a></li>
|
|
124
|
+
<li><a href="//blades.ninja/css/variables/">CSS variables</a></li>
|
|
125
|
+
<li><a href="//blades.ninja/css/conditional/">Conditional styling <mark>NEW</mark></a></li>
|
|
126
|
+
<li><a href="//blades.ninja/css/standalone/">Standalone version <mark>NEW</mark></a></li></ul>
|
|
127
|
+
</li>
|
|
128
|
+
|
|
129
|
+
<li>
|
|
130
|
+
<strong><a href="//blades.ninja/css/layout/">Layout</a></strong>
|
|
131
|
+
<ul><li><a href="//blades.ninja/css/landmarks-section/">Landmarks & section</a></li>
|
|
132
|
+
<li><a href="//blades.ninja/css/container/">Container</a></li>
|
|
133
|
+
<li><a href="//blades.ninja/css/breakout/">Breakout container <mark>NEW</mark></a></li>
|
|
134
|
+
<li><a href="//blades.ninja/css/grid/">Grid</a></li>
|
|
135
|
+
<li><a href="//blades.ninja/css/columns/">Text columns <mark>NEW</mark></a></li></ul>
|
|
136
|
+
</li>
|
|
137
|
+
|
|
138
|
+
<li>
|
|
139
|
+
<strong><a href="//blades.ninja/css/content/">Content</a></strong>
|
|
140
|
+
<ul><li><a href="//blades.ninja/css/typography/">Typography <mark>UPD</mark></a></li>
|
|
141
|
+
<li><a href="//blades.ninja/css/link/">Link</a></li>
|
|
142
|
+
<li><a href="//blades.ninja/css/button/">Button</a></li>
|
|
143
|
+
<li><a href="//blades.ninja/css/icon/"><code style="padding: 0">‹i›</code>con helper <mark>NEW</mark></a></li>
|
|
144
|
+
<li><a href="//blades.ninja/css/list/">List <mark>UPD</mark></a></li>
|
|
145
|
+
<li><a href="//blades.ninja/css/table/">Table <mark>UPD</mark></a></li>
|
|
146
|
+
<li><a href="//blades.ninja/css/responsive-table/">Responsive table <mark>NEW</mark></a></li>
|
|
147
|
+
<li><a href="//blades.ninja/css/code/">Code blocks <mark>NEW</mark></a></li></ul>
|
|
148
|
+
</li>
|
|
149
|
+
|
|
150
|
+
<li>
|
|
151
|
+
<strong><a href="//blades.ninja/css/forms/">Forms</a></strong>
|
|
152
|
+
<ul><li><a href="//blades.ninja/css/forms/">Overview</a></li>
|
|
153
|
+
<li><a href="//blades.ninja/css/input/">Input</a></li>
|
|
154
|
+
<li><a href="//blades.ninja/css/textarea/">Textarea</a></li>
|
|
155
|
+
<li><a href="//blades.ninja/css/select/">Select</a></li>
|
|
156
|
+
<li><a href="//blades.ninja/css/checkboxes/">Checkboxes</a></li>
|
|
157
|
+
<li><a href="//blades.ninja/css/radios/">Radios</a></li>
|
|
158
|
+
<li><a href="//blades.ninja/css/switch/">Switch</a></li>
|
|
159
|
+
<li><a href="//blades.ninja/css/range/">Range</a></li>
|
|
160
|
+
<li><a href="//blades.ninja/css/float-label/">Float labels <mark>NEW</mark></a></li></ul>
|
|
161
|
+
</li>
|
|
162
|
+
|
|
163
|
+
<li>
|
|
164
|
+
<strong><a href="//blades.ninja/css/components/">Components</a></strong>
|
|
165
|
+
<ul><li><a href="//blades.ninja/css/accordion/">Accordion</a></li>
|
|
166
|
+
<li><a href="//blades.ninja/css/card/">Card</a></li>
|
|
167
|
+
<li><a href="//blades.ninja/css/dropdown/">Dropdown</a></li>
|
|
168
|
+
<li><a href="//blades.ninja/css/group/">Group</a></li>
|
|
169
|
+
<li><a href="//blades.ninja/css/loading/">Loading</a></li>
|
|
170
|
+
<li><a href="//blades.ninja/css/modal/">Modal</a></li>
|
|
171
|
+
<li><a href="//blades.ninja/css/nav/">Navigation</a></li>
|
|
172
|
+
<li><a href="//blades.ninja/css/progress/">Progress</a></li>
|
|
173
|
+
<li><a href="//blades.ninja/css/tooltip/">Tooltip</a></li>
|
|
174
|
+
<li><a href="//blades.ninja/css/timeline/">Timeline <mark>NEW</mark></a></li>
|
|
175
|
+
<li><a href="//blades.ninja/css/jump/">Jump to... <mark>NEW</mark></a></li>
|
|
176
|
+
<li><a href="//blades.ninja/css/utils/">Utilities <mark>NEW</mark></a></li></ul>
|
|
177
|
+
</li>
|
|
178
|
+
|
|
179
|
+
<li>
|
|
180
|
+
<strong><a href="//blades.ninja/more/">More</a></strong>
|
|
181
|
+
<ul><li><a href="//blades.ninja/css/pico/">Pico CSS <mark>NEW</mark> <sub style="">(underlying fork)</sub></a></li>
|
|
182
|
+
<li><a href="//blades.ninja/css/ninja/">Ninja CSS <mark>NEW</mark> <sub style="">(experimental add-ons)</sub></a></li>
|
|
183
|
+
<li><a href="//blades.ninja/html/">Dynamic templates <mark>NEW</mark></a></li>
|
|
184
|
+
<li><a href="//blades.ninja/html/base/">Base HTML <mark>NEW</mark></a></li>
|
|
185
|
+
<li><a href="//blades.ninja/html/links/">Links snippet <mark>NEW</mark></a></li>
|
|
186
|
+
<li><a href="//blades.ninja/html/sitemap/">Sitemap XML <mark>NEW</mark></a></li>
|
|
187
|
+
<li><a href="//blades.ninja/css/frameworks/">CSS frameworks <mark>2026–2040</mark></a></li></ul>
|
|
188
|
+
</li>
|
|
189
|
+
|
|
164
190
|
</ul>
|
|
165
191
|
|
|
166
192
|
---
|
|
167
193
|
|
|
168
|
-
## <sup style>Trusted by</sup
|
|
194
|
+
## <sup style>Trusted by</sup><!-- DRY with featured -->
|
|
169
195
|
|
|
170
|
-
- https://
|
|
171
|
-
- https://github.com/getgrav/grav-theme-quark2 🛸
|
|
172
|
-
- https://www.11ty.dev/docs/starter/#:~:text=blades
|
|
173
|
-
- https://sveltiacms.app/en/docs/start#starter-templates:~:text=anyblades
|
|
174
|
-
- https://github.com/johnheenan/minform#css-and-performance
|
|
175
|
-
- https://github.com/hostfurl/minformhf
|
|
196
|
+
- <b hidden>🐍</b> [Flask & Jinja community website](https://palletsprojects.com/)
|
|
176
197
|
|
|
177
198
|
<!--section:info-->
|
|
178
199
|
|
|
179
200
|
## <sup style>Featured by</sup>
|
|
180
201
|
|
|
181
|
-
- [
|
|
182
|
-
- [
|
|
183
|
-
- [
|
|
202
|
+
- [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades)
|
|
203
|
+
- [@11ty/buildawesome](https://bsky.app/profile/11ty.dev/post/3mp75r53ccv2b) [↗](https://mastodon.social/@11ty@neighborhood.11ty.dev/116816881367741413)
|
|
204
|
+
- [sveltiacms.app](https://sveltiacms.app/en/docs/start#:~:text=anyblades) <!--Z-A-->
|
|
205
|
+
- [libhunt.com](https://www.libhunt.com/r/blades)
|
|
206
|
+
- [context7.com](https://context7.com/anyblades/blades)
|
|
207
|
+
- [awesome-css](https://github.com/uhub/awesome-css)
|
|
208
|
+
- [awesome-css-frameworks](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
|
|
184
209
|
- [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
|
|
185
|
-
- [@
|
|
210
|
+
- [@cantdutchthis](https://news.ycombinator.com/item?id=48729467)
|
|
186
211
|
|
|
187
212
|
<!--{.markerless .columns}-->
|
|
213
|
+
<!--[hostfurl.com, @johnheenan]-->
|
|
188
214
|
|
|
189
215
|
## <sup style>Credits</sup>
|
|
190
216
|
|
|
191
217
|
- https://picocss.com/ for [inspiration](//blades.ninja/css/pico/)
|
|
192
|
-
- https://11ty.dev/ for
|
|
218
|
+
- https://11ty.dev/ for site generation
|
|
193
219
|
|
|
194
220
|
<!--{.markerless}-->
|
package/context7.json
ADDED