@anyblades/blades 0.28.0-alpha.4 → 0.28.0-alpha.6
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 +29 -35
- package/_includes/blades/html.njk +1 -1
- package/assets/blades.core.css +201 -132
- package/assets/blades.css +234 -161
- package/assets/blades.theme.css +32 -27
- package/assets/breakout.css +40 -8
- package/assets/link-icon.css +20 -12
- package/assets/responsive-table.css +16 -13
- package/blades.gemspec +1 -1
- package/package.json +1 -1
- package/src/_layout.css +20 -23
- package/src/_utilities.css +35 -11
- package/src/blades.core.css +4 -4
- package/src/blades.theme.css +33 -29
- package/src/breakout.css +40 -8
- package/src/{_code.css → content/_code.css} +17 -4
- package/src/content/_table.css +66 -0
- package/src/content/_typography.css +114 -0
- package/src/link-icon.css +20 -12
- package/src/responsive-table.css +16 -13
- package/src/_table.css +0 -67
- package/src/_typography.css +0 -116
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
|
|
2
|
+
<!--section:docs-->
|
|
3
|
+
|
|
4
|
+
### Column expanders
|
|
5
|
+
|
|
6
|
+
Place `<hr>` element inside `<th>` column to expand it horizontally:
|
|
7
|
+
|
|
8
|
+
<article>
|
|
9
|
+
|
|
10
|
+
| Column with `<hr>` <hr> | Same column without `<hr>` |
|
|
11
|
+
| --- | --- |
|
|
12
|
+
| (012) 345-6789 | (012) 345-6789 |
|
|
13
|
+
|
|
14
|
+
{style=max-width:30ch}
|
|
15
|
+
</article>
|
|
16
|
+
|
|
17
|
+
Living examples of big tables with `<hr>`-expanders:
|
|
18
|
+
- https://blades.ninja/ai/ide/
|
|
19
|
+
- https://blades.ninja/build-awesome-11ty/starters/
|
|
20
|
+
- https://blades.ninja/css/frameworks/
|
|
21
|
+
- https://blades.ninja/ssg/
|
|
22
|
+
|
|
23
|
+
<details>How it works:
|
|
24
|
+
```css */
|
|
25
|
+
table {
|
|
26
|
+
th {
|
|
27
|
+
hr {
|
|
28
|
+
width: 12ch; /* min ~65/12 = ~5 cols */
|
|
29
|
+
height: 0;
|
|
30
|
+
margin: 0;
|
|
31
|
+
visibility: hidden;
|
|
32
|
+
|
|
33
|
+
&.lg {
|
|
34
|
+
width: 18ch;
|
|
35
|
+
}
|
|
36
|
+
&.x2 {
|
|
37
|
+
width: 24ch;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
/*```
|
|
43
|
+
</details>
|
|
44
|
+
|
|
45
|
+
### Borderless table
|
|
46
|
+
|
|
47
|
+
`.borderless` removes all default borders:
|
|
48
|
+
|
|
49
|
+
<article>
|
|
50
|
+
|
|
51
|
+
| Less | borders |
|
|
52
|
+
| ---- | ------- |
|
|
53
|
+
| more | fun |
|
|
54
|
+
|
|
55
|
+
{.borderless}
|
|
56
|
+
</article>
|
|
57
|
+
|
|
58
|
+
Living example: https://bladeswitch.com/#minimal-dependencies table
|
|
59
|
+
|
|
60
|
+
<!--section--> */
|
|
61
|
+
table.borderless {
|
|
62
|
+
th,
|
|
63
|
+
td {
|
|
64
|
+
border: none;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
|
|
2
|
+
<!--section:docs-->
|
|
3
|
+
|
|
4
|
+
### Heading anchors
|
|
5
|
+
|
|
6
|
+
Links with `href="#..."` inside headings are automatically displayed as anchors:
|
|
7
|
+
|
|
8
|
+
<article>
|
|
9
|
+
<h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
|
|
10
|
+
</article>
|
|
11
|
+
|
|
12
|
+
<details>How it works:
|
|
13
|
+
```css */
|
|
14
|
+
h1,
|
|
15
|
+
h2,
|
|
16
|
+
h3,
|
|
17
|
+
h4,
|
|
18
|
+
h5,
|
|
19
|
+
h6 {
|
|
20
|
+
position: relative;
|
|
21
|
+
|
|
22
|
+
a[href^="#"] {
|
|
23
|
+
position: absolute;
|
|
24
|
+
right: 100%;
|
|
25
|
+
top: 50%;
|
|
26
|
+
transform: translateY(-50%);
|
|
27
|
+
padding-right: 0.2ch;
|
|
28
|
+
color: silver;
|
|
29
|
+
text-decoration: none;
|
|
30
|
+
visibility: hidden;
|
|
31
|
+
}
|
|
32
|
+
@media /* to avoid double-tap on touch devices */ (hover: hover) {
|
|
33
|
+
&:hover {
|
|
34
|
+
a[href^="#"] {
|
|
35
|
+
visibility: visible;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
/*```
|
|
41
|
+
</details>
|
|
42
|
+
|
|
43
|
+
**PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
|
|
44
|
+
|
|
45
|
+
### List markers
|
|
46
|
+
|
|
47
|
+
Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
|
|
48
|
+
|
|
49
|
+
<article>
|
|
50
|
+
|
|
51
|
+
- you
|
|
52
|
+
- can
|
|
53
|
+
- make
|
|
54
|
+
- really
|
|
55
|
+
- cool markers {style="--list-marker:'🧊 '"}
|
|
56
|
+
- with
|
|
57
|
+
- *Bl*ades {style="--list-marker:'🥷 '"}
|
|
58
|
+
|
|
59
|
+
{style="--list-marker:'→ '"}
|
|
60
|
+
</article>
|
|
61
|
+
|
|
62
|
+
<details>How it works:
|
|
63
|
+
```css */
|
|
64
|
+
ul,
|
|
65
|
+
ol {
|
|
66
|
+
&[style*="--list-marker:"] {
|
|
67
|
+
list-style-type: var(--list-marker);
|
|
68
|
+
|
|
69
|
+
> li {
|
|
70
|
+
list-style-type: inherit;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
li[style*="--list-marker:"] {
|
|
75
|
+
list-style-type: var(--list-marker);
|
|
76
|
+
}
|
|
77
|
+
li[data-marker]::marker {
|
|
78
|
+
/* ⚠️ `data-marker` works only in Chrome and Firefox */
|
|
79
|
+
content: attr(data-marker) " ";
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
/*```
|
|
83
|
+
</details>
|
|
84
|
+
|
|
85
|
+
### Unlist
|
|
86
|
+
|
|
87
|
+
Helper class to remove list styling at all:
|
|
88
|
+
|
|
89
|
+
<article>
|
|
90
|
+
|
|
91
|
+
- One: <article>1</article>
|
|
92
|
+
- Two: <article>2</article>
|
|
93
|
+
- Three: <article>3</article>
|
|
94
|
+
|
|
95
|
+
{.unlist .grid style=margin:0}
|
|
96
|
+
</article>
|
|
97
|
+
|
|
98
|
+
<details>How it works:
|
|
99
|
+
```css */
|
|
100
|
+
ul,
|
|
101
|
+
ol {
|
|
102
|
+
&.unlist,
|
|
103
|
+
&.unlist-all,
|
|
104
|
+
.unlist-all & {
|
|
105
|
+
padding-inline-start: 0;
|
|
106
|
+
|
|
107
|
+
> li {
|
|
108
|
+
list-style: none;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
/*```
|
|
113
|
+
</details>
|
|
114
|
+
<!--section--> */
|
package/src/link-icon.css
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
|
|
2
|
-
<!--section:
|
|
2
|
+
<!--section:how-->
|
|
3
|
+
<details>How it works:
|
|
3
4
|
```css */
|
|
4
5
|
a {
|
|
5
6
|
/* Use inline flex only if link contains an icon */
|
|
@@ -33,24 +34,31 @@ a {
|
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
/*```
|
|
36
|
-
>
|
|
37
|
+
</details>
|
|
37
38
|
|
|
38
|
-
|
|
39
|
+
How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
|
|
39
40
|
|
|
40
|
-
|
|
41
|
+
**PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
|
|
42
|
+
|
|
43
|
+
<!--section:summary-->
|
|
44
|
+
|
|
45
|
+
Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons.
|
|
41
46
|
|
|
42
47
|
<!--section:docs-->
|
|
43
48
|
|
|
44
|
-
|
|
49
|
+
<article class="breakout-item">
|
|
45
50
|
|
|
46
|
-
|
|
|
47
|
-
|
|
|
48
|
-
| [
|
|
49
|
-
| [
|
|
50
|
-
| [<
|
|
51
|
+
| Use `<i>`-helper with | Clean HTML without `<span>ning` |
|
|
52
|
+
| ------------------------------------------------------------------------------------- | ------------------------------------ |
|
|
53
|
+
| [<i>🥷</i> Emojis](#) | `<a><i>🥷</i> Text</a>` |
|
|
54
|
+
| [<i></i> Favicons](#) | `<a><i><img src="..."></i> Text</a>` |
|
|
55
|
+
| [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#) | `<a><i class="fa-..."></i> Text</a>` |
|
|
56
|
+
</article>
|
|
51
57
|
|
|
52
|
-
|
|
58
|
+
Or even:
|
|
53
59
|
|
|
54
|
-
|
|
60
|
+
<article>
|
|
61
|
+
<a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
|
|
62
|
+
</article>
|
|
55
63
|
|
|
56
64
|
<!--section--> */
|
package/src/responsive-table.css
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
/*
|
|
1
|
+
/*
|
|
2
|
+
<!--section:how-->
|
|
3
|
+
<details>How it works:
|
|
2
4
|
```css */
|
|
3
5
|
table.responsive,
|
|
4
6
|
.breakout > table:not(.does-not-exist),
|
|
@@ -24,17 +26,20 @@ table.responsive,
|
|
|
24
26
|
}
|
|
25
27
|
}
|
|
26
28
|
/*```
|
|
27
|
-
|
|
28
|
-
Soft-increase selector specificity trick:
|
|
29
|
+
</details>
|
|
29
30
|
|
|
30
|
-
`table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
31
|
+
`table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
31
32
|
|
|
32
|
-
<!--section:
|
|
33
|
+
<!--section:summary-->
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
`.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
|
|
36
|
+
|
|
37
|
+
Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
35
38
|
|
|
36
39
|
<!--section:docs-->
|
|
37
40
|
|
|
41
|
+
### Demo table
|
|
42
|
+
|
|
38
43
|
| Term | Description <hr class="x2"> | Link |
|
|
39
44
|
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
|
|
40
45
|
| Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
|
|
@@ -43,13 +48,11 @@ Soft-increase selector specificity trick:
|
|
|
43
48
|
|
|
44
49
|
---
|
|
45
50
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
Living examples:
|
|
51
|
+
Living examples: <!--A-Z-->
|
|
49
52
|
|
|
50
|
-
- https://
|
|
51
|
-
- https://
|
|
52
|
-
- https://
|
|
53
|
-
- https://blades.ninja/
|
|
53
|
+
- https://blades.ninja/ai/ide/
|
|
54
|
+
- https://blades.ninja/build-awesome-11ty/starters/
|
|
55
|
+
- https://blades.ninja/css/frameworks/
|
|
56
|
+
- https://blades.ninja/ssg/
|
|
54
57
|
|
|
55
58
|
<!--section--> */
|
package/src/_table.css
DELETED
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
|
|
2
|
-
<!--section:docs-->
|
|
3
|
-
|
|
4
|
-
### Horizontal expanders
|
|
5
|
-
|
|
6
|
-
Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especially useful in markdown):
|
|
7
|
-
```html
|
|
8
|
-
<th>Col <hr></th>
|
|
9
|
-
```
|
|
10
|
-
Example table before:
|
|
11
|
-
<article class="overflow-auto"><table>
|
|
12
|
-
<tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
|
|
13
|
-
</table></article>
|
|
14
|
-
|
|
15
|
-
Same table after adding `<hr>`-expanders:
|
|
16
|
-
<article class="overflow-auto"><table>
|
|
17
|
-
<tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
|
|
18
|
-
</table></article>
|
|
19
|
-
|
|
20
|
-
Living examples of big tables with `<hr>`-expanders:
|
|
21
|
-
- https://any.digital/insights/ai-ide/
|
|
22
|
-
- https://any.digital/insights/css-frameworks/
|
|
23
|
-
- https://any.digital/insights/ssg/
|
|
24
|
-
- https://blades.ninja/build-awesome-11ty/#min-starters
|
|
25
|
-
|
|
26
|
-
How it works:
|
|
27
|
-
```css */
|
|
28
|
-
table {
|
|
29
|
-
th {
|
|
30
|
-
hr {
|
|
31
|
-
width: 12ch; /* min ~65/12 = ~5 cols */
|
|
32
|
-
height: 0;
|
|
33
|
-
margin: 0;
|
|
34
|
-
visibility: hidden;
|
|
35
|
-
|
|
36
|
-
&.lg {
|
|
37
|
-
width: 18ch;
|
|
38
|
-
}
|
|
39
|
-
&.x2 {
|
|
40
|
-
width: 24ch;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
/*```
|
|
46
|
-
### Borderless table
|
|
47
|
-
|
|
48
|
-
`<table class="borderless">` removes all default borders:
|
|
49
|
-
|
|
50
|
-
<article>
|
|
51
|
-
|
|
52
|
-
| Less | borders |
|
|
53
|
-
| ---- | ------- |
|
|
54
|
-
| more | fun |
|
|
55
|
-
|
|
56
|
-
{.borderless}
|
|
57
|
-
</article>
|
|
58
|
-
|
|
59
|
-
Living example: https://bladeswitch.com/#minimal-dependencies table
|
|
60
|
-
|
|
61
|
-
<!--section--> */
|
|
62
|
-
table.borderless {
|
|
63
|
-
th,
|
|
64
|
-
td {
|
|
65
|
-
border: none;
|
|
66
|
-
}
|
|
67
|
-
}
|
package/src/_typography.css
DELETED
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
|
|
2
|
-
<!--section:docs-intro-->
|
|
3
|
-
|
|
4
|
-
Global styles:
|
|
5
|
-
```css */
|
|
6
|
-
html {
|
|
7
|
-
/* Enable font smoothing */
|
|
8
|
-
-webkit-font-smoothing: antialiased;
|
|
9
|
-
-moz-osx-font-smoothing: grayscale;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
body {
|
|
13
|
-
/* Evaluates the last ~4 lines of text blocks to prevent a single word from sitting on the final line. */
|
|
14
|
-
text-wrap: pretty;
|
|
15
|
-
/* Enable global hyphenation */
|
|
16
|
-
hyphens: auto;
|
|
17
|
-
/* ... except for links and tables which are better (safer) without hyphenation */
|
|
18
|
-
a,
|
|
19
|
-
table {
|
|
20
|
-
hyphens: none;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
/*```
|
|
24
|
-
<!--section:docs-->
|
|
25
|
-
|
|
26
|
-
### Heading anchors
|
|
27
|
-
|
|
28
|
-
Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
|
|
29
|
-
|
|
30
|
-
<article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
|
|
31
|
-
|
|
32
|
-
How it works:
|
|
33
|
-
```css */
|
|
34
|
-
h1,
|
|
35
|
-
h2,
|
|
36
|
-
h3,
|
|
37
|
-
h4,
|
|
38
|
-
h5,
|
|
39
|
-
h6 {
|
|
40
|
-
position: relative;
|
|
41
|
-
|
|
42
|
-
[data-is-anchor] {
|
|
43
|
-
position: absolute;
|
|
44
|
-
right: 100%;
|
|
45
|
-
top: 50%;
|
|
46
|
-
transform: translateY(-50%);
|
|
47
|
-
padding-right: 0.2ch;
|
|
48
|
-
color: silver;
|
|
49
|
-
text-decoration: none;
|
|
50
|
-
visibility: hidden;
|
|
51
|
-
}
|
|
52
|
-
/* Avoid double-tap on touch devices */
|
|
53
|
-
@media (hover: hover) {
|
|
54
|
-
&:hover {
|
|
55
|
-
[data-is-anchor] {
|
|
56
|
-
visibility: visible;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
/*```
|
|
62
|
-
> **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
|
|
63
|
-
|
|
64
|
-
### List markers
|
|
65
|
-
|
|
66
|
-
Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
|
|
67
|
-
<article>
|
|
68
|
-
|
|
69
|
-
- Customize
|
|
70
|
-
- list
|
|
71
|
-
- markers
|
|
72
|
-
- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
|
|
73
|
-
|
|
74
|
-
{style="--list-marker:'🧊 '"}
|
|
75
|
-
</article>
|
|
76
|
-
|
|
77
|
-
How it works:
|
|
78
|
-
```css */
|
|
79
|
-
ul,
|
|
80
|
-
ol {
|
|
81
|
-
&[style*="--list-marker:"] {
|
|
82
|
-
list-style-type: var(--list-marker);
|
|
83
|
-
|
|
84
|
-
> li {
|
|
85
|
-
list-style-type: inherit;
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
li[style*="--list-marker:"] {
|
|
90
|
-
list-style-type: var(--list-marker);
|
|
91
|
-
}
|
|
92
|
-
li[data-marker]::marker {
|
|
93
|
-
/* ⚠️ `data-marker` works only in Chrome and Firefox */
|
|
94
|
-
content: attr(data-marker) " ";
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
/*```
|
|
98
|
-
|
|
99
|
-
### Unlist
|
|
100
|
-
|
|
101
|
-
Helper class to remove list styling at all:
|
|
102
|
-
```css */
|
|
103
|
-
ul,
|
|
104
|
-
ol {
|
|
105
|
-
&.unlist,
|
|
106
|
-
&.unlist-all,
|
|
107
|
-
.unlist-all & {
|
|
108
|
-
padding-inline-start: 0;
|
|
109
|
-
|
|
110
|
-
> li {
|
|
111
|
-
list-style: none;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
/*```
|
|
116
|
-
<!--section--> */
|