DOCSEARCHbyAlgolia
Submit Docs

Garden CSS Library for Clojure

repository·master·Indexed 23 days ago

https://github.com/noprompt/garden

A library for rendering CSS in Clojure and ClojureScript using a Hiccup-like syntax. It allows developers to define CSS rules as vectors and declarations as maps, providing a full programming language alternative to CSS preprocessors. Features include the garden.core/css compilation function, the defcssfn macro for custom CSS functions, and the garden.selectors namespace for building complex selectors and calculating specificity.

Tokens
614
Snippets
1
Records
7
Agent score
30%

What's inside Garden

  1. Define CSS rules and selectors using vectors

    master

    Garden uses vectors to represent CSS rules.

    • Multiple Selectors: The first n non-collection elements of a vector are the selectors. For example, [:h1 :h2 ...] targets both h1 and h2 elements.
    • Nesting and Child Selectors: Nested vectors create descendant selectors. For example, [:h1 [:a ...]] compiles to h1 a.
    • Parent Selector (&): Similar to Sass/Less, you can use the & character in a nested selector to reference the parent selector.

  2. Define CSS declarations using maps

    master

    CSS declarations are represented as Clojure maps where keys are properties and values are the property values.

    • Keys: Should be a string, keyword, or symbol.
    • Values: Supports strings, keywords, symbols, numbers, maps, vectors, and lists. These are rendered as literal CSS values.
    • Note: Garden does not validate declarations; it will render whatever keys and values you provide.

  3. Install Garden

    master

    To use Garden in your project, add it as a dependency to your project.clj file.

    Version Requirements:

    • Garden 1.3.0 and above: Requires Clojure 1.7+ and ClojureScript 1.7.x+ to support reader conditionals.
    • Garden 1.2.5 and below: Requires Clojure 1.6.0 and works with ClojureScript 0.0-2342.

  4. Use the css function to compile CSS

    master

    The garden.core/css function is the primary entry point for compiling Garden syntax into a CSS string. It accepts an optional map of compiler flags, followed by any number of rules.

    Rules are represented as vectors, and declarations are represented as maps.

  6. Define custom CSS functions with defcssfn

    master

    If a specific CSS function (like url()) is not natively wrapped by Garden, you can define it using the defcssfn macro. This allows you to call the function within your Garden vectors.

    (defcssfn url)

(css (url "http://fonts.googleapis.com/css?family=Lato"))
;; => "url(http://fonts.googleapis.com/css?family=Lato)"

  7. Compose complex selectors with garden.selectors

    master

    The garden.selectors namespace provides a CSSSelector record and various macros/instances to build complex selectors programmatically.

    Available macros include:

    • defselector
    • defclass
    • defid
    • defpseudoclass
    • defpseudoelement

    Common selector instances include type selectors (a, abbr), pseudo-classes (active, hover), pseudo-elements (after, before), and combinators (>, +, -).