This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-02-11
Channels
- # announcements (1)
- # beginners (84)
- # boot (325)
- # cbus (1)
- # cider (13)
- # cljs-dev (1)
- # cljsjs (1)
- # cljsrn (15)
- # clojars (8)
- # clojure (221)
- # clojure-czech (2)
- # clojure-ireland (8)
- # clojure-madison (28)
- # clojure-poland (176)
- # clojure-russia (111)
- # clojurebridge (7)
- # clojurescript (75)
- # community-development (70)
- # conf-proposals (19)
- # core-async (29)
- # css (12)
- # cursive (66)
- # datavis (15)
- # datomic (61)
- # devcards (15)
- # dirac (2)
- # editors (13)
- # emacs (9)
- # funcool (7)
- # hoplon (13)
- # jobs-discuss (5)
- # ldnclj (39)
- # ldnproclodo (1)
- # lein-figwheel (3)
- # leiningen (21)
- # liberator (26)
- # off-topic (12)
- # om (153)
- # onyx (168)
- # parinfer (165)
- # proton (21)
- # quil (5)
- # re-frame (58)
- # reagent (4)
- # ring-swagger (12)
- # spacemacs (3)
- # yada (120)
@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.
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
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"}]))]
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.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;