# css

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

josh.freckleton 06:03:24

@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?

niamu 06:33:40

@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.

niamu 06:34:09

(html [:style (css…)])

niamu 06:34:19

hope that helps.

niamu 06:37:58

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.

niamu 06:39:23

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.

josh.freckleton 18:44:32

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

josh.freckleton 20:11:43

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"}]))]

josh.freckleton 20:31:53

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"}]))] It's for showing/hiding elements when the parent is hovered over. Parent gets .hoverable, children get on-hover to show when hovered, off-hover to show otherwise.

niamu 20:35:59

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"}])]