assets.devhack.net

common front-end assets for /dev/hack services

Build Rules

• static is copied verbatim into dist.
• styles are compiled using Dart SASS and bundled into dist/styles.css.
  • styles/_styles.css is the entrypoint stylesheet.
  • No absolute paths, please!

Development

Use of the Nix shell is strongly recommended. Otherwise, you will need prettier, lightningcss and just installed.

To generate the dist directory, run:

just
just build # is the same as `just`

Then, you can open the examples/demo.html file in your browser to see the result.

Watching for Changes

The development environment comes with a small inotifywait script that will automatically rebuild on file changes. To use it, run:

just watch

Developing with Docker/Podman Compose

If you don't have Nix installed but do have Docker or Podman, you can use the existing compose.yaml to launch the file watcher above:

docker-compose up # or
podman-compose up

CSS Layers

This project makes extensive use of CSS layers to manage styles. All styles provided by this project must be in the devhack layer. This ensures that styles can be overridden by other projects without needing to use !important.

If you're finding that your styles are being overridden, make sure that you put them in their own (ideally anonymous) layer like this:

@layer devhack;

@layer {
  /* Your styles here */
}

For more information, see MDN Docs: @layer Description.