Any approaches for formatting/splitting nested Clojure vectors for readability? about garden HOT 4 CLOSED

You could try using garden.def/defrule for this sort of thing. defrule is a fairly simple macro which creates a var that is bound to a function which takes any number of arguments and returns a "rule" data structure from those arguments. From the example in the doc string:

user> (defrule sub-headings :h4 :h5 :h6)
#'user/sub-headings
user> (sub-headings {:font-weight "normal"})
[:h4 :h5 :h6 {:font-weight "normal"}] 

So basically it creates "selector" functions and can help visually break up a stylesheet. This was the primary motivation for the macro but it has some other nice properties which I think are worth sharing here.

Since we can name the selector whatever we want it potentially affords us more semantic stylesheets.

(defrule on-hover :&:hover)
(defrule visited-links :a:visited)

(visited-links
  (on-hover
    {:font-weight "bold"}))

;; Compare with:

[:a:visited 
 [:&:hover 
  {:font-weight "bold"}]]

While this example is fairly simple - maybe even a little silly - it's quite readable and expressive. Also if at anytime we want to change what visited-links means, say, for example to select both a:visited and a.visited, it would just be a simple addition to the definition. Obviously this is nice because it's clearly defined in one place.

...it's too early and pro tem to recognize opportunity for abstraction.

defrule can actually be pretty helpful in figuring out what those abstractions should be. I've found it's a very nice tool for "sketching".

By the way Garden has a new namespace garden.color in version 0.1.0-beta4 which has stuff like rgb, hsl, darken, lighten, etc. It needs a few minor adjustments but I think you'll find it more pleasurable than working with strings.

from garden.

Another idea that may help with readability, and I just realized this, is making use of Clojure's tagged literals. I'm not sure if these can be packaged with the Garden jar, or what the implications would be if I could, but you can try these out by adding them to a data_readers.clj file in the root of your class path (probably ./src).

{px garden.units/px
 em garden.units/em
 rgb garden.color/rgb
 hsl garden.color/hsl}

You can then author your stylesheets like so:

(ns my-project.stylesheets.screen
  (:require (garden [core :refer [css]]
                    units
                    color)))

(css
 [:body
  {:font-size #px 16
   :color #hsl [0 0 50]}])

which should produce the following CSS when compiled:

body {
  font-size: 16px;
  color: #808080;
}

Pretty neat!

from garden.

@danneu @noprompt for what it's worth, this is what I came up with:

(defmacro ! [& body] `[~@body])

(def global
  [(! :#top-header {:margin-bottom "60px"
                    :padding-bottom "20px"
                    :overflow "auto"
                    :background-color "rgb(44, 57, 63)"
                    :padding-top "30px"}
      (! :.link {:float "right"
                 :margin-left "10px"
                 :margin-top "55px"}
         (! :a {:padding {:bottom "20px"
                          :top "20px"
                          :right "0px"
                          :left "50px"}
                :color "#ccc"
                :font-size "110%"}
            (! :&:hover {:color "#fff"}))))

   (! :#footer {:margin-top "50px"
                :border-top ["1px solid #ddd"]
                :padding-bottom "20px"
                :text-align "center"
                :padding-top "20px"}
      (! :a :.copyright {:margin ["0px" "10px"]
                         :font-size "100%"})
      (! :.copyright {:margin-top "10px"}))

   (! :a {:color "#469AED"
          :text-decoration "none"}
      (! :&:hover {:text-decoration "underline"
                   :color "red"}))

   (! :body {:font-size "90%"
             :background-color "#fff"
             :font-family "\"Open Sans\" \"Helvetica Neue\""})

   (! :.container {:margin "auto"
                   :width "980px"})

   (! :.left-column {:width "640px"})])

It makes the indentation much more obvious, while not being too noisy and distracting to the eye.

Also, I was going to go with the tagged literals approach, but realized paredit wouldn't work so well with that.

from garden.

Although, lately (i.e. the past few seconds), I've been toying with using % instead of !.

from garden.