@anydigital/blades 0.27.0-alpha.13 → 0.27.0-alpha.15

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 (13) hide show
  1. package/README.md +3 -3
  2. package/_includes/blades/html.liquid +5 -5
  3. package/_includes/blades/html.njk +8 -6
  4. package/assets/blades.css +97 -59
  5. package/assets/breakout.css +4 -24
  6. package/assets/responsive-table.css +40 -0
  7. package/blades.gemspec +1 -1
  8. package/package.json +1 -1
  9. package/src/_table.css +56 -0
  10. package/src/_tricks.css +0 -49
  11. package/src/blades.css +12 -3
  12. package/src/breakout.css +4 -24
  13. package/src/responsive-table.css +40 -0
package/README.md CHANGED
@@ -1,10 +1,10 @@
1
- # 🥷 Blades <sup>![](https://img.shields.io/github/v/release/anydigital/blades?label=&color=white&include_prereleases)</sup>
1
+ # 🥷 Blades <sup>![](https://img.shields.io/github/v/release/anydigital/blades?label=&color=black&include_prereleases)</sup>
2
2
 
3
3
  <!--section:hero-->
4
4
 
5
- <hgroup>A framework-agnostic,<wbr> class-light CSS blade kit.</hgroup>
5
+ <hgroup>Framework-agnostic,<wbr> class-light CSS+ blade kit.</hgroup>
6
6
 
7
- <big>Use with Pico, Tailwind, or any other framework.</big>
7
+ <big>Use with Pico, Tailwind, or any other CSS reset/framework.</big>
8
8
 
9
9
  <!--section-->
10
10
 
package/_includes/blades/html.liquid CHANGED
@@ -1,4 +1,4 @@
1
- {% comment %} <!--section:docs-->```liquid {% endcomment %}
1
+ {% comment %} <!--section:code-->```liquid {% endcomment %}
2
2
  <!doctype html>
3
3
  <html lang="{{ site.lang | default: 'en' }}">
4
4
  <head>
@@ -37,12 +37,12 @@
37
37
  </html>
38
38
  {% comment %}```
39
39
 
40
- #### How to use in your layout
40
+ <!--section:docs-->
41
+
42
+ To use in your layout:
41
43
 
42
44
  ```liquid {data-caption=default.liquid}
43
- {% capture body %}
44
- ...
45
- {% endcapture %}
45
+ {% capture body %}...{% endcapture %}
46
46
 
47
47
  {% include blades/html.liquid %}
48
48
  ```
package/_includes/blades/html.njk CHANGED
@@ -1,4 +1,4 @@
1
- {# <!--section:docs-->```jinja2 #}
1
+ {# <!--section:code-->```jinja2 #}
2
2
  <!doctype html>
3
3
  <html lang="{{ site.lang | d('en') }}">
4
4
  <head>
@@ -6,7 +6,7 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
7
7
  <link rel="icon" href="{{ site.favicon | d('/favicon.ico') }}" />
8
8
  <title>
9
- {{- title | striptags ~ ' | ' if title -}}
9
+ {{- title | string | striptags ~ ' | ' if title -}}
10
10
  {{- site.title -}}
11
11
  </title>
12
12
  <meta name="description" content="{{ description | d(site.description) }}" />
@@ -37,14 +37,16 @@
37
37
  </html>
38
38
  {#```
39
39
 
40
- #### How to use in your layout
40
+ - `title | string` avoids error with `| striptags` when you pass a pure number.
41
+
42
+ <!--section:docs-->
43
+
44
+ To use in your layout:
41
45
 
42
46
  ```jinja2 {data-caption=default.njk}
43
47
  {% extends 'blades/html.njk' %}
44
48
 
45
- {% block body %}
46
- ...
47
- {% endblock %}
49
+ {% block body %}...{% endblock %}
48
50
  ```
49
51
 
50
52
  Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_includes/default.njk
package/assets/blades.css CHANGED
@@ -1,6 +1,5 @@
1
1
  /**
2
- * @anydigital/blades
3
- * Framework-agnostic CSS utility helpers
2
+ * Follows the structure of https://github.com/picocss/pico/blob/main/scss/_index.scss
4
3
  */
5
4
 
6
5
  html {
@@ -52,6 +51,8 @@ small {
52
51
  }
53
52
  }
54
53
 
54
+ /* Layout */
55
+
55
56
  /* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
56
57
 
57
58
  .breakout,
@@ -83,29 +84,9 @@ small {
83
84
  min-width: auto;
84
85
  }
85
86
 
86
- /* <!--section:table-->
87
- ### Responsive table without wrapper
88
- ```css */
89
- &:is(table):not(.does-not-exist) {
90
- /* Let them full-bleed */
91
- width: max-content;
92
- min-width: auto;
93
- max-width: 100vw;
94
- padding-inline: 7.5%;
95
-
96
- /* Let them scroll */
97
- display: block;
98
- overflow-x: auto;
99
- -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
100
-
101
- th,
102
- td {
103
- padding-inline-start: 0;
104
- }
105
- }
106
- /*```
87
+ /* #TODO: add <!--section:tricks-->
107
88
  #### Soft-increase selector specificity
108
- `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
89
+ `&:is(table):not(.does-not-exist)` trick (inspired by postcss) was used here to increase specificity to (0,1,1) against (0,1,0) of selectors like `&:is(table, .table)`
109
90
  <!--section--> */
110
91
 
111
92
  /* Max out the width of the element */
@@ -116,7 +97,7 @@ small {
116
97
  }
117
98
 
118
99
  .breakout-all > * {
119
- &:is(h2, h3, h4, hr):not([class]) {
100
+ &:is(h2, h3, h4, h5, h6, hr):not([class]) {
120
101
  position: relative;
121
102
 
122
103
  &::before {
@@ -128,7 +109,7 @@ small {
128
109
  }
129
110
  }
130
111
 
131
- &:is(h2, h3, h4):not([class]) {
112
+ &:is(h2, h3, h4, h5, h6):not([class]) {
132
113
  &::before {
133
114
  width: 10em;
134
115
  right: 100%;
@@ -160,39 +141,26 @@ small {
160
141
  }
161
142
  }
162
143
 
163
- /* Prism.js */
144
+ /* Content */
164
145
 
165
- .token.treeview-part {
166
- .entry-line {
167
- width: 2.5em !important;
168
- opacity: 25%;
169
- }
170
- .entry-name:last-child {
171
- opacity: 50%;
172
-
173
- &::before {
174
- display: none !important;
175
- }
176
- }
177
- }
178
-
179
- /* <!--section:table-->
180
- ### Wider columns
181
-
182
- Simply insert `<hr>` to forcibly widen too narrow columns (especially useful in markdown):
146
+ /* <!--section:docs-->
147
+ ### Horizontal expanders
183
148
 
149
+ Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especially useful in markdown):
184
150
  ```html
185
- <table>
186
- <tr>
187
- <th>Title <hr> </th>
188
- <th>Description</th>
189
- </tr>
190
- ...
191
- </table>
151
+ <th>Col <hr></th>
192
152
  ```
153
+ Example table:
154
+ | SSG <hr> | Description |
155
+ | --- | --- |
156
+ | Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
193
157
 
194
- How it works:
158
+ Same table without `<hr>`-expander would render as:
159
+ | SSG | Description |
160
+ | --- | --- |
161
+ | Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
195
162
 
163
+ ###### How it works
196
164
  ```css */
197
165
 
198
166
  table {
@@ -202,23 +170,30 @@ table {
202
170
  height: 0;
203
171
  margin: 0;
204
172
  visibility: hidden;
173
+
174
+ &.x2 {
175
+ width: 24ch;
176
+ }
205
177
  }
206
178
  }
207
179
  }
208
180
 
209
181
  /*```
210
- <!--section--> */
211
-
212
- /* <!--section:table-->
182
+ ---
213
183
  ### Borderless table
214
184
 
215
185
  `.borderless` removes all default borders:
186
+ | Less | | Borders |
187
+ | ---- | ---------- | ------- |
188
+ | | ↖ ↗<br>↙ ↘ | |
189
+ | More | | Fun |
190
+
191
+ {.borderless}
216
192
 
217
193
  ```html
218
- <table class="borderless">
219
- ...
220
- </table>
194
+ <table class="borderless">...</table>
221
195
  ```
196
+ Living example: https://bladeswitch.com/#minimal-dependencies table
222
197
  <!--section--> */
223
198
 
224
199
  table.borderless {
@@ -228,6 +203,51 @@ table.borderless {
228
203
  }
229
204
  }
230
205
 
206
+ /* <!--section:code-->
207
+ ```css */
208
+
209
+ table.responsive,
210
+ .breakout > table,
211
+ .breakout-all > table {
212
+ /* Center horizontally */
213
+ margin-left: 50%;
214
+ transform: translateX(-50%);
215
+
216
+ /* Let them full-bleed */
217
+ width: max-content;
218
+ min-width: auto;
219
+ max-width: 100vw;
220
+ padding-inline: 7.5%;
221
+
222
+ /* Let them scroll */
223
+ display: block;
224
+ overflow-x: auto;
225
+ -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
226
+
227
+ th,
228
+ td {
229
+ padding-inline-start: 0;
230
+ }
231
+ }
232
+
233
+ /*```
234
+ <!--section:docs-->
235
+ ### Responsive table without wrapper
236
+ `.responsive` allows a table to full-bleed and scroll on mobile:
237
+ <div>
238
+
239
+ | Term | Description <hr class="x2"> | Link |
240
+ | --- | --- | --- |
241
+ | 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 |
242
+
243
+ {.responsive}
244
+ </div>
245
+
246
+ Tables inside `.breakout[-all]` are responsive by default.
247
+ <!--section--> */
248
+
249
+ /* Utilities */
250
+
231
251
  /* Header anchors @TODO: add to tricks-wiki */
232
252
 
233
253
  h1,
@@ -353,3 +373,21 @@ ol {
353
373
  }
354
374
  }
355
375
  }
376
+
377
+ /* 3rd-party */
378
+
379
+ /* Prism.js */
380
+
381
+ .token.treeview-part {
382
+ .entry-line {
383
+ width: 2.5em !important;
384
+ opacity: 25%;
385
+ }
386
+ .entry-name:last-child {
387
+ opacity: 50%;
388
+
389
+ &::before {
390
+ display: none !important;
391
+ }
392
+ }
393
+ }
package/assets/breakout.css CHANGED
@@ -29,29 +29,9 @@
29
29
  min-width: auto;
30
30
  }
31
31
 
32
- /* <!--section:table-->
33
- ### Responsive table without wrapper
34
- ```css */
35
- &:is(table):not(.does-not-exist) {
36
- /* Let them full-bleed */
37
- width: max-content;
38
- min-width: auto;
39
- max-width: 100vw;
40
- padding-inline: 7.5%;
41
-
42
- /* Let them scroll */
43
- display: block;
44
- overflow-x: auto;
45
- -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
46
-
47
- th,
48
- td {
49
- padding-inline-start: 0;
50
- }
51
- }
52
- /*```
32
+ /* #TODO: add <!--section:tricks-->
53
33
  #### Soft-increase selector specificity
54
- `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
34
+ `&:is(table):not(.does-not-exist)` trick (inspired by postcss) was used here to increase specificity to (0,1,1) against (0,1,0) of selectors like `&:is(table, .table)`
55
35
  <!--section--> */
56
36
 
57
37
  /* Max out the width of the element */
@@ -62,7 +42,7 @@
62
42
  }
63
43
 
64
44
  .breakout-all > * {
65
- &:is(h2, h3, h4, hr):not([class]) {
45
+ &:is(h2, h3, h4, h5, h6, hr):not([class]) {
66
46
  position: relative;
67
47
 
68
48
  &::before {
@@ -74,7 +54,7 @@
74
54
  }
75
55
  }
76
56
 
77
- &:is(h2, h3, h4):not([class]) {
57
+ &:is(h2, h3, h4, h5, h6):not([class]) {
78
58
  &::before {
79
59
  width: 10em;
80
60
  right: 100%;
package/assets/responsive-table.css ADDED
@@ -0,0 +1,40 @@
1
+ /* <!--section:code-->
2
+ ```css */
3
+ table.responsive,
4
+ .breakout > table,
5
+ .breakout-all > table {
6
+ /* Center horizontally */
7
+ margin-left: 50%;
8
+ transform: translateX(-50%);
9
+
10
+ /* Let them full-bleed */
11
+ width: max-content;
12
+ min-width: auto;
13
+ max-width: 100vw;
14
+ padding-inline: 7.5%;
15
+
16
+ /* Let them scroll */
17
+ display: block;
18
+ overflow-x: auto;
19
+ -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
20
+
21
+ th,
22
+ td {
23
+ padding-inline-start: 0;
24
+ }
25
+ }
26
+ /*```
27
+ <!--section:docs-->
28
+ ### Responsive table without wrapper
29
+ `.responsive` allows a table to full-bleed and scroll on mobile:
30
+ <div>
31
+
32
+ | Term | Description <hr class="x2"> | Link |
33
+ | --- | --- | --- |
34
+ | 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 |
35
+
36
+ {.responsive}
37
+ </div>
38
+
39
+ Tables inside `.breakout[-all]` are responsive by default.
40
+ <!--section--> */
package/blades.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "blades"
5
- spec.version = "0.27.0-alpha.13"
5
+ spec.version = "0.27.0-alpha.15"
6
6
  spec.authors = ["Anton Staroverov"]
7
7
 
8
8
  spec.summary = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/blades",
3
- "version": "0.27.0-alpha.13",
3
+ "version": "0.27.0-alpha.15",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
5
5
  "style": "./src/blades.css",
6
6
  "exports": {
package/src/_table.css ADDED
@@ -0,0 +1,56 @@
1
+ /* <!--section:docs-->
2
+ ### Horizontal expanders
3
+
4
+ Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especially useful in markdown):
5
+ ```html
6
+ <th>Col <hr></th>
7
+ ```
8
+ Example table:
9
+ | SSG <hr> | Description |
10
+ | --- | --- |
11
+ | Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
12
+
13
+ Same table without `<hr>`-expander would render as:
14
+ | SSG | Description |
15
+ | --- | --- |
16
+ | Build Awesome | Simple, flexible Static Site Generator (SSG) written in JavaScript. It is designed to be a faster, modern alternative to Jekyll, known for its "zero-config" philosophy and focus on performance. |
17
+
18
+ ###### How it works
19
+ ```css */
20
+ table {
21
+ th {
22
+ hr {
23
+ width: 12ch; /* min ~65/12 = ~5 cols */
24
+ height: 0;
25
+ margin: 0;
26
+ visibility: hidden;
27
+
28
+ &.x2 {
29
+ width: 24ch;
30
+ }
31
+ }
32
+ }
33
+ }
34
+ /*```
35
+ ---
36
+ ### Borderless table
37
+
38
+ `.borderless` removes all default borders:
39
+ | Less | | Borders |
40
+ | ---- | ---------- | ------- |
41
+ | | ↖ ↗<br>↙ ↘ | |
42
+ | More | | Fun |
43
+
44
+ {.borderless}
45
+
46
+ ```html
47
+ <table class="borderless">...</table>
48
+ ```
49
+ Living example: https://bladeswitch.com/#minimal-dependencies table
50
+ <!--section--> */
51
+ table.borderless {
52
+ th,
53
+ td {
54
+ border: none;
55
+ }
56
+ }
package/src/_tricks.css CHANGED
@@ -1,52 +1,3 @@
1
- /* <!--section:table-->
2
- ### Wider columns
3
-
4
- Simply insert `<hr>` to forcibly widen too narrow columns (especially useful in markdown):
5
-
6
- ```html
7
- <table>
8
- <tr>
9
- <th>Title <hr> </th>
10
- <th>Description</th>
11
- </tr>
12
- ...
13
- </table>
14
- ```
15
-
16
- How it works:
17
-
18
- ```css */
19
- table {
20
- th {
21
- hr {
22
- width: 12ch; /* min ~65/12 = ~5 cols */
23
- height: 0;
24
- margin: 0;
25
- visibility: hidden;
26
- }
27
- }
28
- }
29
- /*```
30
- <!--section--> */
31
-
32
- /* <!--section:table-->
33
- ### Borderless table
34
-
35
- `.borderless` removes all default borders:
36
-
37
- ```html
38
- <table class="borderless">
39
- ...
40
- </table>
41
- ```
42
- <!--section--> */
43
- table.borderless {
44
- th,
45
- td {
46
- border: none;
47
- }
48
- }
49
-
50
1
  /* Header anchors @TODO: add to tricks-wiki */
51
2
  h1,
52
3
  h2,
package/src/blades.css CHANGED
@@ -1,9 +1,18 @@
1
1
  /**
2
- * @anydigital/blades
3
- * Framework-agnostic CSS utility helpers
2
+ * Follows the structure of https://github.com/picocss/pico/blob/main/scss/_index.scss
4
3
  */
5
4
 
6
5
  @import "./_classless";
6
+
7
+ /* Layout */
7
8
  @import "./breakout";
8
- @import "./_prism";
9
+
10
+ /* Content */
11
+ @import "./_table";
12
+ @import "./responsive-table";
13
+
14
+ /* Utilities */
9
15
  @import "./_tricks";
16
+
17
+ /* 3rd-party */
18
+ @import "./_prism";
package/src/breakout.css CHANGED
@@ -29,29 +29,9 @@
29
29
  min-width: auto;
30
30
  }
31
31
 
32
- /* <!--section:table-->
33
- ### Responsive table without wrapper
34
- ```css */
35
- &:is(table):not(.does-not-exist) {
36
- /* Let them full-bleed */
37
- width: max-content;
38
- min-width: auto;
39
- max-width: 100vw;
40
- padding-inline: 7.5%;
41
-
42
- /* Let them scroll */
43
- display: block;
44
- overflow-x: auto;
45
- -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
46
-
47
- th,
48
- td {
49
- padding-inline-start: 0;
50
- }
51
- }
52
- /*```
32
+ /* #TODO: add <!--section:tricks-->
53
33
  #### Soft-increase selector specificity
54
- `&:is(table):not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
34
+ `&:is(table):not(.does-not-exist)` trick (inspired by postcss) was used here to increase specificity to (0,1,1) against (0,1,0) of selectors like `&:is(table, .table)`
55
35
  <!--section--> */
56
36
 
57
37
  /* Max out the width of the element */
@@ -62,7 +42,7 @@
62
42
  }
63
43
 
64
44
  .breakout-all > * {
65
- &:is(h2, h3, h4, hr):not([class]) {
45
+ &:is(h2, h3, h4, h5, h6, hr):not([class]) {
66
46
  position: relative;
67
47
 
68
48
  &::before {
@@ -74,7 +54,7 @@
74
54
  }
75
55
  }
76
56
 
77
- &:is(h2, h3, h4):not([class]) {
57
+ &:is(h2, h3, h4, h5, h6):not([class]) {
78
58
  &::before {
79
59
  width: 10em;
80
60
  right: 100%;
package/src/responsive-table.css ADDED
@@ -0,0 +1,40 @@
1
+ /* <!--section:code-->
2
+ ```css */
3
+ table.responsive,
4
+ .breakout > table,
5
+ .breakout-all > table {
6
+ /* Center horizontally */
7
+ margin-left: 50%;
8
+ transform: translateX(-50%);
9
+
10
+ /* Let them full-bleed */
11
+ width: max-content;
12
+ min-width: auto;
13
+ max-width: 100vw;
14
+ padding-inline: 7.5%;
15
+
16
+ /* Let them scroll */
17
+ display: block;
18
+ overflow-x: auto;
19
+ -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
20
+
21
+ th,
22
+ td {
23
+ padding-inline-start: 0;
24
+ }
25
+ }
26
+ /*```
27
+ <!--section:docs-->
28
+ ### Responsive table without wrapper
29
+ `.responsive` allows a table to full-bleed and scroll on mobile:
30
+ <div>
31
+
32
+ | Term | Description <hr class="x2"> | Link |
33
+ | --- | --- | --- |
34
+ | 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 |
35
+
36
+ {.responsive}
37
+ </div>
38
+
39
+ Tables inside `.breakout[-all]` are responsive by default.
40
+ <!--section--> */