@anyblades/blades 2.2.3 → 2.3.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.
- package/README.md +19 -14
- package/_config.yml +1 -1
- package/blades.gemspec +3 -3
- package/{assets → css}/blades.css +1 -12
- package/{assets → css}/blades.standalone.core.css +1 -16
- package/{assets → css}/blades.standalone.css +1 -16
- package/package.json +3 -3
- package/src/content/_code.css +1 -16
- /package/{assets → css}/blades.standalone.theme.css +0 -0
- /package/{assets → css}/breakout.css +0 -0
- /package/{assets → css}/float-label.core.css +0 -0
- /package/{assets → css}/float-label.css +0 -0
- /package/{assets → css}/float-label.theme.css +0 -0
- /package/{assets → css}/link-icon.css +0 -0
- /package/{assets → css}/responsive-table.css +0 -0
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
|
|
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
|
|
|
@@ -20,40 +20,38 @@ There are 4 ways to get started:
|
|
|
20
20
|
|
|
21
21
|
### Install manually
|
|
22
22
|
|
|
23
|
-
[Download *Bl*ades](https://github.com/anyblades/blades/archive/refs/heads/main.zip) and link `
|
|
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="
|
|
26
|
+
<link rel="stylesheet" href="css/blades.css" />
|
|
27
27
|
```
|
|
28
28
|
|
|
29
29
|
### Usage from CDN
|
|
30
30
|
|
|
31
|
-
Alternatively, you can use [jsDelivr CDN](https://cdn.jsdelivr.net/npm/@anyblades/blades@2/)
|
|
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/
|
|
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
40
|
### Install with NPM
|
|
43
41
|
|
|
44
42
|
```sh
|
|
45
|
-
npm install @anyblades/pico #
|
|
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"; /*
|
|
53
|
-
@import "@anyblades/blades";
|
|
50
|
+
@import "@anyblades/pico"; /* or other CSS framework */
|
|
51
|
+
@import "@anyblades/blades";
|
|
54
52
|
```
|
|
55
53
|
|
|
56
|
-
|
|
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
|
|
57
55
|
|
|
58
56
|
### Starter HTML template <!-- from index.html -->
|
|
59
57
|
|
|
@@ -64,7 +62,7 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
|
|
|
64
62
|
<meta charset="utf-8" />
|
|
65
63
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
66
64
|
<meta name="color-scheme" content="light dark" />
|
|
67
|
-
<link rel="stylesheet" href="
|
|
65
|
+
<link rel="stylesheet" href="css/blades.css" />
|
|
68
66
|
<title>Hello world!</title>
|
|
69
67
|
</head>
|
|
70
68
|
<body>
|
|
@@ -75,6 +73,13 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
|
|
|
75
73
|
</html>
|
|
76
74
|
```
|
|
77
75
|
|
|
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
|
+
|
|
78
83
|
<!--section:gh-only-->
|
|
79
84
|
|
|
80
85
|
## Documentation
|
|
@@ -160,12 +165,12 @@ Living example: https://github.com/anyblades/build-awesome-starter/blob/main/_st
|
|
|
160
165
|
## <sup>Featured by</sup><!--awesome,sites,social/Z-A-->
|
|
161
166
|
|
|
162
167
|
- 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}
|
|
168
|
+
- [classless-css](https://github.com/dbohdan/classless-css#components:~:text=float%20label) [#float-label](//blades.ninja/css/float-label/)<!--{.faded}-->
|
|
164
169
|
- [awesome-css-frameworks-and-ui-libraries](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
|
|
165
170
|
- [awesome-11ty-build-awesome](https://github.com/anyblades/awesome-11ty-build-awesome)
|
|
166
171
|
- https://dummy.my/frameworks/
|
|
167
172
|
- [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}
|
|
173
|
+
- [https://trendshift.io/](https://trendshift.io/repositories/29875) [#pico-fork](//blades.ninja/css/pico/)<!--{.faded}-->
|
|
169
174
|
- [@pauleveritt](https://fosstodon.org/@pauleveritt/116387278969347700)
|
|
170
175
|
- [@githubsignals](https://www.youtube.com/shorts/FxtvnBCse8w)
|
|
171
176
|
|
package/_config.yml
CHANGED
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.
|
|
5
|
+
spec.version = "2.3.0"
|
|
6
6
|
spec.authors = ["Anton Staroverov"]
|
|
7
7
|
|
|
8
|
-
spec.summary = "
|
|
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,
|
|
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"
|
|
@@ -955,7 +955,7 @@ Living examples: \3c !--A-Z-->
|
|
|
955
955
|
The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
|
|
956
956
|
|
|
957
957
|
```treeview {data-caption="Blades CSS:"}
|
|
958
|
-
./
|
|
958
|
+
./css/
|
|
959
959
|
├── blades.core.css # reusable class-light utilities, unthemed
|
|
960
960
|
├── blades.theme.css # minimal opinionated theme
|
|
961
961
|
└── blades.css # above two together
|
|
@@ -982,17 +982,6 @@ code[data-caption]::before {
|
|
|
982
982
|
code:where(pre > *) {
|
|
983
983
|
padding: 0;
|
|
984
984
|
}
|
|
985
|
-
/* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
|
|
986
|
-
.token.treeview-part .entry-line {
|
|
987
|
-
width: 2.5em !important;
|
|
988
|
-
opacity: 25%;
|
|
989
|
-
}
|
|
990
|
-
.token.treeview-part .entry-name:last-child {
|
|
991
|
-
opacity: 50%;
|
|
992
|
-
}
|
|
993
|
-
.token.treeview-part .entry-name:last-child::before {
|
|
994
|
-
display: none !important;
|
|
995
|
-
}
|
|
996
985
|
/*```
|
|
997
986
|
\3c !--section--> */
|
|
998
987
|
/* Forms */
|
|
@@ -543,7 +543,7 @@ Living examples: \3c !--A-Z-->
|
|
|
543
543
|
The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
|
|
544
544
|
|
|
545
545
|
```treeview {data-caption="Blades CSS:"}
|
|
546
|
-
./
|
|
546
|
+
./css/
|
|
547
547
|
├── blades.core.css # reusable class-light utilities, unthemed
|
|
548
548
|
├── blades.theme.css # minimal opinionated theme
|
|
549
549
|
└── blades.css # above two together
|
|
@@ -577,21 +577,6 @@ code:where(pre > *) {
|
|
|
577
577
|
padding: 0;
|
|
578
578
|
}
|
|
579
579
|
|
|
580
|
-
/* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
|
|
581
|
-
|
|
582
|
-
.token.treeview-part .entry-line {
|
|
583
|
-
width: 2.5em !important;
|
|
584
|
-
opacity: 25%;
|
|
585
|
-
}
|
|
586
|
-
|
|
587
|
-
.token.treeview-part .entry-name:last-child {
|
|
588
|
-
opacity: 50%;
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
.token.treeview-part .entry-name:last-child::before {
|
|
592
|
-
display: none !important;
|
|
593
|
-
}
|
|
594
|
-
|
|
595
580
|
/*```
|
|
596
581
|
\3c !--section--> */
|
|
597
582
|
|
|
@@ -543,7 +543,7 @@ Living examples: \3c !--A-Z-->
|
|
|
543
543
|
The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
|
|
544
544
|
|
|
545
545
|
```treeview {data-caption="Blades CSS:"}
|
|
546
|
-
./
|
|
546
|
+
./css/
|
|
547
547
|
├── blades.core.css # reusable class-light utilities, unthemed
|
|
548
548
|
├── blades.theme.css # minimal opinionated theme
|
|
549
549
|
└── blades.css # above two together
|
|
@@ -577,21 +577,6 @@ code:where(pre > *) {
|
|
|
577
577
|
padding: 0;
|
|
578
578
|
}
|
|
579
579
|
|
|
580
|
-
/* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
|
|
581
|
-
|
|
582
|
-
.token.treeview-part .entry-line {
|
|
583
|
-
width: 2.5em !important;
|
|
584
|
-
opacity: 25%;
|
|
585
|
-
}
|
|
586
|
-
|
|
587
|
-
.token.treeview-part .entry-name:last-child {
|
|
588
|
-
opacity: 50%;
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
.token.treeview-part .entry-name:last-child::before {
|
|
592
|
-
display: none !important;
|
|
593
|
-
}
|
|
594
|
-
|
|
595
580
|
/*```
|
|
596
581
|
\3c !--section--> */
|
|
597
582
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anyblades/blades",
|
|
3
|
-
"version": "2.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "2.3.0",
|
|
4
|
+
"description": "Fully compatible and actively maintained successor to Pico CSS.",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./src/blades.standalone.css",
|
|
7
7
|
"./core": "./src/blades.standalone.core.css",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"./float-label": "./src/float-label.css"
|
|
10
10
|
},
|
|
11
11
|
"scripts": {
|
|
12
|
-
"postcss": "postcss './src/!(_)*.css' --dir ./
|
|
12
|
+
"postcss": "postcss './src/!(_)*.css' --dir ./css/",
|
|
13
13
|
"build": "npm run postcss -- --no-map",
|
|
14
14
|
"start": "npm run postcss -- --watch",
|
|
15
15
|
"prepublishOnly": "npm run build"
|
package/src/content/_code.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
|
|
7
7
|
|
|
8
8
|
```treeview {data-caption="Blades CSS:"}
|
|
9
|
-
./
|
|
9
|
+
./css/
|
|
10
10
|
├── blades.core.css # reusable class-light utilities, unthemed
|
|
11
11
|
├── blades.theme.css # minimal opinionated theme
|
|
12
12
|
└── blades.css # above two together
|
|
@@ -38,20 +38,5 @@ code {
|
|
|
38
38
|
padding: 0;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
|
|
42
|
-
/* Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css */
|
|
43
|
-
.token.treeview-part {
|
|
44
|
-
.entry-line {
|
|
45
|
-
width: 2.5em !important;
|
|
46
|
-
opacity: 25%;
|
|
47
|
-
}
|
|
48
|
-
.entry-name:last-child {
|
|
49
|
-
opacity: 50%;
|
|
50
|
-
|
|
51
|
-
&::before {
|
|
52
|
-
display: none !important;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
41
|
/*```
|
|
57
42
|
<!--section--> */
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|