Garden (CSS in Clojure) Cheat Sheet

garden-cheat-sheet.clj

;; https://github.com/noprompt/garden

[:h1 {:color "green"}]

;; multiple selectors
[:h2 :h3 {:color "orange"}]
;; => h1, h2 { color: orange; }

;; descendants
[:h1 [:a {:text-decoration "none"}]]
;; => h1 a { text-decoration: none; }

;; children
[:h1 [:>a {:color "pink"}]]
;; h1 > a { color: pink; }

;; @font-face
(ns juicer.css.fonts
  (:require [garden.stylesheet :refer [at-font-face]]))

(defn fonts []
  [(at-font-face {:font-family "fontawesome-webfont"
                  :font-weight "normal"
                  :font-style "normal"}
                 ;; multiple maps to get around issue that we need multiple `src:` entries in CSS
                 ;; but we cannot have the same key twice in a Clojure map
                 ;; (see: https://github.com/juicer-io/juicer-clj/commit/716e859d6c1825e14a630f1fcbddf2df39bb037e#r30598606)
                 ;; order is important here
                 {:src "url(https://static.juicer.io/fonts/fontawesome-webfont.eot)"}
                 {:src ["url(https://static.juicer.io/fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype')"
                        "url(https://static.juicer.io/fonts/fontawesome-webfont.woff) format('woff')"
                        "url(https://static.juicer.io/fonts/fontawesome-webfont.ttf) format('truetype')"
                        "url(https://static.juicer.io/fonts/fontawesome-webfont.svg#fontawesome-webfont) format('svg')"]})
   (at-font-face {:font-family "ProximaNova"
                  :font-weight "normal"
                  :src ["url(https://static.juicer.io/fonts/ProximaNova-Regular.woff) format('woff')"
                        "url(https://static.juicer.io/fonts/ProximaNova-Regular.ttf) format('truetype')"]})
   (at-font-face {:font-family "ProximaNova"
                  :font-weight "bold"
                  :src ["url(https://static.juicer.io/fonts/ProximaNova-Bold.woff) format('woff')"
                        "url(https://static.juicer.io/fonts/ProximaNova-Bold.ttf) format('truetype')"]})
   (at-font-face {:font-family "ProximaNova"
                  :font-weight 100
                  :src ["url(https://static.juicer.io/fonts/ProximaNova-Light.woff) format('woff')"
                        "url(https://static.juicer.io/fonts/ProximaNova-Light.ttf) format('truetype')"]})])