css

For all your CSS related content...
chadhs 2017-11-03T13:40:38.000251Z

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

chadhs 2017-11-03T13:41:20.000164Z

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

chadhs 2017-11-03T14:41:09.000395Z

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

niamu 2017-11-03T15:09:14.000341Z

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.

niamu 2017-11-03T15:11:05.000154Z

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.

niamu 2017-11-03T15:11:42.000384Z

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

niamu 2017-11-03T15:43:34.000052Z

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

👍 1
chadhs 2017-11-03T15:44:08.000059Z

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

niamu 2017-11-03T15:46:02.000321Z

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

chadhs 2017-11-03T15:48:20.000280Z

ah cool, this is helpful thanks.

chadhs 2017-11-03T15:48:29.000468Z

you’re creating a stylesheet

chadhs 2017-11-03T15:48:50.000233Z

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

chadhs 2017-11-03T15:49:15.000110Z

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

niamu 2017-11-03T15:50:42.000044Z

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.