An idiomatic way to display style information with Clojure Hiccup

Question

I need to create style information inside hiccup to place an element in the place indicated by the variables "top" and "left". My code looks like this:

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

This code is pretty ugly. It would be better if hiccup would automatically display 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 a library that does this? Or do I need to roll my decision?

Thanks to Klozhuriyam for any pointers!

Answer 1

You can write a function that will do this, and it will even print a little less than a map. For example:

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

So you can write it like this ...

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

Example output from a function ...

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

Answer 2

Not much in Clojure, but a transformation-based approach such as Enlive as a solution for such needs - https://github.com/cgrand/enlive

Answer 3

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