bb compatibility (with caveats, see README)absas-hexmarker pseudo class in garden.selectorsabs to refer-clojure exclude in garden.colorfr unitnth-xAdd @supports rule support.
Breaking Change: The function field in CSSFunction has been renamed to avoid Closure Compiler warnings. #144
Migrate cljx to cljc and maintain parity with Clojure/Cljs with 1.7. For more info see this PR
Fix a spelling mistake in garden.selectors.
Added new namespace garden.selectors containing functions and macros
for working with CSS selectors. This namespace defines the most common
type, pseudoclass, and pseudoelement selectors which are actually
instances of a new type CSSSelector.
Instances of CSSSelector can be treated both as a value and as a
function. When garden.selectors/css-selector is applied to a
CSSSelector the return value is the string representation of the
selector. When treated as a function the return result is a new
instance of CSSSelector which is merely a concatenation of the
original selector value and the selector value of each argument.
user> (ns foo
(:use [garden.selectors :as s
:exclude [+ - > empty first map meta not time var]])
(:require
[garden.repl]
[garden.core :refer [css]]))
foo> a
a
foo> (a)
a
foo> (a hover)
a:hover
foo> (css [(a hover) {:font-weight :bold}])
"a:hover {\n font-weight: bold;\n}"
This namespace should be considered alpha and is subject to change.
Added option for configuring line break positions in
garden.compression/compress-stylesheet (Clojure only).
Allow a preamble to be specified (Clojure only).
Macros in garden.def take advantage of macroexpand to capture meta
data.
Move plugins and dependencies to :dev profile
Allow vendor prefix overrides at the declaration level.
(css {:vendors [:foo]}
[:a
^{:prefix true :vendors [:bar]}
{:x 1}])
a {
x: 1;
-bar-x: 1;
}
Fix incorrect rendering of hsla values by not stripping the unit from
units with 0 magnitude.
Fix incorrect rendering of values in media expression.
Add two new macros defstyles and defstylesheet. These macros
eliminate two common patterns when authoring stylesheets with
Garden.
(require '[garden.def :refer [defstyles defstylesheet]])
;; This:
(defstyles h1-styles
[:h1 {:font-weight "normal"}])
;; is equivalent to:
(def h1-styles
(list
[:h1 {:font-weight "normal"}]))
;; This:
(defstylesheet screen
{:output-to (io/resource "public/css/screen.css")}
h1-styles)
;; is equivalent to:
(def screen
(css {:output-to (io/resource "public/css/screen.css")}
h1-styles))
Fixed incorrect rendering of hsla colors.
Fixed rendering for colors with alpha channel.
Thanks to @jeluard Garden can now be used client-side projects. Expect more exciting things in this area.
[] as a declaration value now implies a comma-separated list. Nested
lists are rendered as space separated lists and the behavior is no longer
recursive. The rational for this is it prevents situations where you
would need to nest vetors/lists more than two levels to acheive the
result you are interested in; gradients being a good example. The
recursive nature was removed simply because it lead to confusing code.
Meta data is no longer interpreted as a media-query. This was adding a
lot of additional complexity that was simply easier to solve by
creating a type. If you need to write a media-query use
garden.stylesheet/at-media.
garden.core/css is no longer a macro.
Added garden.core/style for use with the HTML style attribute.
Added new type garden.types.CSSAtRule
Added garden.stylesheet/at-keyframes for creating @keyframes blocks.
Added garden.def/cssfn and garden.def/defcssfn for defining custom
CSSFunctions. cssfn and defcssfn create functions which
automatically return new instances of CSSFunction.
(require '[garden.def :refer [cssfn defcss]])
(defcssfn example
"Create a CSS example function."
([arg] arg)
([arg1 arg2] [arg1 arg2])
([arg1 arg2 arg3] [arg1 [arg2 arg3]])
(css [:sel {:prop (example 1)}])
;; => sel{prop:example(1)}
(css [:sel {:prop (example 1 2)}])
;; => sel{prop:example(1,2)}
(css [:sel {:prop (example 1 2 3)}])
;; => sel{prop:example(1,2 3)}
(let [example (cssfn "example")]
(css [:sel {:prop (example [1 [2 3]])}]))
;; => sel{prop:example(1,2 3)}
Added garden.def/defkeyframes. This allows for easy reuse of
animations throughout a project along with providing an in for
creating animation libraries.
This:
(defkeyframes my-animation
[:from
{:background "red"}]
[:to
{:background "yellow"}])
(css
my-animation ;; Include the animation in the stylesheet.
[:div
{:animation [[my-animation "5s"]]}])"
will produce:
@keyframes my-animation {
from {
background: red;
}
to {
background: yellow;
}
}
div {
animation: my-animation 5s;
}
Added the garden.repl namespace which includes implementations of
print-method for Garden's internal record types. require this when
you want to see the output of Garden's internal types such as
garden.types.CSSFunction, etc. as they would appear in CSS.
Fixed spelling correction from garden.arithemetic to
garden.arithmetic.
Removed the garden.stylesheet.selectors,
garden.stylesheet.psuedo-classes, garden.stylesheet.functions, and
garden.stylesheet.functions.filters namespaces. These namespace
provided a nice convenience but added a lot of extra bloat to the library.
Removed garden.stylesheet/font-family for the same reason mentioned above.
The YUI Compressor is now used for stylesheet compression instead of the original compression techniques. This has the benefit of reducing compiler code and providing better and more sophisticated compression overall.
Media queries no longer appear at the bottom of the stylesheet but in roughly the same order they were defined in.
The :output-style flag has been replaced with :pretty-print?.
:pretty-print? true and :pretty-print? false (or simply omitting
the flage) are equivalent to :output-style :expanded and
:output-style :compressed respectively.
The :output-to flag may be specified to save complied CSS to a path
on disk. The return result of css will still be a string, however.
The :vendors flag may be set to a vector of browser prefixes for
which certain types, when rendered, will automatically be prefixed.
This automatically applies to @keyframes and any declarations with
the meta {:prefix true}.
For example this
(require '[garden.stylesheet :refer [at-keyframes]])
(css {:vendors ["moz" "webkit"]
:pretty-print? true}
[:* :*:after :*:before
^:prefix {:box-sizing "border-box"}]
(at-keyframes "foo"
[:from
{:foo "bar"}]
[:to
{:foo "baz"}]))
will produce
*, *:after, *:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@keyframes foo {
from {
foo: bar;
}
to {
foo: baz;
}
}
@-moz-keyframes foo {
from {
foo: bar;
}
to {
foo: baz;
}
}
@-webkit-keyframes foo {
from {
foo: bar;
}
to {
foo: baz;
}
}
The :media-expressions flag expected to be hash-map provides
customization for media expression handling. Currently there is only
one flag in this hash-map which may be set: :nesting-behavior. It
may have one of two values, :default or :merge. When set to
:merge nested media-queries will use merge to combine their
expression values with their parents. When unconfigured or set to
:default nested media queries will simply appear after their parent
when rendered.
CSSUnits with a magnitude value for which (zero? magnitude)
returns true are rendered without their unit type.
Can you improve this documentation?Edit on GitHub
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |