@anydigital/blades 0.27.0-alpha.10 → 0.27.0-alpha.11

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 (8) hide show
  1. package/README.md +2 -2
  2. package/_includes/blades/{nav.liquid → links.liquid} +9 -7
  3. package/assets/blades.css +37 -4
  4. package/assets/breakout.css +2 -2
  5. package/blades.gemspec +1 -1
  6. package/package.json +1 -1
  7. package/src/_tricks.css +32 -2
  8. package/src/breakout.css +2 -2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # `blades`<sub><sup>`[.css|.njk|.liquid]`</sup></sub>
1
+ # 🥷 <code>blades<sub><sup>.css</sup></sub></code>
2
2
 
3
- A graceful, semantic CSS extension for Pico or Tailwind, with Nunjucks/Liquid batteries included 🥷
3
+ A framework-agnostic, pure-CSS blade kit. Use with Pico, Tailwind, or any other framework; Nunjucks/Liquid batteries included (for Build Awesome/11ty/Jekyll) 🥷
4
4
 
5
5
  <!--section:css-h2-->
6
6
 
package/_includes/blades/{nav.liquid → links.liquid} RENAMED
@@ -1,11 +1,13 @@
1
- <nav>
2
- {%- for entry in nav_pages %}
3
- {% # prettier-ignore %}
4
- <a href="{{ entry.url }}" {% if entry.url == current_url %}aria-current="page"{% endif %}>
5
- {{- entry.title -}}
6
- </a>
1
+ <ul>
2
+ {%- for link in links %}
3
+ <li>
4
+ {% # prettier-ignore %}
5
+ <a href="{{ link.url }}" {% if link.url == current_url %}aria-current="page"{% endif %}>
6
+ {{- link.title -}}
7
+ </a>
8
+ </li>
7
9
  {%- endfor %}
8
- </nav>
10
+ </ul>
9
11
 
10
12
  {%- comment %}
11
13
  Compatible with:
package/assets/blades.css CHANGED
@@ -83,8 +83,8 @@ small {
83
83
  min-width: auto;
84
84
  }
85
85
 
86
- /* <!--section:responsive-table-without-wrapper-->
87
- ### Responsive tables without wrapper
86
+ /* <!--section:table-->
87
+ ### Responsive table without wrapper
88
88
  ```css */
89
89
  &:is(table):not(.does-not-exist) {
90
90
  /* Let them full-bleed */
@@ -176,8 +176,26 @@ small {
176
176
  }
177
177
  }
178
178
 
179
+ /* <!--section:table-->
180
+ ### Wider columns
181
+
182
+ Simply insert `<hr>` to forcibly widen too narrow columns (especially useful in markdown):
183
+
184
+ ```html
185
+ <table>
186
+ <tr>
187
+ <th>Title <hr> </th>
188
+ <th>Description</th>
189
+ </tr>
190
+ ...
191
+ </table>
192
+ ```
193
+
194
+ How it works:
195
+
196
+ ```css */
197
+
179
198
  table {
180
- /* Workaround to widen particular columns @TODO: add to tricks-wiki */
181
199
  th {
182
200
  hr {
183
201
  width: 12ch; /* min ~65/12 = ~5 cols */
@@ -188,6 +206,21 @@ table {
188
206
  }
189
207
  }
190
208
 
209
+ /*```
210
+ <!--section--> */
211
+
212
+ /* <!--section:table-->
213
+ ### Borderless table
214
+
215
+ `.borderless` removes all default borders:
216
+
217
+ ```html
218
+ <table class="borderless">
219
+ ...
220
+ </table>
221
+ ```
222
+ <!--section--> */
223
+
191
224
  table.borderless {
192
225
  th,
193
226
  td {
@@ -225,7 +258,7 @@ h6 {
225
258
 
226
259
  a > i {
227
260
  display: inline-block;
228
- margin-inline-end: 0.375ch; /* =3/8 */
261
+ /* margin-inline-end: 0.375ch; safer to use &nbsp;? */ /* =3/8 */
229
262
  font-style: normal;
230
263
  }
231
264
 
package/assets/breakout.css CHANGED
@@ -29,8 +29,8 @@
29
29
  min-width: auto;
30
30
  }
31
31
 
32
- /* <!--section:responsive-table-without-wrapper-->
33
- ### Responsive tables without wrapper
32
+ /* <!--section:table-->
33
+ ### Responsive table without wrapper
34
34
  ```css */
35
35
  &:is(table):not(.does-not-exist) {
36
36
  /* Let them full-bleed */
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.10"
5
+ spec.version = "0.27.0-alpha.11"
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.10",
3
+ "version": "0.27.0-alpha.11",
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/_tricks.css CHANGED
@@ -1,5 +1,22 @@
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 */
1
19
  table {
2
- /* Workaround to widen particular columns @TODO: add to tricks-wiki */
3
20
  th {
4
21
  hr {
5
22
  width: 12ch; /* min ~65/12 = ~5 cols */
@@ -9,7 +26,20 @@ table {
9
26
  }
10
27
  }
11
28
  }
29
+ /*```
30
+ <!--section--> */
31
+
32
+ /* <!--section:table-->
33
+ ### Borderless table
34
+
35
+ `.borderless` removes all default borders:
12
36
 
37
+ ```html
38
+ <table class="borderless">
39
+ ...
40
+ </table>
41
+ ```
42
+ <!--section--> */
13
43
  table.borderless {
14
44
  th,
15
45
  td {
@@ -45,7 +75,7 @@ h6 {
45
75
  /* Helper to handle icons in links */
46
76
  a > i {
47
77
  display: inline-block;
48
- margin-inline-end: 0.375ch; /* =3/8 */
78
+ /* margin-inline-end: 0.375ch; safer to use &nbsp;? */ /* =3/8 */
49
79
  font-style: normal;
50
80
  }
51
81
 
package/src/breakout.css CHANGED
@@ -29,8 +29,8 @@
29
29
  min-width: auto;
30
30
  }
31
31
 
32
- /* <!--section:responsive-table-without-wrapper-->
33
- ### Responsive tables without wrapper
32
+ /* <!--section:table-->
33
+ ### Responsive table without wrapper
34
34
  ```css */
35
35
  &:is(table):not(.does-not-exist) {
36
36
  /* Let them full-bleed */