Clojurians Log v2

@niamu: I've been trying out your suggestions today, and I still can't figure out how to incorporate garden with hiccup (or are they mutually exclusive? I don't think so...) Any chance you could post an example on how to attach a garden css object to a hiccup one?

@josh.freckleton: garden renders a string of CSS just like hiccup renders a string of HTML, so you have two options… Either try to use garden.core/style to try and use it in a style attribute on a hiccup HTML element. I honestly haven’t tried this out much and can’t verify if hiccup requires that the value of :style be a map or a string. If it requires a map, then you’re out of luck and can’t do this... (html [:div {:style (style…)}]) Or you can literally create a :style tag with hiccup and use garden.core/css inside it.

(html [:style (css…)])

hope that helps.

Personally I’ve been experimenting with the scoped attribute on style tags (`[:style {:scoped true} (css…)]`) and then using gensym on the top parent style selector to create a unique class to solve namespace problems and style conflicts on other UI components.

That’s worked out pretty well in an app that has several dozen components on screen at once, although that’s just my anecdotal evidence on a single relatively powerful machine. I have yet to do any benchmark tests on what that really does to rendering performance.

@niamu: thanks niamu, this really helps :simple_smile:

For the record, per @niamu 's suggestion, creating a style tag works really well:

(defselector h5)
(defselector div)
(defclass hoverable)
(defpseudoclass hover)
(defpseudoelement first-letter)
...
[:style
    (str
      ;(css [(h5 first-letter) {:color "#ff0000"}])
      (css [(div hoverable hover) {:background-color "red"}]))]

And here was an initial use for it that I had, took a while to figure out garden, so I'll post this here just in case it helps someone:

[:style
    (str
     (css [(descendant hoverable on-hover) {:display "none"}])
     (css [(descendant (hoverable hover) off-hover) {:display "none"}])
     (css [(descendant (hoverable hover) on-hover) {:display "block"}]))]

Glad you got it working. A couple notes with what you have… The str shouldn’t be necessary. You can make a single call to css thusly…

[:style
 (css [(descendant hoverable on-hover) {:display "none"}]
      [(descendant (hoverable hover) off-hover) {:display "none"}]
      [(descendant (hoverable hover) on-hover) {:display "block"}])]

@niamu nice, that worked well, except I've got one glitch. If I want to define something like: content: "ABC" I do it like this: {:content "\"ABC\""} and it renders as: content: &qout;ABC&qout;;, any idea how to get quotes into the style tag? (note, I mispelled quot so that slack doesn't format it)

I've tried double escaping it, but then the quotes just render as: \&qout;