herb.core — herb 0.10.0

<class clj/s macro

(<class style-fn & args)

Takes a function style-fn that returns a map. Arguments args can be passed along with the function as additional arguments to <class i.e (<class some-fn arg1 arg2). Returns a unique class based on the fully qualified name and a hash of the arguments from the passed function

example:

(defn style-fn
    [color]
    {:background color})

  [:div {:class (<class style-fn "red")}]

<id clj/s macro

(<id style-fn & args)

Takes a function style-fn that returns a map. Arguments args can be passed along with the function as additional arguments to <id i.e (<id some-fn arg1 arg2). Returns a unique id based on the fully qualified name and a hash of the arguments from the passed function

example: (defn style-fn [color] {:background color})

[:div {:class (<id style-fn "red")}]

<keyframes clj/s macro

(<keyframes sym)

Returns a CSS string from defined keyframes using the defkeyframes macro.

(defkeyframes pulse
  [:from {:opacity 1}]
  [:to {:opacity 0}])

user=> (<keyframes pulse)
@keyframes anime {

  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<style clj/s macro

(<style style-fn & args)

Takes a function style-fn that returns a map. Arguments args can be passed along with the function as additional arguments to <style i.e (<style some-fn arg1 arg2). Returns a CSS string that is the result of calling passed function

defglobal clj/s macro

(defglobal sym & styles)

Define global CSS:

(defglobal some-global-style
  [:body {:box-sizing "border-box"
          :font-size (px 14)
  [:button {:border "none"}])

The CSS output of garden style vectors gets appended to head under data-herb="global"

defgroup clj/s macro

(defgroup n c)

Define a style group, takes a name and a map of styles in the form:

(defgroup my-group
  {:a-component {:color "red"}})

To use a group, use one of <class or <id macro, where the first argument is the key for whatever component stylesheet you want:

[:div {:class (<class my-group :a-component)}]

Since version 0.10.0 this macro is less useful than it once was due to how arguments are handled (every function is grouped), but keeping for backward compatibility.

defkeyframes clj/s macro

(defkeyframes sym & frames)

Define a CSS @keyframes animation:

(defkeyframes my-animation
      [:from
       {:background "red"}]

      [:to
       {:background "yellow"}])

CLJS: the keyframes CSS gets injected into head under data-herb="keyframes" CLJ: Use <keyframes macro with the defined keyframes returns a CSS string containing the animation

init! cljs

(init! options)

Initialize herb, takes a map of options: :vendors - a vector of vendor prefixes, ie [:webkit :moz] :auto-prefix - A set of CSS properties to auto prefix, ie #{:transition :border-radius}

join cljs

(join & classes)

Joins multiple classes together, filtering out nils:

(join (<class fn-1) (<class fn-2))