docs(meta-css): update readme

thi-ng · Nov 15, 2024 · 578cc78 · 578cc78
1 parent 7069752
commit 578cc78
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 6 deletions.
diff --git a/packages/meta-css/README.md b/packages/meta-css/README.md
@@ -32,6 +32,7 @@
   - [Meta-stylesheets syntax](#meta-stylesheets-syntax)
     - [Class identifiers & media query prefixes](#class-identifiers--media-query-prefixes)
     - [Media query prefixes](#media-query-prefixes)
+  - [Verbatim property definitions](#verbatim-property-definitions)
   - [Including custom CSS files](#including-custom-css-files)
   - [Force inclusion of unreferenced classes](#force-inclusion-of-unreferenced-classes)
 - [Exporting a generated framework as CSS](#exporting-a-generated-framework-as-css)
@@ -85,6 +86,7 @@
     - [Text color](#text-color)
     - [Text decorations](#text-decorations)
     - [Text transforms](#text-transforms)
+    - [Transform](#transform)
     - [Vertical align](#vertical-align)
     - [Visibility](#visibility)
     - [Whitespace](#whitespace)
@@ -143,7 +145,7 @@ data format to:
 declarations, and media query criteria, all of which are forming a framework
 2. as intermediate data format for generated CSS frameworks themselves
 
-**The entire toolkit (incl. all bundled dependencies) is currently only 36KB (unzipped)!**
+**The entire toolkit (incl. all bundled dependencies) is currently only 39KB (14KB brotli)!**
 
 This readme aims to provide a thorough overview of this toolchain, its
 possibilities and some concrete usage examples...
@@ -624,7 +626,7 @@ ALWAYS combined using `and`:
 | `print: "only"`                  | `only print`                   |
 
 See [media queries in the bundled base
-specs](https://github.com/thi-ng/umbrella/blob/f40ff9b9d7da496c2dd967c6185ca626cbbd9b4c/packages/meta-css/specs/_info.mcss.json#L6-L27)
+specs](https://github.com/thi-ng/umbrella/blob/10a1633519e744335853d3c64d9d23d06d63cda4/packages/meta-css/specs/_info.mcss.json#L6-L27)
 
 ### Custom declarations
 
@@ -907,6 +909,38 @@ body {
 }
 ```
 
+### Verbatim property definitions
+
+The `prop-name-[value]` syntax can be used to define CSS properties and their
+values directly. This syntax can be used alongside the other pre-defined classes
+and [templates](#templated-class-definitions) and be combined with [media query
+prefixes](#media-query-prefixes).
+
+```text tangle:export/readme-verbatim.mcss
+body {
+    background-image-[url(bg.png)]
+    dark:background-image-[url(bg-alt.png)]
+    ma0 pa3 sans-serif
+}
+```
+
+Resulting CSS:
+
+```css
+body {
+    background-image: url(bg.png);
+    margin: 0rem;
+    padding: 1rem;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+@media (prefers-color-scheme:dark) {
+    body {
+        background-image: url(bg-alt.png);
+    }
+}
+```
+
 ### Including custom CSS files
 
 One or more existing CSS files can be included & prepended to the output via the
@@ -1116,7 +1150,7 @@ These are readily usable (and used by a growing number of example projects in
 this repo), but also are provided as starting point to define your own custom
 framework(s)...
 
-Currently, there are 953 CSS utility classes (incl. 73 templates) defined in "MetaCSS base" (v0.13.0):
+Currently, there are 962 CSS utility classes (incl. 73 templates) defined in "MetaCSS base" (v0.16.0):
 
 ### Classes by category
 
@@ -2190,6 +2224,21 @@ Currently, there are 953 CSS utility classes (incl. 73 templates) defined in "Me
 - `ttu` (uppercase)
 </details>
 
+#### Transform
+
+<details><summary>9 items:</summary>
+
+- `tx-origin-b`
+- `tx-origin-bl`
+- `tx-origin-br`
+- `tx-origin-c`
+- `tx-origin-l`
+- `tx-origin-r`
+- `tx-origin-t`
+- `tx-origin-tl`
+- `tx-origin-tr`
+</details>
+
 #### Vertical align
 
 <details><summary>4 items:</summary>
@@ -2795,7 +2844,7 @@ distributed as CLI bundle with **no runtime dependencies**. The following
 dependencies are only shown for informational purposes and are (partially)
 included in the bundle.
 
-Package sizes (brotli'd, pre-treeshake): ESM: 13.70 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 13.77 KB
 
 ## Dependencies
 

diff --git a/packages/meta-css/tpl.readme.md b/packages/meta-css/tpl.readme.md
@@ -23,7 +23,7 @@ data format to:
 declarations, and media query criteria, all of which are forming a framework
 2. as intermediate data format for generated CSS frameworks themselves
 
-**The entire toolkit (incl. all bundled dependencies) is currently only 36KB (unzipped)!**
+**The entire toolkit (incl. all bundled dependencies) is currently only 39KB (14KB brotli)!**
 
 This readme aims to provide a thorough overview of this toolchain, its
 possibilities and some concrete usage examples...
@@ -504,7 +504,7 @@ ALWAYS combined using `and`:
 | `print: "only"`                  | `only print`                   |
 
 See [media queries in the bundled base
-specs](https://github.com/thi-ng/umbrella/blob/f40ff9b9d7da496c2dd967c6185ca626cbbd9b4c/packages/meta-css/specs/_info.mcss.json#L6-L27)
+specs](https://github.com/thi-ng/umbrella/blob/10a1633519e744335853d3c64d9d23d06d63cda4/packages/meta-css/specs/_info.mcss.json#L6-L27)
 
 ### Custom declarations
 
@@ -787,6 +787,38 @@ body {
 }
 ```
 
+### Verbatim property definitions
+
+The `prop-name-[value]` syntax can be used to define CSS properties and their
+values directly. This syntax can be used alongside the other pre-defined classes
+and [templates](#templated-class-definitions) and be combined with [media query
+prefixes](#media-query-prefixes).
+
+```text tangle:export/readme-verbatim.mcss
+body {
+	background-image-[url(bg.png)]
+	dark:background-image-[url(bg-alt.png)]
+	ma0 pa3 sans-serif
+}
+```
+
+Resulting CSS:
+
+```css
+body {
+    background-image: url(bg.png);
+    margin: 0rem;
+    padding: 1rem;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+@media (prefers-color-scheme:dark) {
+    body {
+        background-image: url(bg-alt.png);
+    }
+}
+```
+
 ### Including custom CSS files
 
 One or more existing CSS files can be included & prepended to the output via the