Development mode for examples using thi.ng meta‐css

Example projects added since late 2023 are using a new project template which utilizes the thi.ng/meta-css toolchain to better separate styles from code. This wiki page acts as centralized description for working with this setup:

To just run & build this example, use the usual yarn start or yarn build and see the example build instructions.

If you want to experiment with the source code and specifically the MetaCSS styles (*.mcss files), this project setup requires a different approach during development:

thi.ng/meta-css transpiler

Open a terminal and use the thi.ng/meta-css toolchain to first generate utility classes for a CSS framework and then start the transpiler/bundler in watch mode to compile MetaCSS stylesheets (e.g. /css/style.mcss) to actual CSS, using the just generated framework specs:

# from the repo root directory
(cd examples/<example> && yarn css:watch)

The first stage of this command will create a new JSON file (/css/framework.json) with hundreds of CSS class definitions & declarations in the example's /css directory...

Secondly, it will start watching all /css/*.mcss and /src/*.mcss stylesheets for changes and write transpiled & bundled results to /css/style.css. This output file is also watched by Vite, which will then automatically reload the styles in the browser...

The style.mcss file contains further comments, but please also do consult the thi.ng/meta-css readme for further guidance.

Vite dev server

Open a second terminal and start the ViteJS dev server only (without any other preparation steps):

(cd examples/<example> && yarn start:only)