Fork me on GitHub
#css
<
2016-02-11
>
josh.freckleton04:02: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?

niamu04:02: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.

niamu04:02:09

(html [:style (css…)])

niamu04:02:19

hope that helps.

niamu04:02: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.

niamu04:02: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.freckleton16:02:32

@niamu: thanks niamu, this really helps simple_smile

josh.freckleton18:02: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.freckleton18:02: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.

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

josh.freckleton22:02:45

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

josh.freckleton22:02:37

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