Garden: CSS in Clojure and ClojureScript

OR

Data All the CSS

by @ernestas

Syntax

A style sheet consists of a list of rules.

Each rule consists of one or more selectors, and a declaration block.

Data

p { margin: 0; } /* CSS */

[:p {:margin 0}] ;; Clojure(Script)

[:p, {margin: 0}] # Ruby

["p", {margin: 0}] // JavaScript

Rules

h1, h2, h3 { font-weight: none; }

[:h1 :h2 :h3 {:font-weight "none"}]

Child Selectors

h1 a { font-weight: none; }

[:h1 [:a {:font-weight "none"}]]

h1, h2 { font-weight: normal; }
h1 strong, h1 b,
h2 strong, h2 b { font-weight: bold; }

[:h1 :h2 {:font-weight "normal"}
 [:strong :b {:font-weight "bold"}]]

Parent Selectors

a { font-weight: normal; }
a:hover { font-weight: bold; }

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

Advanced Selectors

:host([flipped]) > ::content > *:last-child

(require '[garden.selectors :as s])

(s/defselector *)
(s/defpseudoclass host [x] x)
(s/defpseudoelement content)

(s/> (host (s/attr :flipped))
     content
     (* s/last-child))

Declarations

h1 {
  font-style:   normal;
  font-variant: normal;
  font-weight:  normal;
}

[:h1 {"font-style"  "normal"
      :font-variant :normal
      'font-weight  'normal}]

Maps as declaration values

h1 {
  font-style:   normal;
  font-variant: normal;
  font-weight:  normal;
}

[:h1 {:font {:style   "normal"
             :variant "normal"
             :weight  "normal"}}]

Vectors as declaration values

[:h1 {:font [["15px" "arial"] "sans-serif"]}]

[:h1 {:font "15px arial, sans-serif"}]

h1 { font: 15px arial, sans-serif; }

Units, color and  arithmetic

(require '[garden.arithmetic :refer [+ - * /]]
         '[garden.color :as color]
         '[garden.units :refer [px pt]])

(+ 1 (px 1) (pt 1))

3.3333333332999997px

(+ 1 (color/rgb 1 1 1) (color/hsl 1 1 1))

#050505

Other features

• Media queries
• Vendor auto-prefixing
• lein-garden and boot-garden

Conversion to Garden

• SASS to Garden
  • github.com/noprompt/thorn
• SASS/LESS parser
  • github.com/tonyganch/gonzales-pe/

Pros and Cons

More

• Priyatam Mudivarti - Responsive Grid with Garden CLJS at Clojure/West 2015
  • ​youtube.com/watch?v=-jnJGNDoSXc
• A Responsive Grid & Typography toolkit
  • github.com/facjure/mesh
• A utility belt for Garden
  • github.com/facjure/gardener
• Clojurescript UI template with Om, Async and Garden
  • github.com/priyatam/mala

History

Questions?

• Slides
  • slides.com/ernestas/garden
• Garden
  • github.com/noprompt/garden/
• Me online
  • twitter.com/ernestas