css 2017-11-03 | Slack Archive

so here’s a goofy question, how do you reference the css that garden generates, like say in a hiccup template?

how to use/consume seems to be omitted from the docs/wiki unless i’m missing it. thnx

perhaps a better question is… > what is a common preferred pattern for how/where to define your css with garden and consume/inject it?

niamu15:11:14

The lazy answer is to do what traditionally has always been done with CSS which is just knowing what IDs and classes are available and referencing those when writing your markup.

niamu15:11:05

I usually create a style.cljc namespace in my project and create a route that will serve the rendered CSS rather than spitting it out to a file which makes code reloading a bit of a pain.

niamu15:11:42

Then I’ll have a reference to that route path in my HTML structure in the <head>.

niamu15:11:34

For a different (arguably more modern) approach, check out this article: https://blog.estimate-work.com/a-new-world-writing-css-in-clojurescript-and-life-after-sass-bdf5bc80a24f

chadhs15:11:08

yeah i’ve read that article, and it’s good, just handy to see actual example implementations

niamu15:11:02

Here’s my use of Garden: https://github.com/niamu/hawkthorne-return/blob/master/src/hawkthorne/router.cljc#L41

niamu15:11:15

https://github.com/niamu/hawkthorne-return/blob/master/src/hawkthorne/style.cljc

chadhs15:11:20

ah cool, this is helpful thanks.

chadhs15:11:29

you’re creating a stylesheet

chadhs15:11:50

then you’re defining a render function that calls garden/css on that stylesheet

chadhs15:11:15

and i see the call to style/render in your response :body

niamu15:11:42

Right. So that way any changes to the style.cljc namespace during development always gives me the latest CSS in the route rather than having to spit out a new file of the rendered CSS.

2017-11-03

Channels