@thi.ng/meta-css 0.1.3 → 0.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/CHANGELOG.md +15 -1
- package/README.md +670 -217
- package/index.js +6 -6
- package/package.json +10 -7
- package/specs/anim.json +5 -5
- package/specs/borders.json +29 -27
- package/specs/colors.json +54 -72
- package/specs/cursor.json +5 -6
- package/specs/dimensions.json +30 -30
- package/specs/display.json +5 -7
- package/specs/grid.json +27 -29
- package/specs/lists.json +4 -5
- package/specs/margins.json +21 -12
- package/specs/overflow.json +5 -19
- package/specs/positions.json +14 -18
- package/specs/shadow.json +26 -0
- package/specs/typography.json +75 -68
package/README.md
CHANGED
|
@@ -11,25 +11,32 @@ This project is part of the
|
|
|
11
11
|
[@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo and anti-framework.
|
|
12
12
|
|
|
13
13
|
- [About](#about)
|
|
14
|
-
|
|
15
|
-
- [
|
|
16
|
-
|
|
14
|
+
- [Generating CSS frameworks](#generating-css-frameworks)
|
|
15
|
+
- [Framework generation specs & syntax](#framework-generation-specs--syntax)
|
|
16
|
+
- [Example generation spec](#example-generation-spec)
|
|
17
|
+
- [Spec structure](#spec-structure)
|
|
18
|
+
- [Variations](#variations)
|
|
19
|
+
- [Parametric IDs](#parametric-ids)
|
|
20
|
+
- [Values](#values)
|
|
21
|
+
- [Properties](#properties)
|
|
22
|
+
- [Key value generation](#key-value-generation)
|
|
23
|
+
- [Media query definitions](#media-query-definitions)
|
|
24
|
+
- [Converting meta stylesheets to CSS](#converting-meta-stylesheets-to-css)
|
|
25
|
+
- [Meta-stylesheets syntax](#meta-stylesheets-syntax)
|
|
26
|
+
- [Class identifiers & media query prefixes](#class-identifiers--media-query-prefixes)
|
|
27
|
+
- [Media query prefixes](#media-query-prefixes)
|
|
28
|
+
- [Including custom CSS files](#including-custom-css-files)
|
|
17
29
|
- [Force inclusion of unreferenced classes](#force-inclusion-of-unreferenced-classes)
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
- [
|
|
30
|
+
- [Exporting a generated framework as CSS](#exporting-a-generated-framework-as-css)
|
|
31
|
+
- [Media query variations](#media-query-variations)
|
|
32
|
+
- [Bundled CSS base framework](#bundled-css-base-framework)
|
|
33
|
+
- [Classes by category](#classes-by-category)
|
|
34
|
+
- [Media queries](#media-queries)
|
|
21
35
|
- [Status](#status)
|
|
22
36
|
- [Related packages](#related-packages)
|
|
23
37
|
- [Installation](#installation)
|
|
24
38
|
- [Dependencies](#dependencies)
|
|
25
39
|
- [Usage examples](#usage-examples)
|
|
26
|
-
- [CLI](#cli)
|
|
27
|
-
- [Basic usage example](#basic-usage-example)
|
|
28
|
-
- [Generating framework code from bundled base definitions](#generating-framework-code-from-bundled-base-definitions)
|
|
29
|
-
- [Generating CSS from `.meta` stylesheets](#generating-css-from-meta-stylesheets)
|
|
30
|
-
- [*.meta stylesheets](#meta-stylesheets)
|
|
31
|
-
- [Resulting CSS output](#resulting-css-output)
|
|
32
|
-
- [index.html](#indexhtml)
|
|
33
40
|
- [Authors](#authors)
|
|
34
41
|
- [License](#license)
|
|
35
42
|
|
|
@@ -37,23 +44,36 @@ This project is part of the
|
|
|
37
44
|
|
|
38
45
|
Data-driven CSS framework codegen, transpiler & bundler.
|
|
39
46
|
|
|
40
|
-
This
|
|
47
|
+
This toolchain and the overall workflow proposed by it is heavily building atop
|
|
48
|
+
the concept of _CSS utility classes_ and how they're utilized (as you might know
|
|
49
|
+
from using Tachyons, Turret or the newer Tailwind projects). How and where those
|
|
50
|
+
CSS classes are applied is however a defining point of difference to other
|
|
51
|
+
existing approaches. This readme aims to provide a thorough overview and some
|
|
52
|
+
concrete usage examples...
|
|
41
53
|
|
|
42
|
-
|
|
54
|
+
Note: In all cases, final CSS generation itself is handled by
|
|
55
|
+
[thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/blob/develop/packages/hiccup-css/)
|
|
43
56
|
|
|
44
|
-
|
|
45
|
-
of JSON rule specs. This process creates all desired, combinatorial versions of
|
|
46
|
-
various rules/declarations and exports them to another JSON file used as
|
|
47
|
-
intermediatary for the other commands provided by this toolchain. The
|
|
48
|
-
syntax/format of the generator rules is explained further on. These rules can be
|
|
49
|
-
split up into multiple files, can incude arbitrary media query criteria (all
|
|
50
|
-
later combinable), shared lookup tables for colors, margins, sizes, timings etc.
|
|
57
|
+
**👷🏻 This is all WIP!** Also see included & linked examples for basic usage...
|
|
51
58
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
## Generating CSS frameworks
|
|
60
|
+
|
|
61
|
+
The `generate` command is used to generate custom frameworks with (likely)
|
|
62
|
+
hundreds of CSS utility classes from a number of extremely compact, parametric
|
|
63
|
+
JSON rule specs. This process generates all desired, combinatorial versions of
|
|
64
|
+
various rules/declarations and exports them to another JSON file used as
|
|
65
|
+
intermediary for the other commands provided by this toolchain. The
|
|
66
|
+
[syntax/format of the generator rules](#framework-generation-specs--syntax) is explained
|
|
67
|
+
further on. These rule specs can be split up into multiple files for better
|
|
68
|
+
handling, can define [arbitrary media query criteria]() (all later combinable),
|
|
69
|
+
shared lookup tables for colors, margins, sizes, timings etc.
|
|
70
|
+
|
|
71
|
+
The package includes generator specs for a basic, fully customizable,
|
|
72
|
+
[tachyons.io](https://tachyons.io)-derived [CSS
|
|
73
|
+
framework](#bundled-css-base-framework). These specs and resulting framework are
|
|
74
|
+
still being worked on and are used for some example projects in this repo, but
|
|
75
|
+
are mostly intended as basic starting points for creating other custom
|
|
76
|
+
frameworks (in the hope they'll be shared back similarly)...
|
|
57
77
|
|
|
58
78
|
```text
|
|
59
79
|
metacss generate --help
|
|
@@ -71,235 +91,442 @@ Main:
|
|
|
71
91
|
--prec INT Number of fractional digits (default: 3)
|
|
72
92
|
```
|
|
73
93
|
|
|
74
|
-
###
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
supported, @-prefix will read from file)
|
|
106
|
-
-I STR, --include STR [multiple] Include CSS files (prepend)
|
|
107
|
-
-o STR, --out STR Output file (or stdout)
|
|
108
|
-
-s STR, --specs STR [required] Path to generated JSON defs
|
|
94
|
+
### Framework generation specs & syntax
|
|
95
|
+
|
|
96
|
+
This section gives an overview of the JSON format used to generate CSS
|
|
97
|
+
frameworks of dozens (usually hundreds) of utility classes, including many
|
|
98
|
+
possible variations (per spec).
|
|
99
|
+
|
|
100
|
+
Generation specs use a simple JSON structure as shown below. The specs can be
|
|
101
|
+
split over multiple files within a directory and will all be merged by the
|
|
102
|
+
`generate` command of the toolchain.
|
|
103
|
+
|
|
104
|
+
```json5
|
|
105
|
+
{
|
|
106
|
+
// optional meta data (later used for comment injection in generated CSS)
|
|
107
|
+
"info": {
|
|
108
|
+
"name": "Framework name",
|
|
109
|
+
"version": "0.0.0",
|
|
110
|
+
},
|
|
111
|
+
// optional media queries and their criteria
|
|
112
|
+
"media": {
|
|
113
|
+
"large": { "min-width": "60rem" },
|
|
114
|
+
"dark": { "prefers-color-scheme": "dark" }
|
|
115
|
+
},
|
|
116
|
+
// optional shared values/LUTs (arrays or objects)
|
|
117
|
+
"tables": {
|
|
118
|
+
"margins": [0, 0.25, 0.5, 1, 2, 4]
|
|
119
|
+
},
|
|
120
|
+
// array of actual generation specs
|
|
121
|
+
"specs": [
|
|
122
|
+
//...
|
|
123
|
+
]
|
|
124
|
+
}
|
|
109
125
|
```
|
|
110
126
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
127
|
+
### Example generation spec
|
|
128
|
+
|
|
129
|
+
The following generator document uses a single small generative rule spec to
|
|
130
|
+
create altogether 21 utility classes for various possible margins (where 21 = 3
|
|
131
|
+
margin sizes provided × 7 variations).
|
|
132
|
+
|
|
133
|
+
For each additional value added to the `margins` table, 7 more CSS classes will be
|
|
134
|
+
generated. The `name` (class) and `props` (CSS property name) are parametric and
|
|
135
|
+
will be explained in more detail further below.
|
|
136
|
+
|
|
137
|
+
```json tangle:export/readme-margins.json
|
|
138
|
+
{
|
|
139
|
+
"tables": {
|
|
140
|
+
"margins": [0, 0.5, 1]
|
|
141
|
+
},
|
|
142
|
+
"specs": [
|
|
143
|
+
{
|
|
144
|
+
"name": "m<vid><k>",
|
|
145
|
+
"props": "margin<var>",
|
|
146
|
+
"values": "margins",
|
|
147
|
+
"unit": "rem",
|
|
148
|
+
"var": ["a", "t", "r", "b", "l", "h", "v"]
|
|
149
|
+
}
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
```
|
|
132
153
|
|
|
133
|
-
|
|
154
|
+
Assuming the above spec has been saved to a JSON file in the `myspecs`
|
|
155
|
+
directory...
|
|
134
156
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
e.g. to be then used with other CSS tooling (e.g. `postcss`).
|
|
157
|
+
```bash
|
|
158
|
+
# the `generate` cmd is directory based and will read all
|
|
159
|
+
# JSON files in the provided dir (recursively)...
|
|
139
160
|
|
|
140
|
-
|
|
161
|
+
# if no `--out` file is given, the result will go to stdout
|
|
162
|
+
metacss generate --pretty myspecs
|
|
163
|
+
```
|
|
141
164
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
165
|
+
...this command (with the above spec) will generate the following output (here
|
|
166
|
+
we're only interested in the entries under `classes`):
|
|
167
|
+
|
|
168
|
+
```json
|
|
169
|
+
{
|
|
170
|
+
"info": {
|
|
171
|
+
"name": "TODO",
|
|
172
|
+
"version": "0.0.0"
|
|
173
|
+
},
|
|
174
|
+
"media": {},
|
|
175
|
+
"classes": {
|
|
176
|
+
"ma0": { "margin": "0rem" },
|
|
177
|
+
"ma1": { "margin": ".5rem" },
|
|
178
|
+
"ma2": { "margin": "1rem" },
|
|
179
|
+
"mh0": { "margin-left": "0rem", "margin-right": "0rem" },
|
|
180
|
+
"mh1": { "margin-left": ".5rem", "margin-right": ".5rem" },
|
|
181
|
+
"mh2": { "margin-left": "1rem", "margin-right": "1rem" },
|
|
182
|
+
"mv0": { "margin-top": "0rem", "margin-bottom": "0rem" },
|
|
183
|
+
"mv1": { "margin-top": ".5rem", "margin-bottom": ".5rem" },
|
|
184
|
+
"mv2": { "margin-top": "1rem", "margin-bottom": "1rem" },
|
|
185
|
+
"mt0": { "margin-top": "0rem" },
|
|
186
|
+
"mt1": { "margin-top": ".5rem" },
|
|
187
|
+
"mt2": { "margin-top": "1rem" },
|
|
188
|
+
"mr0": { "margin-right": "0rem" },
|
|
189
|
+
"mr1": { "margin-right": ".5rem" },
|
|
190
|
+
"mr2": { "margin-right": "1rem" },
|
|
191
|
+
"mb0": { "margin-bottom": "0rem" },
|
|
192
|
+
"mb1": { "margin-bottom": ".5rem" },
|
|
193
|
+
"mb2": { "margin-bottom": "1rem" },
|
|
194
|
+
"ml0": { "margin-left": "0rem" },
|
|
195
|
+
"ml1": { "margin-left": ".5rem" },
|
|
196
|
+
"ml2": { "margin-left": "1rem" }
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
```
|
|
148
200
|
|
|
149
|
-
|
|
150
|
-
|
|
201
|
+
When later used in stylesheets, we can then refer to each of these classes by
|
|
202
|
+
their generated names, e.g. `ma0` to disable all margins or `mh2` to set both
|
|
203
|
+
left & right margins to `1rem` (in this case)...
|
|
204
|
+
|
|
205
|
+
### Spec structure
|
|
206
|
+
|
|
207
|
+
An individual generator spec JSON object can contain the following keys:
|
|
208
|
+
|
|
209
|
+
| **ID** | **Type** | **Description** |
|
|
210
|
+
|----------|-------------------------|--------------------------------------------------------------|
|
|
211
|
+
| `name` | string | Parametric name for the generated CSS class(es) |
|
|
212
|
+
| `props` | string or object | CSS property name(s), possibly parametric |
|
|
213
|
+
| `values` | string, array or object | Values to be assigned to CSS properties, possibly parametric |
|
|
214
|
+
| `unit` | string, optional | CSS unit to use for values |
|
|
215
|
+
| `key` | string, optional | Method for deriving keys from current value |
|
|
216
|
+
| `var` | string[], optional | Array of variation IDs (see section below) |
|
|
217
|
+
| `user` | any, optional | Custom user data, comments, metadata etc. |
|
|
218
|
+
|
|
219
|
+
The number of generated CSS classes per spec is the number of items in `values`
|
|
220
|
+
multiplied by the number of variations in `var` (if any).
|
|
221
|
+
|
|
222
|
+
Any `user` data will be stored (as is) with each generated CSS class, but
|
|
223
|
+
currently has no other direct use in the toolchain and is meant for additional
|
|
224
|
+
user-defined tooling.
|
|
225
|
+
|
|
226
|
+
#### Variations
|
|
227
|
+
|
|
228
|
+
Variations can be requested by providing an array of valid variation IDs. If
|
|
229
|
+
used, `<vid>` or `<var>` parameters must be used in the `name` or else naming
|
|
230
|
+
conflicts will occur.
|
|
231
|
+
|
|
232
|
+
| **ID** | **Expanded values** |
|
|
233
|
+
|------------|-----------------------|
|
|
234
|
+
| `""` | `[""]` |
|
|
235
|
+
| `"a"` | `[""]` |
|
|
236
|
+
| `"b"` | `["-bottom"]` |
|
|
237
|
+
| `"bottom"` | `["bottom"]` |
|
|
238
|
+
| `"h"` | `["-left", "-right"]` |
|
|
239
|
+
| `"l"` | `["-left"]` |
|
|
240
|
+
| `"left"` | `["left"]` |
|
|
241
|
+
| `"r"` | `["-right"]` |
|
|
242
|
+
| `"right"` | `["right"]` |
|
|
243
|
+
| `"t"` | `["-top"]` |
|
|
244
|
+
| `"top"` | `["top"]` |
|
|
245
|
+
| `"v"` | `["-top", "-bottom"]` |
|
|
246
|
+
| `"x"` | `["-x"]` |
|
|
247
|
+
| `"y"` | `["-y"]` |
|
|
248
|
+
|
|
249
|
+
#### Parametric IDs
|
|
250
|
+
|
|
251
|
+
The following parameters can (and should) be used in a spec's `name` and `props`
|
|
252
|
+
to generate multiple pattern-based values (more examples below).
|
|
253
|
+
|
|
254
|
+
- `<vid>` is a value from the ID column of the above variations table. If no
|
|
255
|
+
variations are requested, its value will be an empty string.
|
|
256
|
+
- `<var>` is one of the expanded values for the current variation (2nd column of
|
|
257
|
+
variations table). If no variations are defined, this too will be an empty
|
|
258
|
+
string.
|
|
259
|
+
- `<v>` is the currently processed value of a spec's `values`.
|
|
260
|
+
- `<k>` is the key (possibly derived) for the currently processed value of a
|
|
261
|
+
spec's `values` and will depend on the type of `values` (see below)
|
|
262
|
+
|
|
263
|
+
#### Values
|
|
264
|
+
|
|
265
|
+
The `values` are used to populate the `props` (CSS properties). If `values` is a
|
|
266
|
+
string it will be used as table-name to look up in the current spec file's
|
|
267
|
+
`tables`, an object storing values which should be shared among specs (only in
|
|
268
|
+
the same file).
|
|
269
|
+
|
|
270
|
+
Other allowed types of `values`: string array, numeric array or object of
|
|
271
|
+
key-value pairs (where values are strings or numbers too). The following
|
|
272
|
+
examples will all produce the same outcome:
|
|
273
|
+
|
|
274
|
+
Using a named `tables` entry:
|
|
275
|
+
|
|
276
|
+
```json
|
|
277
|
+
{
|
|
278
|
+
"tables": {
|
|
279
|
+
"test": ["red", "green", "blue"]
|
|
280
|
+
},
|
|
281
|
+
"specs": [
|
|
282
|
+
{
|
|
283
|
+
"name": "test<v>",
|
|
284
|
+
"props": "color",
|
|
285
|
+
"values": "test"
|
|
286
|
+
}
|
|
287
|
+
]
|
|
288
|
+
}
|
|
289
|
+
```
|
|
151
290
|
|
|
152
|
-
|
|
153
|
-
metacss export --help
|
|
291
|
+
Using an array directly (here only showing the spec itself for brevity):
|
|
154
292
|
|
|
155
|
-
|
|
293
|
+
```json
|
|
294
|
+
{
|
|
295
|
+
"name": "test<v>",
|
|
296
|
+
"props": "color",
|
|
297
|
+
"values": ["red", "green", "blue"]
|
|
298
|
+
}
|
|
299
|
+
```
|
|
156
300
|
|
|
157
|
-
|
|
301
|
+
Using an object (ignoring the keys, only using the values here):
|
|
158
302
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
303
|
+
```json
|
|
304
|
+
{
|
|
305
|
+
"name": "test<v>",
|
|
306
|
+
"props": "color",
|
|
307
|
+
"values": { "r": "red", "g": "green", "b": "blue"}
|
|
308
|
+
}
|
|
309
|
+
```
|
|
162
310
|
|
|
163
|
-
|
|
311
|
+
All 3 versions will result in these utility classes:
|
|
164
312
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
-
|
|
313
|
+
```json
|
|
314
|
+
{
|
|
315
|
+
"test-red": { "color": "red" },
|
|
316
|
+
"test-green": { "color": "green" },
|
|
317
|
+
"test-blue": { "color": "blue" }
|
|
318
|
+
}
|
|
168
319
|
```
|
|
169
320
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
321
|
+
#### Properties
|
|
322
|
+
|
|
323
|
+
The `props` field is used to define one or more CSS property names and
|
|
324
|
+
optionally their intended values (both can be parametric). If `props` is a
|
|
325
|
+
string, the values assigned to the property will be those given in `values`
|
|
326
|
+
(optionally with assigned `unit`, if provided)
|
|
327
|
+
|
|
328
|
+
```json
|
|
329
|
+
{
|
|
330
|
+
"name": "bg<k>",
|
|
331
|
+
"props": {
|
|
332
|
+
"background-image": "url(<v>)",
|
|
333
|
+
"background-size": "cover",
|
|
334
|
+
},
|
|
335
|
+
"values": ["abc.jpg", "def.jpg", "xyz.jpg"]
|
|
336
|
+
}
|
|
337
|
+
```
|
|
174
338
|
|
|
175
|
-
|
|
339
|
+
Will result in these definitions:
|
|
176
340
|
|
|
177
|
-
|
|
178
|
-
|
|
341
|
+
```json
|
|
342
|
+
{
|
|
343
|
+
"bg0": { "background-image": "url(abc.jpg)", "background-size": "cover" },
|
|
344
|
+
"bg1": { "background-image": "url(def.jpg)", "background-size": "cover" },
|
|
345
|
+
"bg2": { "background-image": "url(xyz.jpg)", "background-size": "cover" }
|
|
346
|
+
}
|
|
347
|
+
```
|
|
179
348
|
|
|
180
|
-
|
|
349
|
+
#### Key value generation
|
|
181
350
|
|
|
182
|
-
|
|
351
|
+
The `key` field is only used when `values` is resolving to an array. In this
|
|
352
|
+
case this field determines how a "key" value (aka the `<k>` param for string
|
|
353
|
+
interpolation, see below) will be derived for each value in `values`:
|
|
183
354
|
|
|
184
|
-
|
|
355
|
+
| **`key`** | **`values`** | **Description** | **Examples** |
|
|
356
|
+
|-----------|-----------------|-------------------------|--------------|
|
|
357
|
+
| `v` | `[10, 20, ...]` | Actual array item value | 10, 20, ... |
|
|
358
|
+
| `i` | `[10, 20, ...]` | Array item index | 0, 1,... |
|
|
359
|
+
| `i1` | `[10, 20, ...]` | Array item index + 1 | 1, 2,... |
|
|
185
360
|
|
|
186
|
-
|
|
361
|
+
If `values` resolves to an object, the `<k>` param will always be the key of the
|
|
362
|
+
currently processed value.
|
|
187
363
|
|
|
188
|
-
|
|
364
|
+
```json
|
|
365
|
+
{
|
|
366
|
+
"name": "test-<k>",
|
|
367
|
+
"props": "test-prop",
|
|
368
|
+
"values": { "abc": 23, "xyz": 42 }
|
|
369
|
+
}
|
|
370
|
+
```
|
|
189
371
|
|
|
190
|
-
|
|
372
|
+
The above spec will generate the following (some parts omitted):
|
|
191
373
|
|
|
192
|
-
```
|
|
193
|
-
|
|
374
|
+
```json
|
|
375
|
+
{
|
|
376
|
+
"test-abc": { "test-prop": 23 },
|
|
377
|
+
"test-xyz": { "test-prop": 42 },
|
|
378
|
+
}
|
|
194
379
|
```
|
|
195
380
|
|
|
196
|
-
|
|
197
|
-
distributed as CLI bundle with **no runtime dependencies**. The following
|
|
198
|
-
dependencies are only shown for informational purposes and are (partially)
|
|
199
|
-
included in the bundle.
|
|
381
|
+
### Media query definitions
|
|
200
382
|
|
|
201
|
-
|
|
383
|
+
Media queries can be defined via the top-level `media` object in a spec file.
|
|
384
|
+
Each query has an ID and an object of one or more query criteria.
|
|
202
385
|
|
|
203
|
-
|
|
386
|
+
The key-value pairs of the conditional object are interpreted as follows and
|
|
387
|
+
ALWAYS combined using `and`:
|
|
204
388
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
-
|
|
208
|
-
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
- [@thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-css)
|
|
213
|
-
- [@thi.ng/logger](https://github.com/thi-ng/umbrella/tree/develop/packages/logger)
|
|
214
|
-
- [@thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream)
|
|
215
|
-
- [@thi.ng/strings](https://github.com/thi-ng/umbrella/tree/develop/packages/strings)
|
|
216
|
-
- [@thi.ng/text-format](https://github.com/thi-ng/umbrella/tree/develop/packages/text-format)
|
|
217
|
-
- [@thi.ng/transducers](https://github.com/thi-ng/umbrella/tree/develop/packages/transducers)
|
|
389
|
+
| Key/Value pair | Result |
|
|
390
|
+
|----------------------------------|--------------------------------|
|
|
391
|
+
| `"min-width": "10rem"` | `(min-width: 10rem)` |
|
|
392
|
+
| `"prefers-color-scheme": "dark"` | `(prefers-color-scheme: dark)` |
|
|
393
|
+
| `print: true` | `print` |
|
|
394
|
+
| `print: false` | `not print` |
|
|
395
|
+
| `print: "only"` | `only print` |
|
|
218
396
|
|
|
219
|
-
|
|
397
|
+
See [media queries in the bundled base
|
|
398
|
+
specs](https://github.com/thi-ng/umbrella/blob/982fff7bfcc48f108b6ad88f854ef00be4078510/packages/meta-css/specs/_info.json#L6-L24)
|
|
220
399
|
|
|
221
|
-
|
|
222
|
-
[/examples](https://github.com/thi-ng/umbrella/tree/develop/examples)
|
|
223
|
-
directory is using this package:
|
|
400
|
+
## Converting meta stylesheets to CSS
|
|
224
401
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
402
|
+
The `convert` command is used to compile & bundle actual CSS from user-provided
|
|
403
|
+
MetaCSS stylesheets (`*.meta` files) and the JSON framework specs created by the
|
|
404
|
+
`generate` command. The meta-stylesheets support any CSS selectors, are nestable
|
|
405
|
+
and compose full CSS declarations from lists of the utility classes in the
|
|
406
|
+
generated framework.
|
|
230
407
|
|
|
231
|
-
|
|
408
|
+
Each item (aka utility class name) can be prefixed with an arbitrary number of
|
|
409
|
+
media query IDs (also custom defined in the framework): e.g. `dark:bg-black`
|
|
410
|
+
might refer to a CSS class to set a black ground, with the `dark:` prefix
|
|
411
|
+
referring to a defined media query which only applies this class when dark mode
|
|
412
|
+
is enabled...
|
|
232
413
|
|
|
233
|
-
|
|
414
|
+
Selectors, declarations and media query criteria will be deduplicated and merged
|
|
415
|
+
from multiple input files. **The resulting CSS will only contain referenced
|
|
416
|
+
rules** and can be generated in minified or pretty printed formats (it's also
|
|
417
|
+
possible to [force include CSS classes which are otherwise
|
|
418
|
+
unreferenced](#force-inclusion-of-unreferenced-classes)). Additionally, multiple
|
|
419
|
+
`.meta` stylesheets can be watched for changes (their definitions getting
|
|
420
|
+
merged), and existing CSS files can be included (prepended) in the bundled
|
|
421
|
+
output too.
|
|
234
422
|
|
|
235
423
|
```text
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
█ █ █ │
|
|
239
|
-
██ █ │
|
|
240
|
-
█ █ █ █ █ █ █ █ │ @thi.ng/meta-css 0.0.1
|
|
241
|
-
█ █ █ █ █ █ █ █ █ │ Data-driven CSS component & framework codegen
|
|
242
|
-
█ │
|
|
243
|
-
█ █ │
|
|
244
|
-
|
|
245
|
-
Usage: metacss <cmd> [opts] input [...]
|
|
246
|
-
metacss <cmd> --help
|
|
247
|
-
|
|
248
|
-
Available commands:
|
|
424
|
+
metacss convert --help
|
|
249
425
|
|
|
250
|
-
|
|
251
|
-
export : Export entire generated framework as CSS
|
|
252
|
-
generate : Generate framework rules from specs
|
|
426
|
+
Usage: metacss convert [opts] input [...]
|
|
253
427
|
|
|
254
428
|
Flags:
|
|
255
429
|
|
|
430
|
+
--no-header Don't emit generated header comment
|
|
431
|
+
-p, --pretty Pretty print output
|
|
256
432
|
-v, --verbose Display extra process information
|
|
433
|
+
-w, --watch Watch input files for changes
|
|
257
434
|
|
|
258
435
|
Main:
|
|
259
436
|
|
|
437
|
+
-e STR, --eval STR eval meta stylesheet in given string (ignores other inpu
|
|
438
|
+
ts & includes)
|
|
439
|
+
-f STR, --force STR [multiple] CSS classes to force include (wildcards are
|
|
440
|
+
supported, @-prefix will read from file)
|
|
441
|
+
-I STR, --include STR [multiple] Include CSS files (prepend)
|
|
260
442
|
-o STR, --out STR Output file (or stdout)
|
|
443
|
+
-s STR, --specs STR [required] Path to generated JSON defs
|
|
261
444
|
```
|
|
262
445
|
|
|
263
|
-
###
|
|
446
|
+
### Meta-stylesheets syntax
|
|
264
447
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
CSS translation in the next step.
|
|
448
|
+
As mentioned earlier, the `convert` command transpiles meta-stylesheets into
|
|
449
|
+
actual CSS. These stylesheets support any CSS selector, support selector
|
|
450
|
+
nesting and have the following basic syntax:
|
|
269
451
|
|
|
270
|
-
```
|
|
271
|
-
|
|
272
|
-
|
|
452
|
+
```text
|
|
453
|
+
// line comment
|
|
454
|
+
selector {
|
|
455
|
+
class-id1 class-id2 ...
|
|
456
|
+
{
|
|
457
|
+
nested-selector {
|
|
458
|
+
class-id3 ...
|
|
459
|
+
{
|
|
460
|
+
...
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
}
|
|
273
465
|
```
|
|
274
466
|
|
|
275
|
-
|
|
467
|
+
#### Class identifiers & media query prefixes
|
|
468
|
+
|
|
469
|
+
As indicated by the above file structure, `*.meta` stylesheets purely consist of
|
|
470
|
+
CSS selectors and the names of the generated framework-defined utility classes.
|
|
471
|
+
For example, using the [bundled framework specs](#bundled-css-base-framework),
|
|
472
|
+
this simple meta-stylesheet `body { ma0 monospace blue }` creates a CSS rule for
|
|
473
|
+
`body` with the definitions of the generated `ma0`, `monospace` and `blue`
|
|
474
|
+
classes inline-expanded:
|
|
475
|
+
|
|
476
|
+
```css
|
|
477
|
+
body {
|
|
478
|
+
margin: 0rem;
|
|
479
|
+
font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
|
|
480
|
+
color: #357edd;
|
|
481
|
+
}
|
|
482
|
+
```
|
|
276
483
|
|
|
277
|
-
####
|
|
484
|
+
#### Media query prefixes
|
|
485
|
+
|
|
486
|
+
This toolchain doesn't pre-generate media-query-specific versions of any CSS
|
|
487
|
+
class, and any class ID/token can be prefixed with any number of media query IDs
|
|
488
|
+
(separated by `:`). These [media queries are defined as part of the framework
|
|
489
|
+
generation specs](#media-query-definitions) and when used as a prefix, multiple
|
|
490
|
+
query IDs can be combined freely. For example, the meta-stylesheet `a:hover {
|
|
491
|
+
dark:bg-blue dark:anim:bg-anim2 }` will auto-create two separate CSS
|
|
492
|
+
`@media`-query blocks for the query IDs `dark` and `(dark AND anim)`:
|
|
493
|
+
|
|
494
|
+
```css
|
|
495
|
+
@media (prefers-color-scheme: dark) {
|
|
496
|
+
a:hover {
|
|
497
|
+
background-color: #357edd;
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
@media (prefers-color-scheme: dark) and (not (prefers-reduced-motion)) {
|
|
502
|
+
a:hover {
|
|
503
|
+
transition: 0.25s background-color ease-in-out;
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
```
|
|
278
507
|
|
|
279
|
-
|
|
280
|
-
specs](https://github.com/thi-ng/umbrella/blob/develop/packages/meta-css/specs/)
|
|
281
|
-
is loosely based on [tachyons.io](https://tachyons.io), with the important
|
|
282
|
-
difference of media query handling. Using MetaCSS we don't have to pre-generate
|
|
283
|
-
mediaquery-specific versions, and any class ID/token can be prefixed with an
|
|
284
|
-
_arbitrary_ number of media query IDs (separated by `:`). These media queries
|
|
285
|
-
are defined as part of the framework JSON specs and when used as a prefix,
|
|
286
|
-
multiple query IDs can be combined freely. E.g. the token `dark:anim:bg-anim2`
|
|
287
|
-
will auto-create a merged CSS `@media`-query block for the query IDs `dark` and
|
|
288
|
-
`anim` and only emit the definition of `bg-anim2` for this combination (see
|
|
289
|
-
generated CSS further below).
|
|
508
|
+
A more detailed example, split over two files (for merging & bundling):
|
|
290
509
|
|
|
291
510
|
readme.meta:
|
|
292
511
|
|
|
293
512
|
```text tangle:export/readme.meta
|
|
294
|
-
|
|
295
|
-
|
|
513
|
+
body {
|
|
514
|
+
// no margins
|
|
515
|
+
ma0
|
|
516
|
+
// default colors
|
|
517
|
+
bg-white black
|
|
518
|
+
// colors for dark mode
|
|
519
|
+
dark:bg-black dark:white
|
|
520
|
+
}
|
|
296
521
|
|
|
297
522
|
#app { ma3 }
|
|
298
523
|
|
|
299
524
|
.bt-group-v > a {
|
|
300
|
-
db
|
|
525
|
+
db w-100 l:w-50 ph3 pv2 bwb1
|
|
301
526
|
dark:bg-purple dark:white dark:b--black
|
|
302
527
|
light:bg-light-blue light:black light:b--white
|
|
528
|
+
|
|
529
|
+
// nested selectors
|
|
303
530
|
{
|
|
304
531
|
:hover { bg-gold black anim:bg-anim2 }
|
|
305
532
|
:first-child { brt3 }
|
|
@@ -310,8 +537,8 @@ body { ma0 dark:bg-black dark:white bg-white black }
|
|
|
310
537
|
|
|
311
538
|
readme2.meta:
|
|
312
539
|
|
|
313
|
-
We will merge the definitions in this file with the ones
|
|
314
|
-
|
|
540
|
+
We will merge the definitions in this file with the ones above (i.e. adding &
|
|
541
|
+
overriding some of the declarations, here: a larger border radius):
|
|
315
542
|
|
|
316
543
|
```text tangle:export/readme2.meta
|
|
317
544
|
#app { pa2 }
|
|
@@ -325,12 +552,12 @@ We will merge the definitions in this file with the ones from the file above
|
|
|
325
552
|
```
|
|
326
553
|
|
|
327
554
|
```bash
|
|
328
|
-
# if
|
|
329
|
-
# use previously generated
|
|
555
|
+
# if no --out dir is specified, writes result to stdout...
|
|
556
|
+
# use previously generated framework for resolving all identifiers & media queries
|
|
330
557
|
metacss convert --pretty --specs framework.json readme.meta readme2.meta
|
|
331
558
|
```
|
|
332
559
|
|
|
333
|
-
|
|
560
|
+
Resulting CSS bundle output:
|
|
334
561
|
|
|
335
562
|
```css
|
|
336
563
|
/*! MetaCSS base v0.0.1 - generated by thi.ng/meta-css @ 2023-12-18T12:22:36.548Z */
|
|
@@ -415,27 +642,253 @@ body {
|
|
|
415
642
|
}
|
|
416
643
|
```
|
|
417
644
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
645
|
+
### Including custom CSS files
|
|
646
|
+
|
|
647
|
+
One or more existing CSS files can be included & prepended to the output via the
|
|
648
|
+
`--include`/`-I` arg (which can be given multiple times). These files are used
|
|
649
|
+
verbatim and will **not** be transformed or reformatted in any way.
|
|
650
|
+
|
|
651
|
+
### Force inclusion of unreferenced classes
|
|
652
|
+
|
|
653
|
+
Only the CSS classes (and their optionally associated media queries) referenced
|
|
654
|
+
in a `.meta` stylesheet will appear in the export CSS bundle. This ensures that
|
|
655
|
+
the resulting CSS will only contain what's actually used (same effect as
|
|
656
|
+
tree-shaking, only vastly more efficient). However, this also means any CSS
|
|
657
|
+
classes (and optionally, their media query qualifiers) which are otherwise
|
|
658
|
+
referenced (e.g. from JS/TS source code or HTML docs) **will not** be included
|
|
659
|
+
by default and they will need to be listed manually for forced inclusion.
|
|
660
|
+
|
|
661
|
+
This can be achieved via the `--force`/`-f` arg (also can be given multiple
|
|
662
|
+
times). This option also supports basic `*`-wildcard patterns, e.g. `bg-*` to
|
|
663
|
+
include all classes with prefix `bg-`. Furthermore, for larger projects it's
|
|
664
|
+
useful to store these names/patterns in a separate file. For that purpose, use
|
|
665
|
+
the `@` prefix (e.g. `-f @includes.txt`) to indicate reading from file (only
|
|
666
|
+
reading from a single file is supported at current)... See the [meta-css-basics
|
|
667
|
+
example
|
|
668
|
+
project](https://github.com/thi-ng/umbrella/blob/develop/examples/meta-css-basics)
|
|
669
|
+
for concrete usage...
|
|
670
|
+
|
|
671
|
+
## Exporting a generated framework as CSS
|
|
672
|
+
|
|
673
|
+
The `export` command is intended for those who're mainly interested in the CSS
|
|
674
|
+
framework generation aspects of this toolchain. This command merely takes an
|
|
675
|
+
existing generated framework JSON file and serializes it to a single CSS file,
|
|
676
|
+
e.g. to be then used with other CSS tooling (e.g. `postcss`).
|
|
677
|
+
|
|
678
|
+
### Media query variations
|
|
679
|
+
|
|
680
|
+
Users can choose to generate variations of all defined utility classes for any
|
|
681
|
+
of the framework-defined media query IDs. This will create additional suffixed
|
|
682
|
+
versions of all classes (with their appropriate media query wrappers) and cause
|
|
683
|
+
a potentially massive output (depending on the overall number/complexity of the
|
|
684
|
+
generated classes). Again, the idea is that the resulting CSS file will be
|
|
685
|
+
post-processed with 3rd party CSS tooling...
|
|
686
|
+
|
|
687
|
+
For example, if the framework contains a CSS class `w-50` (e.g. to set the width
|
|
688
|
+
to 50%) and media queries for different screen sizes (e.g. named `ns`, `l`),
|
|
689
|
+
then the export with said media queries will also generate classes `w-50-ns`
|
|
690
|
+
and `w-50-l` (incl. their corresponding `@media` wrappers).
|
|
691
|
+
|
|
692
|
+
As with the `convert` command, additional CSS files can also be included
|
|
693
|
+
(prepended) in the output file.
|
|
694
|
+
|
|
695
|
+
```text
|
|
696
|
+
metacss export --help
|
|
697
|
+
|
|
698
|
+
Usage: metacss export [opts] input
|
|
699
|
+
|
|
700
|
+
Flags:
|
|
701
|
+
|
|
702
|
+
--no-header Don't emit generated header comment
|
|
703
|
+
-p, --pretty Pretty print output
|
|
704
|
+
-v, --verbose Display extra process information
|
|
705
|
+
|
|
706
|
+
Main:
|
|
707
|
+
|
|
708
|
+
-I STR, --include STR [multiple] Include CSS files (prepend)
|
|
709
|
+
-m STR, --media STR Media query IDs (use 'ALL' for all)
|
|
710
|
+
-o STR, --out STR Output file (or stdout)
|
|
711
|
+
```
|
|
712
|
+
|
|
713
|
+
## Bundled CSS base framework
|
|
714
|
+
|
|
715
|
+
The package includes a large number of useful specs in [/specs](https://github.com/thi-ng/umbrella/blob/develop/packages/meta-css/specs/). These are provided as starting point to define your custom framework(s)...
|
|
716
|
+
|
|
717
|
+
Currently available CSS classes in MetaCSS base v0.0.1:
|
|
718
|
+
|
|
719
|
+
### Classes by category
|
|
720
|
+
|
|
721
|
+
#### Animations / transitions <!-- notoc -->
|
|
722
|
+
|
|
723
|
+
`bg-anim1` / `bg-anim2` / `bg-anim3`
|
|
724
|
+
|
|
725
|
+
#### Border radius <!-- notoc -->
|
|
726
|
+
|
|
727
|
+
`br0` / `br1` / `br2` / `br3` / `br4` / `brb0` / `brb1` / `brb2` / `brb3` / `brb4` / `brl0` / `brl1` / `brl2` / `brl3` / `brl4` / `brr0` / `brr1` / `brr2` / `brr3` / `brr4` / `brt0` / `brt1` / `brt2` / `brt3` / `brt4`
|
|
728
|
+
|
|
729
|
+
#### Border width <!-- notoc -->
|
|
730
|
+
|
|
731
|
+
`bw0` / `bw1` / `bw2` / `bw3` / `bw4` / `bw5` / `bwb0` / `bwb1` / `bwb2` / `bwb3` / `bwb4` / `bwb5` / `bwl0` / `bwl1` / `bwl2` / `bwl3` / `bwl4` / `bwl5` / `bwr0` / `bwr1` / `bwr2` / `bwr3` / `bwr4` / `bwr5` / `bwt0` / `bwt1` / `bwt2` / `bwt3` / `bwt4` / `bwt5`
|
|
732
|
+
|
|
733
|
+
#### Colors <!-- notoc -->
|
|
734
|
+
|
|
735
|
+
`b--black` / `b--blue` / `b--dark-blue` / `b--dark-gray` / `b--dark-green` / `b--dark-pink` / `b--dark-red` / `b--gold` / `b--gray` / `b--green` / `b--hot-pink` / `b--light-blue` / `b--light-gray` / `b--light-green` / `b--light-pink` / `b--light-purple` / `b--light-red` / `b--light-silver` / `b--light-yellow` / `b--lightest-blue` / `b--mid-gray` / `b--moon-gray` / `b--navy` / `b--near-black` / `b--near-white` / `b--orange` / `b--pink` / `b--purple` / `b--red` / `b--silver` / `b--transparent` / `b--vcol1` / `b--vcol10` / `b--vcol11` / `b--vcol12` / `b--vcol13` / `b--vcol14` / `b--vcol15` / `b--vcol16` / `b--vcol2` / `b--vcol3` / `b--vcol4` / `b--vcol5` / `b--vcol6` / `b--vcol7` / `b--vcol8` / `b--vcol9` / `b--washed-blue` / `b--washed-green` / `b--washed-red` / `b--washed-yellow` / `b--white` / `b--yellow` / `bg-black` / `bg-blue` / `bg-dark-blue` / `bg-dark-gray` / `bg-dark-green` / `bg-dark-pink` / `bg-dark-red` / `bg-gold` / `bg-gray` / `bg-green` / `bg-hot-pink` / `bg-light-blue` / `bg-light-gray` / `bg-light-green` / `bg-light-pink` / `bg-light-purple` / `bg-light-red` / `bg-light-silver` / `bg-light-yellow` / `bg-lightest-blue` / `bg-mid-gray` / `bg-moon-gray` / `bg-navy` / `bg-near-black` / `bg-near-white` / `bg-orange` / `bg-pink` / `bg-purple` / `bg-red` / `bg-silver` / `bg-transparent` / `bg-vcol1` / `bg-vcol10` / `bg-vcol11` / `bg-vcol12` / `bg-vcol13` / `bg-vcol14` / `bg-vcol15` / `bg-vcol16` / `bg-vcol2` / `bg-vcol3` / `bg-vcol4` / `bg-vcol5` / `bg-vcol6` / `bg-vcol7` / `bg-vcol8` / `bg-vcol9` / `bg-washed-blue` / `bg-washed-green` / `bg-washed-red` / `bg-washed-yellow` / `bg-white` / `bg-yellow` / `black` / `blue` / `dark-blue` / `dark-gray` / `dark-green` / `dark-pink` / `dark-red` / `gold` / `gray` / `green` / `hot-pink` / `light-blue` / `light-gray` / `light-green` / `light-pink` / `light-purple` / `light-red` / `light-silver` / `light-yellow` / `lightest-blue` / `mid-gray` / `moon-gray` / `navy` / `near-black` / `near-white` / `o-0` / `o-10` / `o-100` / `o-20` / `o-30` / `o-40` / `o-50` / `o-60` / `o-70` / `o-80` / `o-90` / `orange` / `pink` / `purple` / `red` / `silver` / `transparent` / `vcol1` / `vcol10` / `vcol11` / `vcol12` / `vcol13` / `vcol14` / `vcol15` / `vcol16` / `vcol2` / `vcol3` / `vcol4` / `vcol5` / `vcol6` / `vcol7` / `vcol8` / `vcol9` / `washed-blue` / `washed-green` / `washed-red` / `washed-yellow` / `white` / `yellow`
|
|
736
|
+
|
|
737
|
+
#### Cursors <!-- notoc -->
|
|
738
|
+
|
|
739
|
+
`cursor-alias` / `cursor-auto` / `cursor-cell` / `cursor-col` / `cursor-context` / `cursor-copy` / `cursor-cross` / `cursor-default` / `cursor-e` / `cursor-ew` / `cursor-forbidden` / `cursor-grab` / `cursor-grabbing` / `cursor-help` / `cursor-in` / `cursor-move` / `cursor-n` / `cursor-ne` / `cursor-news` / `cursor-no-drop` / `cursor-none` / `cursor-ns` / `cursor-nw` / `cursor-nwse` / `cursor-out` / `cursor-pointer` / `cursor-progress` / `cursor-row` / `cursor-s` / `cursor-scroll` / `cursor-se` / `cursor-sw` / `cursor-text` / `cursor-vtext` / `cursor-w` / `cursor-wait`
|
|
740
|
+
|
|
741
|
+
#### Width <!-- notoc -->
|
|
742
|
+
|
|
743
|
+
`w-10` / `w-100` / `w-20` / `w-25` / `w-30` / `w-33` / `w-34` / `w-40` / `w-50` / `w-60` / `w-66` / `w-70` / `w-75` / `w-80` / `w-90` / `w1` / `w2` / `w3` / `w4` / `w5`
|
|
744
|
+
|
|
745
|
+
#### Max. width <!-- notoc -->
|
|
746
|
+
|
|
747
|
+
`mw-10` / `mw-100` / `mw-20` / `mw-25` / `mw-30` / `mw-33` / `mw-34` / `mw-40` / `mw-50` / `mw-60` / `mw-66` / `mw-70` / `mw-75` / `mw-80` / `mw-90` / `mw1` / `mw2` / `mw3` / `mw4` / `mw5`
|
|
748
|
+
|
|
749
|
+
#### Height <!-- notoc -->
|
|
750
|
+
|
|
751
|
+
`h-10` / `h-100` / `h-20` / `h-25` / `h-30` / `h-33` / `h-34` / `h-40` / `h-50` / `h-60` / `h-66` / `h-70` / `h-75` / `h-80` / `h-90` / `h1` / `h2` / `h3` / `h4` / `h5`
|
|
752
|
+
|
|
753
|
+
#### Display mode <!-- notoc -->
|
|
754
|
+
|
|
755
|
+
`db` / `df` / `dg` / `di` / `dib` / `dif` / `dig` / `dn` / `dt` / `dtc` / `dtr`
|
|
756
|
+
|
|
757
|
+
#### Grid layout <!-- notoc -->
|
|
758
|
+
|
|
759
|
+
`gap0` / `gap1` / `gap2` / `gap3` / `gap4` / `gap5` / `gc1` / `gc10` / `gc2` / `gc3` / `gc4` / `gc5` / `gc6` / `gc7` / `gc8` / `gc9` / `gr1` / `gr10` / `gr2` / `gr3` / `gr4` / `gr5` / `gr6` / `gr7` / `gr8` / `gr9`
|
|
760
|
+
|
|
761
|
+
#### Lists <!-- notoc -->
|
|
762
|
+
|
|
763
|
+
`list`
|
|
764
|
+
|
|
765
|
+
#### Padding <!-- notoc -->
|
|
766
|
+
|
|
767
|
+
`pa0` / `pa1` / `pa2` / `pa3` / `pa4` / `pb0` / `pb1` / `pb2` / `pb3` / `pb4` / `ph0` / `ph1` / `ph2` / `ph3` / `ph4` / `pl0` / `pl1` / `pl2` / `pl3` / `pl4` / `pr0` / `pr1` / `pr2` / `pr3` / `pr4` / `pt0` / `pt1` / `pt2` / `pt3` / `pt4` / `pv0` / `pv1` / `pv2` / `pv3` / `pv4`
|
|
768
|
+
|
|
769
|
+
#### Margin <!-- notoc -->
|
|
770
|
+
|
|
771
|
+
`center` / `ma0` / `ma1` / `ma2` / `ma3` / `ma4` / `mb0` / `mb1` / `mb2` / `mb3` / `mb4` / `mh0` / `mh1` / `mh2` / `mh3` / `mh4` / `ml0` / `ml1` / `ml2` / `ml3` / `ml4` / `mr0` / `mr1` / `mr2` / `mr3` / `mr4` / `mt0` / `mt1` / `mt2` / `mt3` / `mt4` / `mv0` / `mv1` / `mv2` / `mv3` / `mv4`
|
|
772
|
+
|
|
773
|
+
#### Overflow <!-- notoc -->
|
|
774
|
+
|
|
775
|
+
`overflow-auto` / `overflow-hidden` / `overflow-scroll` / `overflow-visible` / `overflow-x-auto` / `overflow-x-hidden` / `overflow-x-scroll` / `overflow-x-visible` / `overflow-y-auto` / `overflow-y-hidden` / `overflow-y-scroll` / `overflow-y-visible`
|
|
776
|
+
|
|
777
|
+
#### Positions <!-- notoc -->
|
|
778
|
+
|
|
779
|
+
`absolute` / `bottom--1` / `bottom--2` / `bottom-0` / `bottom-1` / `bottom-2` / `fixed` / `left--1` / `left--2` / `left-0` / `left-1` / `left-2` / `relative` / `right--1` / `right--2` / `right-0` / `right-1` / `right-2` / `sticky` / `top--1` / `top--2` / `top-0` / `top-1` / `top-2`
|
|
780
|
+
|
|
781
|
+
#### Z-indices <!-- notoc -->
|
|
782
|
+
|
|
783
|
+
`z-0` / `z-1` / `z-2` / `z-3` / `z-4` / `z-5` / `z-999` / `z-9999`
|
|
784
|
+
|
|
785
|
+
#### Shadow <!-- notoc -->
|
|
786
|
+
|
|
787
|
+
`i-shadow-1` / `i-shadow-2` / `i-shadow-3` / `i-shadow-4` / `shadow-1` / `shadow-2` / `shadow-3` / `shadow-4`
|
|
788
|
+
|
|
789
|
+
#### Font families <!-- notoc -->
|
|
790
|
+
|
|
791
|
+
`monospace` / `sans-serif` / `serif` / `system`
|
|
792
|
+
|
|
793
|
+
#### Font sizes <!-- notoc -->
|
|
794
|
+
|
|
795
|
+
`f-subtitle` / `f-title` / `f1` / `f2` / `f3` / `f4` / `f5` / `f6` / `f7`
|
|
796
|
+
|
|
797
|
+
#### Font weights <!-- notoc -->
|
|
798
|
+
|
|
799
|
+
`b` / `fw100` / `fw200` / `fw300` / `fw400` / `fw500` / `fw600` / `fw700` / `fw800` / `fw900` / `normal`
|
|
800
|
+
|
|
801
|
+
#### Font variants <!-- notoc -->
|
|
802
|
+
|
|
803
|
+
`small-caps`
|
|
804
|
+
|
|
805
|
+
#### Text decorations <!-- notoc -->
|
|
806
|
+
|
|
807
|
+
`no-underline` / `strike` / `underline`
|
|
808
|
+
|
|
809
|
+
#### Text transforms <!-- notoc -->
|
|
810
|
+
|
|
811
|
+
`ttc` / `ttfsk` / `ttfw` / `tti` / `ttl` / `ttn` / `ttu`
|
|
812
|
+
|
|
813
|
+
#### Text align <!-- notoc -->
|
|
814
|
+
|
|
815
|
+
`tc` / `tj` / `tl` / `tr`
|
|
816
|
+
|
|
817
|
+
#### Vertical align <!-- notoc -->
|
|
818
|
+
|
|
819
|
+
`v-btm` / `v-mid` / `v-top`
|
|
820
|
+
|
|
821
|
+
#### Line heights <!-- notoc -->
|
|
822
|
+
|
|
823
|
+
`lh-copy` / `lh-double` / `lh-solid` / `lh-title`
|
|
824
|
+
|
|
825
|
+
#### Whitespace <!-- notoc -->
|
|
826
|
+
|
|
827
|
+
`ws-0` / `ws-1` / `ws-2`
|
|
828
|
+
|
|
829
|
+
#### Letter spacing <!-- notoc -->
|
|
830
|
+
|
|
831
|
+
`ls--1` / `ls--2` / `ls-0` / `ls-1` / `ls-2` / `ls-3`
|
|
832
|
+
|
|
833
|
+
### Media queries
|
|
834
|
+
|
|
835
|
+
- **ns**: `{"min-width":"30rem"}`
|
|
836
|
+
- **m**: `{"min-width":"30rem","max-width":"60rem"}`
|
|
837
|
+
- **l**: `{"min-width":"60rem"}`
|
|
838
|
+
- **dark**: `{"prefers-color-scheme":"dark"}`
|
|
839
|
+
- **light**: `{"prefers-color-scheme":"light"}`
|
|
840
|
+
- **anim**: `{"prefers-reduced-motion":false}`
|
|
841
|
+
- **noanim**: `{"prefers-reduced-motion":true}`
|
|
842
|
+
|
|
843
|
+
## Status
|
|
844
|
+
|
|
845
|
+
**ALPHA** - bleeding edge / work-in-progress
|
|
846
|
+
|
|
847
|
+
[Search or submit any issues for this package](https://github.com/thi-ng/umbrella/issues?q=%5Bmeta-css%5D+in%3Atitle)
|
|
848
|
+
|
|
849
|
+
## Related packages
|
|
850
|
+
|
|
851
|
+
- [@thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-css) - CSS from nested JS data structures
|
|
852
|
+
|
|
853
|
+
## Installation
|
|
854
|
+
|
|
855
|
+
```bash
|
|
856
|
+
npx @thi.ng/meta-css --help
|
|
437
857
|
```
|
|
438
858
|
|
|
859
|
+
[Bun](https://bun.sh) is required instead of Node JS. The toolchain itself is
|
|
860
|
+
distributed as CLI bundle with **no runtime dependencies**. The following
|
|
861
|
+
dependencies are only shown for informational purposes and are (partially)
|
|
862
|
+
included in the bundle.
|
|
863
|
+
|
|
864
|
+
Package sizes (brotli'd, pre-treeshake): ESM: 11.31 KB
|
|
865
|
+
|
|
866
|
+
## Dependencies
|
|
867
|
+
|
|
868
|
+
- [@thi.ng/api](https://github.com/thi-ng/umbrella/tree/develop/packages/api)
|
|
869
|
+
- [@thi.ng/args](https://github.com/thi-ng/umbrella/tree/develop/packages/args)
|
|
870
|
+
- [@thi.ng/arrays](https://github.com/thi-ng/umbrella/tree/develop/packages/arrays)
|
|
871
|
+
- [@thi.ng/checks](https://github.com/thi-ng/umbrella/tree/develop/packages/checks)
|
|
872
|
+
- [@thi.ng/compose](https://github.com/thi-ng/umbrella/tree/develop/packages/compose)
|
|
873
|
+
- [@thi.ng/errors](https://github.com/thi-ng/umbrella/tree/develop/packages/errors)
|
|
874
|
+
- [@thi.ng/file-io](https://github.com/thi-ng/umbrella/tree/develop/packages/file-io)
|
|
875
|
+
- [@thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-css)
|
|
876
|
+
- [@thi.ng/logger](https://github.com/thi-ng/umbrella/tree/develop/packages/logger)
|
|
877
|
+
- [@thi.ng/rstream](https://github.com/thi-ng/umbrella/tree/develop/packages/rstream)
|
|
878
|
+
- [@thi.ng/strings](https://github.com/thi-ng/umbrella/tree/develop/packages/strings)
|
|
879
|
+
- [@thi.ng/text-format](https://github.com/thi-ng/umbrella/tree/develop/packages/text-format)
|
|
880
|
+
- [@thi.ng/transducers](https://github.com/thi-ng/umbrella/tree/develop/packages/transducers)
|
|
881
|
+
|
|
882
|
+
## Usage examples
|
|
883
|
+
|
|
884
|
+
One project in this repo's
|
|
885
|
+
[/examples](https://github.com/thi-ng/umbrella/tree/develop/examples)
|
|
886
|
+
directory is using this package:
|
|
887
|
+
|
|
888
|
+
| Screenshot | Description | Live demo | Source |
|
|
889
|
+
|:-----------------------------------------------------------------------------------------------------------------------|:--------------------------------------|:------------------------------------------------------|:-----------------------------------------------------------------------------------|
|
|
890
|
+
| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/meta-css-basics.png" width="240"/> | Basic thi.ng/meta-css usage & testbed | [Demo](https://demo.thi.ng/umbrella/meta-css-basics/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/meta-css-basics) |
|
|
891
|
+
|
|
439
892
|
## Authors
|
|
440
893
|
|
|
441
894
|
- [Karsten Schmidt](https://thi.ng)
|