Skip to content
ClojureScript styling library using functions
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo/herbdemo
dev
docs
resources/public
script
site
src/herb
test/herb
.dir-locals.el
.gitignore
.projectile
.travis.yml
CHANGELOG.md
LICENSE
README.md
profile-log
project.clj

README.md

Herb

Build Status Clojars Project

Herb is a CSS styling library for Clojurescript, built using Garden, whose main focus is on component level styling using functions.

Requirements

Herb requires at least Clojure 1.9.0 and ClojureScript 1.9.542 due to use of clojure.spec.alpha to validate macro input.

Quick start

Clojars Project

(ns user
  (:require [herb.core :refer-macros [<class]]))

(defn style []
  {:background "red"})

(defn component
  [:div {:class (<class style)}])

Herb has two main macros, <class and <id, these macros takes a function that returns a Garden style map, and returns a classname/id based on the functions fully qualified name, in this case user/style.

The style is injected into the DOM when any one of Herb's macros are called.

Pass arguments:

(ns user
  (:require [herb.core :include-macros true :as herb]))

(defn style
  [color]
  {:color color})

(defn component []
  [:div {:class (herb/<class style "red")}])

Extend existing functions:

(ns user
  (:require [herb.core :include-macros true :refer [<class]]))

(defn button-style [text-color]
  {:display "inline-block"
   :color text-color
   :text-transform "uppercase"
   :cursor "pointer"
   :padding (px 12)})

(defn red-button-style []
  ^{:extend [button "white"]}
  {:background-color "red"})

(defn button []
  [:button {:class (<class red-button-style)}])

Garden is used to translate the style map to CSS, which enables most of Gardens functionality, so familiarizing yourself with its features is a good idea.

Refer to the tutorial for a full overview and examples of Herbs features.

Advanced optimizations

During a production build add this to the :compiler config :closure-defines {"goog.DEBUG" false}. This flag tells Herb to minify styles, remove unneeded style element attributes, and ensure anonymous functions gets the correct minified name.

NOTE: Currently minifying/pretty-printing is temporarily disabled due to a bug affecting certain media queries.

Development

To start the development server Leiningen is required:

lein figwheel

To use in Emacs using Cider m-x cider-jack-in-clojurescript and pick figwheel to start a ClojureScript repl environment and a server. See .dir-locals.el.

Point your browser to localhost:3449

Testing

To run tests:

lein test

License

Copyright © 2018 Daniel Berg

Distributed under the Eclipse Public License, the same as Clojure.

You can’t perform that action at this time.