72 lines
2.1 KiB
Markdown
72 lines
2.1 KiB
Markdown
# Origami as an assembler for css?
|
|
|
|
An idea for building a shared, overridable library of styles.
|
|
|
|
To serve the website: `ori serve site.ori`.
|
|
|
|
`lib` is a (symlink to a) directory of css snippets. `style.css`, the final stylesheet for this project, is output by `style.ori.css`, which includes files from `lib`.
|
|
|
|
`lib/typography.css`. Document the interface: vars used and selectors targeted.
|
|
|
|
```css
|
|
/*
|
|
* vars: --textcolor
|
|
* targets: body
|
|
*/
|
|
|
|
:root {
|
|
--textcolor: black;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
font-size 16px;
|
|
color: var(--textcolor);
|
|
}
|
|
|
|
```
|
|
|
|
|
|
`style.ori.css`:
|
|
|
|
```css
|
|
/* order is important. */
|
|
${tokens.js(tokens.yaml/, lib/tokens.yaml/)}
|
|
|
|
|
|
/*include the typography rules: typography.css*/
|
|
${lib/typography.css}
|
|
|
|
/*overrides for typography: typography.css*/
|
|
body {
|
|
--textcolor: #25c4aa;
|
|
font-family: 'Jost*', sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--titlesize)
|
|
}
|
|
|
|
/* include layout rules: page-layout-grid-centered-#25ea-a0 PINNED
|
|
* the #VERSION_NUMBER indicates which of the variants in the library is being used.
|
|
* PINNED is a reminder not to upgrade to a new version without reviewing first. */
|
|
${<lib/page-layout-grid-centered-#26ea-a0.css>}
|
|
/*(the angle brackets are needed because the path contains a #)*/
|
|
```
|
|
|
|
## What about design tokens?
|
|
This works, too. A `tokens.yaml` file can be read by `tokens.js` and converted to CSS custom property declarations: `titlesize: 3rem` => `--titlesize: 3rem;`.
|
|
|
|
`tokens.js` also optionally merges a default tokens file from `lib` with a local one, overriding default values if they are defined in the local file.
|
|
|
|
NOTE: This project contains some convoluted variable overrides for demonstration purposes -- not necessarily recommended in production.
|
|
|
|
I suppose Origami templating could be applied to the token files, to compute some values from others? See `./token-compute.ori.yaml`.
|
|
|
|
|
|
## Disadvantages
|
|
no source mapping makes debugging in the browser more difficult. Could probably be added fairly easily?
|
|
|
|
## Advantages
|
|
no extra tooling and dependencies (e.g. `postcss` -- compare [gist-weborigami-postcss](https://git.surfacemarkup.net/hans/gist-weborigami-postcss)
|