commit c568773a103b186f664e5adfd3b8d1022a0dc48f Author: Hans Fast Date: Mon Mar 2 10:04:07 2026 +0100 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..f19298c --- /dev/null +++ b/README.md @@ -0,0 +1,74 @@ +# 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. + +```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 angle brackets are needed because the path contains a #)*/ +${} + + +``` + +## 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`) diff --git a/indexPage.ori.html b/indexPage.ori.html new file mode 100644 index 0000000..e5ef8f1 --- /dev/null +++ b/indexPage.ori.html @@ -0,0 +1,13 @@ + + + + + + Hello, World + + + +

Hello, world

How are you doing today?

+ + diff --git a/lib/page-layout-grid-centered-#26ea-a0.css b/lib/page-layout-grid-centered-#26ea-a0.css new file mode 100644 index 0000000..c833400 --- /dev/null +++ b/lib/page-layout-grid-centered-#26ea-a0.css @@ -0,0 +1,4 @@ +body { + display: grid; + place-content: center; +} diff --git a/lib/tokens.yaml b/lib/tokens.yaml new file mode 100644 index 0000000..07558a5 --- /dev/null +++ b/lib/tokens.yaml @@ -0,0 +1,3 @@ +bodycolor: blue +titlesize: 3em +parspace: 2rem diff --git a/lib/typography.css b/lib/typography.css new file mode 100644 index 0000000..ffc8061 --- /dev/null +++ b/lib/typography.css @@ -0,0 +1,20 @@ +/* + * vars: --textcolor + * selectors: body + */ + +:root { + --textcolor: black; +} + +body { + font-family: sans-serif; + font-size 16px; + color: var(--textcolor); +} + +/* use titlecolor if defined in project, otherwise textcolor, which is defined here in lib but may be overriden in project; fall back to */ +h1 { + color: var(--titlecolor, --textcolor, black) +} + diff --git a/site.ori b/site.ori new file mode 100644 index 0000000..50b2bbb --- /dev/null +++ b/site.ori @@ -0,0 +1,6 @@ + +{ + index.html: indexPage.ori.html/ + style.css: style.ori.css/ + tokens: tokens.yaml/ +} diff --git a/style.ori.css b/style.ori.css new file mode 100644 index 0000000..d9b00db --- /dev/null +++ b/style.ori.css @@ -0,0 +1,22 @@ +/* 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 #)*/ +${} + + diff --git a/token-compute.ori.yaml b/token-compute.ori.yaml new file mode 100644 index 0000000..4461c56 --- /dev/null +++ b/token-compute.ori.yaml @@ -0,0 +1,9 @@ +--- +{ + base: 21 + factor: 2 + _body: _template() +}._body +--- +single: ${base} +double: ${base * 2 } diff --git a/tokens.js b/tokens.js new file mode 100644 index 0000000..deb5750 --- /dev/null +++ b/tokens.js @@ -0,0 +1,11 @@ +export default (localtokens, defaulttokens) => { + const tokens = Object.assign({}, defaulttokens, localtokens); + let str = []; + for (const [key, value] of Object.entries(tokens)) { + str.push(`--${key}: ${value}`); + } + return `:root{ +${str.join(';\n')} +}` + +} diff --git a/tokens.yaml b/tokens.yaml new file mode 100644 index 0000000..4e7a536 --- /dev/null +++ b/tokens.yaml @@ -0,0 +1 @@ +bodycolor: red