Idiomatic way of rendering style info using Clojure Hiccup

Question

I need to build style info within hiccup in order to place an element at a location indicated by the variables "top" and "left". My code looks like so:

(html [:div {:style (str "top" top ";left" left)} "some text"])

This code is pretty ugly. It would be nicer if hiccup automatically rendered the "style" attribute using standard CSS style rules... Then I could write the following:

(html [:div {:style {:top top :left left}} "some text"])

Is there already a library that does this? Or, do I need to roll my own solution?

Thank you Clojurians for any pointers!

BillRobertson42 · Accepted Answer · 2015-12-30T16:13:01.690

11

You could write a function that would do that, and it would even be slightly less typing than the map. For example:

(defn style [& info]
  {:style (.trim (apply str (map #(let [[kwd val] %]
                                   (str (name kwd) ":" val "; "))
                                (apply hash-map info))))})

Which would allow you to write it like this...

(html [:div (style :top top :left left) "some text"])

Sample output from the function...

user=> (style :top 32 :left 14)
{:style "top: 32; left: 14;"}

edited Dec 30 '15 at 16:13

answered Oct 03 '12 at 04:36

BillRobertson42

12,602
4
40
57

Thanks Bill- I think it's clear from the few responses to this question that "rolling your own solution" is the right answer, as you suggest. I asked because I am creating a clojure library that adds this feature and wanted to make sure I wasn't "reinventing the wheel". – drcode Oct 05 '12 at 16:40
@drcode I just realized who you are. I have Land of Lisp and I love it. Thanks! – BillRobertson42 Jan 09 '14 at 15:01
Coming across this 3 years later... the code after (name kwd) should be ":" not an empty space to be valid css syntax for any future readers. – Scott Mitchell Dec 28 '15 at 05:12
@ScottMitchell So it should be `(str (name kwd) ":" val "; "))` instead of `(str (name kwd) " " val "; "))` ? – BillRobertson42 Dec 28 '15 at 15:48
Yea I just used your snippet for an email thing ;) – Scott Mitchell Dec 29 '15 at 18:18
@ScottMitchell Fixed that. Thanks! – BillRobertson42 Dec 30 '15 at 16:14

score 1 · Answer 2 · answered Aug 04 '17 at 02:46

1

What about this:

(defn style [s]
  (str/join ";" (map #(str (name %) ":" ((keyword %) s)) (keys s))))

(style {:padding     "20px"
        :background  "#e68a00"
        :color       "white"
        :font-size   "large"
        :font-weight "bold"})

answered Aug 04 '17 at 02:46

Alejandro Winkler

51
4

score 0 · Answer 3 · answered Nov 21 '13 at 17:55

0

Not much into Clojure yet, but a 'transformation' based approach like that of Enlive sounds like the solution for these kind of needs - https://github.com/cgrand/enlive

answered Nov 21 '13 at 17:55

Gokul

2,306
2
17
10

Idiomatic way of rendering style info using Clojure Hiccup

3 Answers3