@digicreon/mucss 1.4.0 → 1.4.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/README.md +4 -3
- package/dist/mu.amber.css +1 -1
- package/dist/mu.azure.css +1 -1
- package/dist/mu.blue.css +1 -1
- package/dist/mu.css +1 -1
- package/dist/mu.cyan.css +1 -1
- package/dist/mu.fuchsia.css +1 -1
- package/dist/mu.green.css +1 -1
- package/dist/mu.grey.css +1 -1
- package/dist/mu.indigo.css +1 -1
- package/dist/mu.jade.css +1 -1
- package/dist/mu.lime.css +1 -1
- package/dist/mu.orange.css +1 -1
- package/dist/mu.pink.css +1 -1
- package/dist/mu.pumpkin.css +1 -1
- package/dist/mu.purple.css +1 -1
- package/dist/mu.red.css +1 -1
- package/dist/mu.sand.css +1 -1
- package/dist/mu.slate.css +1 -1
- package/dist/mu.violet.css +1 -1
- package/dist/mu.yellow.css +1 -1
- package/dist/mu.zinc.css +1 -1
- package/documentation/mu.table.md +8 -19
- package/documentation/mu.var.md +53 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# µTable
|
|
2
2
|
|
|
3
|
-
**µTable** provides enhanced table styles for the [µCSS](.) framework. It adds hover highlights, striped rows, bordered cells, compact padding
|
|
3
|
+
**µTable** provides enhanced table styles for the [µCSS](.) framework. It adds hover highlights, striped rows, bordered cells, and compact padding on top of the default table styling.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -65,16 +65,6 @@ Reduces cell padding to `0.25rem 0.5rem` for denser data display.
|
|
|
65
65
|
</table>
|
|
66
66
|
```
|
|
67
67
|
|
|
68
|
-
### Fullwidth
|
|
69
|
-
|
|
70
|
-
Forces the table to take up 100% of its container width.
|
|
71
|
-
|
|
72
|
-
```html
|
|
73
|
-
<table class="table-fullwidth">
|
|
74
|
-
...
|
|
75
|
-
</table>
|
|
76
|
-
```
|
|
77
|
-
|
|
78
68
|
---
|
|
79
69
|
|
|
80
70
|
## Combining variants
|
|
@@ -82,8 +72,8 @@ Forces the table to take up 100% of its container width.
|
|
|
82
72
|
All modifier classes can be combined freely. Common combinations:
|
|
83
73
|
|
|
84
74
|
```html
|
|
85
|
-
<!-- Hover + bordered
|
|
86
|
-
<table class="table-hover table-bordered
|
|
75
|
+
<!-- Hover + bordered -->
|
|
76
|
+
<table class="table-hover table-bordered">
|
|
87
77
|
<thead>
|
|
88
78
|
<tr><th>ID</th><th>Name</th><th>Email</th><th>Role</th></tr>
|
|
89
79
|
</thead>
|
|
@@ -93,8 +83,8 @@ All modifier classes can be combined freely. Common combinations:
|
|
|
93
83
|
</tbody>
|
|
94
84
|
</table>
|
|
95
85
|
|
|
96
|
-
<!-- Compact + bordered
|
|
97
|
-
<table class="table-compact table-bordered
|
|
86
|
+
<!-- Compact + bordered -->
|
|
87
|
+
<table class="table-compact table-bordered">
|
|
98
88
|
<thead>
|
|
99
89
|
<tr><th>Key</th><th>Value</th><th>Type</th></tr>
|
|
100
90
|
</thead>
|
|
@@ -104,8 +94,8 @@ All modifier classes can be combined freely. Common combinations:
|
|
|
104
94
|
</tbody>
|
|
105
95
|
</table>
|
|
106
96
|
|
|
107
|
-
<!-- Striped + hover + bordered
|
|
108
|
-
<table class="table-striped table-hover table-bordered
|
|
97
|
+
<!-- Striped + hover + bordered -->
|
|
98
|
+
<table class="table-striped table-hover table-bordered">
|
|
109
99
|
...
|
|
110
100
|
</table>
|
|
111
101
|
```
|
|
@@ -120,7 +110,6 @@ All modifier classes can be combined freely. Common combinations:
|
|
|
120
110
|
| `.table-striped` | Alternating background on odd rows (50% `--mu-secondary-background`) |
|
|
121
111
|
| `.table-bordered` | 1px solid border on table, `<th>`, and `<td>` |
|
|
122
112
|
| `.table-compact` | Reduced padding: `0.25rem 0.5rem` |
|
|
123
|
-
| `.table-fullwidth` | `width: 100%` |
|
|
124
113
|
|
|
125
114
|
---
|
|
126
115
|
|
|
@@ -130,7 +119,7 @@ For tables wider than their container, wrap them in a scrollable `<div>`:
|
|
|
130
119
|
|
|
131
120
|
```html
|
|
132
121
|
<div style="overflow-x: auto;">
|
|
133
|
-
<table class="table-bordered
|
|
122
|
+
<table class="table-bordered">
|
|
134
123
|
...
|
|
135
124
|
</table>
|
|
136
125
|
</div>
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# µVar
|
|
2
|
+
|
|
3
|
+
**µVar** styles the `<var>` HTML element to match the appearance of `<code>`, `<kbd>`, and `<samp>` in [µCSS](.). PicoCSS does not style `<var>`, so this component fills the gap.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Usage
|
|
8
|
+
|
|
9
|
+
Use `<var>` to represent a variable name in code or a mathematical expression:
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<p>Set <var>x</var> to the return value of <code>getData()</code>.</p>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
No class is needed — the styling applies directly to the `<var>` element.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Styling details
|
|
20
|
+
|
|
21
|
+
| Property | Value |
|
|
22
|
+
|----------|-------|
|
|
23
|
+
| Font family | `--mu-font-family-monospace` |
|
|
24
|
+
| Font size | `0.875em` |
|
|
25
|
+
| Font style | `italic` |
|
|
26
|
+
| Padding | `0.375rem` |
|
|
27
|
+
| Border radius | `--mu-border-radius` |
|
|
28
|
+
| Background | `--mu-code-background-color` |
|
|
29
|
+
| Color | `--mu-code-color` |
|
|
30
|
+
|
|
31
|
+
The italic style distinguishes `<var>` from `<code>`, `<kbd>`, and `<samp>`.
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Comparison
|
|
36
|
+
|
|
37
|
+
| Element | Semantic meaning | Italic |
|
|
38
|
+
|---------|-----------------|--------|
|
|
39
|
+
| `<code>` | Code fragment | No |
|
|
40
|
+
| `<kbd>` | Keyboard input | No |
|
|
41
|
+
| `<samp>` | Program output | No |
|
|
42
|
+
| `<var>` | Variable or placeholder | Yes |
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Accessibility
|
|
47
|
+
|
|
48
|
+
- Use `<var>` only for variable names or placeholders — not for general emphasis (use `<em>` instead).
|
|
49
|
+
- Screen readers may announce `<var>` differently depending on the browser, helping distinguish it from surrounding code.
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
> See also : [Typography](../examples/typography.html)
|