shadow-css-in-practice

Tiny overview of my personal usage of shadow-css, which I like.

---

The screencast is meant to showcase the intersection of emacs, meow, lispy, clojure, browser and repl driven development.

---

Conceptually tiny:

• Write something like (css :p-4 :mt-2), css is a macro that just returns a classname, nothing else
• shadow-css analyses your clj/cljs/cljc sources outputs .css files where the class names your_namespace_L44, that's it.

This is the clj hiccup shadow-css scittle stack.

It builds using babashka only, generating html from hiccup source code.

For development, you run a clj repl, optionally with a scittle nrepl in the browser, too.

Your scittle source code are cljs files that you add to your build artifact (a directory of files in my case), and you add them with a script tag on the pages you need them.

CSS is generated with the tailwind-like shadow-css.

This stack grew bottom up.

Resources:

• shadow-css
• Thomas Heller REPL blog post
• screencast (my blog)
• code (my blog)

All build steps run with babashka, which is fast!

The result is here.

---

(Currently, the build duration of my blog is dominated by the emacs org html gen).

---

This would go well together with a clojure server that "just" returns html, optionally with shadow-graft.

Clojurescript and/or reagent could be added if needed. (scittle supports reagent, so clojurescript might not be needed).

---

It's something I would consider for small-medium projects.