How it works

:cljss takes styles as EDN and returns CSS class name, with generated CSS as a side effect.

Styles Map

(defstyles avatar []
  {:width "96px"
   :height "96px"
   :border-radius "50%"})

(defn Avatar [url]
  [:img {:class (avatar) :src url}])

Styled Elements

Om, Rum / Sablono & Reagent

(defstyled Avatar :img
  {:width "96px"
   :height "96px"
   :border-radius "50%"})

(Avatar {:src url})

Pseudo Selectors

(defstyled Avatar :img
  {:width "96px"
   :height "96px"
   :border-radius "50%"
   :transition "transform 400ms ease-in-out"
   :&:hover {:transform "scale(1.2)"}})

(Avatar {:src url})

Dynamic Props (function)

(defstyled Avatar :img
  {:width "96px"
   :height "96px"
   :border-radius (with-meta #(if % "50%" "0") :rounded?)})

(Avatar {:src url :rounded? false})

Dynamic Props (keyword)

(defstyled Avatar :img
  {:width :size
   :height :size
   :border-radius "50%"})

(Avatar {:src url :size "96px"})

CSS Animations

(defkeyframes spin [from to]
  {:from {:transform (str "rotate(" from "deg)")}
   :to   {:transform (str "rotate(" to "deg)")}})

(Avatar
  {:src url 
   :animation (str (spin 0 360) " 2s ease infinite")})

“Inline” styles

Rum / Sablono

(defn Avatar [url]
  [:img {:src url
         :css {:width "96px"
               :height "96px"
               :border-radius "50%"}}])

Predicate attributes

Keywords ending with “ ?” character

(defstyled Avatar :img
  {:width "96px"
   :height "96px"
   :border-radius "0"
   :rounded? {:border-radius "50%"}})

(Avatar {:src url :rounded? true})

Readable CSS class names

Namespace name + Var name

(ns example.core)

(defstyled Avatar :img
  {:width "96px"
   :height "96px"
   :border-radius "50%"})

[:img.example_core__Avatar {:src url}]

CSS Media Queries

(defstyles Avatar :img
  {:width "96px"
   :height "96px"
   :border-radius "50%"
   :cljss.core/media
     {[[:max-width "800px"]]
      {:border-radius "5px"}}})

`@font-face`

(font-face
  {:font-family "Open Sans"
   :src [{:url "/fonts/OpenSans-Regular-webfont.woff2"
          :format "woff2"}]})

Global styles

(inject-global
  {:body     {:margin 0}
   "ul > li" {:margin "8px 0"}})