cssclojurehiccup

Idiomatic way of rendering style info using Clojure Hiccup


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!


Solution

  • 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;"}