2.9 KiB
Origami as an assembler for css?
An idea for building a shared, overridable library of styles.
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.
/*
* vars: --textcolor
* targets: body
*/
:root {
--textcolor: black;
}
body {
font-family: sans-serif;
font-size 16px;
color: var(--textcolor);
}
style.ori.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 angle brackets are needed because the path contains a #)*/
${<lib/page-layout-grid-centered-#26ea-a0.css>}
Versioning
If a collection of projects are using the shared libary, there might be some divergence of css 'components' used. The idea of the library is that it contains reusable groups of css rules to achieve recognizable outcomes such as 'header', 'menu-to-side-on-mobile', 'sticky-footer', 'content-centered-with-grid', 'content-centered-with-flexbox'. The ideal is to merge improvements from each project into the library in such a way that all projects can benefit, without breaking things. However, sometimes there might be incompatibilities.
What would work here is a strongly hands-on approach to version control. This is not about isolation of css components; a careful attention to the css cascade in each project is assumed. A solution could be to identify versions of 'solutions' with a unique version number in the name. Demonstrated with page-laout-grid-centered-#25ea-a0.css. Additionally, the comment above the include line contains PINNED as a reminder to keep this project on this version until further review; apparently there was a conflict with a newer version of the grid-centered layout css.
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.
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)