Liking cljdoc? Tell your friends :D

tornado.macros


cartesian-productcljmacro

(cartesian-product & seqs)

Given any number of seqs, this function returns a lazy sequence of all possible combinations of taking 1 element from each of the input sequences.

Given any number of seqs, this function returns a lazy sequence of all possible
combinations of taking 1 element from each of the input sequences.
sourceraw docstring

defattributeselectorcljmacro

(defattributeselector selector-name compiles-to)

Attribute selectors select all descendant elements containing a given attribute, of which the value matches a given substring. All attribute selectors have different conditions for matching. Dashes count as words separators. By attributes, it is meant html attributes, e.g.: div[class~="info"]

Usage: (defattributeselector contains-word "~=") => #'tornado.selectors/contains-word (contains-word :direction "reverse") => #tornado.types.CSSAttributeSelector{:compiles-to "~=" :attribute :direction :subvalue "reverse"}

[attribute="value"]: Selects all descendant elements which have a given parameter with a given value. In code: <has-val>


With an html tag: a[attribute="value"]: Selects all descendants of a html tag which have a given parameter with a given value.

[attribute~="value"]: Selects all descendant elements which have a given parameter with a value containing a given word (not substring, word). In code: <contains-word>

[attribute|="value"]: Selects all descendant elements which have a given parameter with a value starting with a given word (not substring, word). In code: <starts-with-word>

[attribute^="value"]: Selects all descendant elements which have a given parameter with a value starting with a given substring (unlike the "|=" selector, the substring does not have to be a whole word. In code: <starts-with>

[attribute$="value"]: Selects all descendant elements which have a given parameter with a value ending with a given substring. The substring does not have to be a whole word. In code: <ends-with>

[attribute*="value"]: Selects all descendant elements which have a given parameter with a value containing a given substring. (unlike the "~=" selector, the substring does not have to be a whole word). In code: <contains-subs>

Attribute selectors select all descendant elements containing a given attribute,
of which the value matches a given substring. All attribute selectors have
different conditions for matching. Dashes count as words separators.
By attributes, it is meant html attributes, e.g.:    div[class~="info"]

Usage:
   (defattributeselector contains-word "~=")
   => #'tornado.selectors/contains-word
   (contains-word :direction "reverse")
   => #tornado.types.CSSAttributeSelector{:compiles-to "~="
                                          :attribute   :direction
                                          :subvalue    "reverse"}


[attribute="value"]:
   Selects all descendant elements which have a given parameter with a given value.
   In code: <has-val>
- - - - - - - - - - - -
With an html tag:
a[attribute="value"]:
   Selects all descendants of a html tag which have a given parameter
   with a given value.

[attribute~="value"]:
   Selects all descendant elements which have a given parameter with a value
   containing a given word (not substring, word).
   In code: <contains-word>

[attribute|="value"]:
   Selects all descendant elements which have a given parameter with a value
   starting with a given word (not substring, word).
   In code: <starts-with-word>

[attribute^="value"]:
   Selects all descendant elements which have a given parameter with a value
   starting with a given substring (unlike the "|=" selector, the substring
   does not have to be a whole word.
   In code: <starts-with>

[attribute$="value"]:
   Selects all descendant elements which have a given parameter with a value
   ending with a given substring. The substring does not have to be a whole word.
   In code: <ends-with>

[attribute*="value"]:
   Selects all descendant elements which have a given parameter with a value
   containing a given substring. (unlike the "~=" selector, the substring does
   not have to be a whole word).
   In code: <contains-subs>
sourceraw docstring

defcombinatorselectorcljmacro

(defcombinatorselector selector-name compiles-to)

Defines a combinator selector function which describes relationships between its arguments depending on the selector type:

:#abc :.def is the default combinator selector - descendant selector. Affects all children with a class .def.

child-selector ">": is active when the given selectors are every of them a direct child of the previous one.

adjacent-sibling (selector) "+": is active when the given html blocks elements or elements with a given class/id connected with the "+" sign are adjacent siblings.

general-sibling (selector) "~" is active when the given selectors are on the same level of nesting; they do not have to be adjacent necessarily.

Usage: [:.abc [:.def (child-selector :p :#ghi)]] compiles to ".abc .def, .abc > p > #ghi"

Defines a combinator selector function which describes relationships between its
arguments depending on the selector type:

:#abc :.def is the default combinator selector - descendant selector. Affects all
children with a class .def.

child-selector ">": is active when the given selectors are every of them a direct
child of the previous one.

adjacent-sibling (selector) "+": is active when the given html blocks elements or
elements with a given class/id connected with the "+" sign are adjacent siblings.

general-sibling (selector) "~" is active when the given selectors are on the same
level of nesting; they do not have to be adjacent necessarily.

Usage: [:.abc
         [:.def (child-selector :p :#ghi)]]
compiles to   ".abc .def, .abc > p > #ghi"
sourceraw docstring

defcssfncljmacro

(defcssfn fn-name)
(defcssfn fn-name css-fn-or-fn-tail)
(defcssfn clojure-fn-name compiles-to compile-fn)

Defines a CSS function. In most cases, you do NOT need to define a special compile-fn function - it should always be enough to use one of single-arg, spacejoin, commajoin. All of them compile the params, but: Single-arg gives you a warning if you give it more than 1 argument and compiles the args like commajoin. Commajoin compiles all its args and str/joins them with a comma. Spacejoin compiles all its args and str/joins them with a space. All these function also take the compiles-to argument and put it in front of a bracket enclosing the str/joined arguments. You can give this function 1, 2 or 3 arguments:

(defcssfn translate) (the default compile-fn is commajoin) (translate (u/px 80) (u/css-rem 6)) ... compiles to "translate(80px, 6rem)"

(defcssfn css-min "min") (css-min (u/px 500) (u/vw 40) (u/cm 20)) ... compiles to "min(500px, 40vw, 20cm)"

(defcssfn calc spacejoin) (calc (u/px 200) add 3 mul (u/percent 20)) ... compiles to "calc(200px + 3 * 20%)"

The arity(3) can be used like this to combine both previous features of the arity(2): (defcssfn my-clj-fn "css-fn" spacejoin) (my-clj-fn (u/s 20) (u/ms 500)) ... compiles to "css-fn(20s 500ms)"

Defines a CSS function. In most cases, you do NOT need to define a special compile-fn
function - it should always be enough to use one of single-arg, spacejoin, commajoin.
All of them compile the params, but: Single-arg gives you a warning if you give it more
than 1 argument and compiles the args like commajoin. Commajoin compiles all its args
and str/joins them with a comma. Spacejoin compiles all its args and str/joins them
with a space. All these function also take the compiles-to argument and put it in front
of a bracket enclosing the str/joined arguments.
You can give this function 1, 2 or 3 arguments:

(defcssfn translate)   (the default compile-fn is commajoin)
(translate (u/px 80) (u/css-rem 6))   ... compiles to    "translate(80px, 6rem)"

(defcssfn css-min "min")
(css-min (u/px 500) (u/vw 40) (u/cm 20))   ... compiles to   "min(500px, 40vw, 20cm)"

(defcssfn calc spacejoin)
(calc (u/px 200) add 3 mul (u/percent 20))   ... compiles to   "calc(200px + 3 * 20%)"

The arity(3) can be used like this to combine both previous features of the arity(2):
(defcssfn my-clj-fn "css-fn" spacejoin)
(my-clj-fn (u/s 20) (u/ms 500))   ... compiles to   "css-fn(20s 500ms)"
sourceraw docstring

defkeyframescljmacro

(defkeyframes animation-name & frames)

Defines a CSS @keyframes animation. The animation name should have a unique symbol for later reference to it and then animation frames in a format [progress params]:

(defkeyframes fade-in-opacity [(u/percent 0) {:opacity 0}] [(u/percent 25) {:opacity 0.1}] [(u/percent 50) {:opacity 0.25}] [(u/percent 75) {:opacity 0.5}] [(u/percent 100) {:opacity 1}])

Then, refer it the CSS hiccup list to make tornado compile it for later usage:

(def styles (list fade-in-opacity ...))

After that, you can assign this animation to whatever element you want:

(def styles (list fade-in-opacity [:.some-element {:animation-duration (u/ms 500) :animation-name fade-in-opacity)}] [:#another-element {:animation-name fade-in-opacity :animation-delay (u/s 1.5)}]))

With defkeyframes you can also define from & to progress animations:

(defkeyframes translate-animation [:from {:transform (f/translate (u/px 100) (u/px 200)}] [:to {:transform (f/translate (u/px 200) (u/px 400)}])

Defines a CSS @keyframes animation. The animation name should have a unique symbol
for later reference to it and then animation frames in a format [progress params]:

(defkeyframes fade-in-opacity
              [(u/percent 0) {:opacity 0}]
              [(u/percent 25) {:opacity 0.1}]
              [(u/percent 50) {:opacity 0.25}]
              [(u/percent 75) {:opacity 0.5}]
              [(u/percent 100) {:opacity 1}])

Then, refer it the CSS hiccup list to make tornado compile it for later usage:

(def styles
   (list
      fade-in-opacity
      ...))

After that, you can assign this animation to whatever element you want:

(def styles
   (list
      fade-in-opacity
      [:.some-element {:animation-duration (u/ms 500)
                       :animation-name     fade-in-opacity)}]
      [:#another-element {:animation-name  fade-in-opacity
                          :animation-delay (u/s 1.5)}]))

With defkeyframes you can also define from & to progress animations:

(defkeyframes translate-animation
              [:from {:transform (f/translate (u/px 100) (u/px 200)}]
              [:to {:transform (f/translate (u/px 200) (u/px 400)}])
sourceraw docstring

defpseudoclasscljmacro

(defpseudoclass pseudoclass)
(defpseudoclass identifier css-pseudoclass)

Defines a CSS pseudoclass. A CSS pseudoclass can activate some CSS properties on a css-class/css-id/html-element based on some current special state of the element.

For example, hover: (defpseudoclass hover) When compiling a selectors sequence, e.g. [:.abc :#def hover], the resulting CSS selectors sequence will look like this: ".abc #def:hover".

So, what does it even do? We can give the element a special value on hover: ... [:a hover {:color :blue} ...] - when we hover over a link with our mouse, the text color of the link will turn blue until we put our mouse away.

Defpseudoclass can also take 2 parameters, where the 2nd one will be the translation to CSS to avoid collisions between Clojure and CSS - e.g.(defpseudolass css-empty "empty").

Defines a CSS pseudoclass. A CSS pseudoclass can activate some CSS properties on
a css-class/css-id/html-element based on some current special state of the element.

For example, hover: (defpseudoclass hover)
When compiling a selectors sequence, e.g. [:.abc :#def hover], the resulting CSS
selectors sequence will look like this: ".abc #def:hover".

So, what does it even do? We can give the element a special value on hover:
... [:a hover {:color :blue} ...] - when we hover over a link with our mouse, the
text color of the link will turn blue until we put our mouse away.

Defpseudoclass can also take 2 parameters, where the 2nd one will be the translation
to CSS to avoid collisions between Clojure and CSS -
e.g.(defpseudolass css-empty "empty").
sourceraw docstring

defpseudoclassfncljmacro

(defpseudoclassfn pseudoclass)
(defpseudoclassfn pseudoclass compiles-to)

Creates a special CSS pseudoclass function, which compiles similarly as a standard CSS pseudoclass, but it is pseudoclass function with an argument.

For example. if you wanted to only select every n-th argument: (defpseudoclassfn nth-child) (nth-child :odd) ... compiles to "<parent>:nth-child(odd)" (nth-child "3n+1") ... compiles to "<parent>:nth-child(3n+1)"

Or if you wanted to show something based on the current language of the browser: (defpseudoclass lang) (lang "en") ... compiles to "<parent>:lang(en)"

To avoid collisions with some Clojure functions, you can give a second argument to defpseudoclassfn for a different translation to CSS: (defpseudoclass css-not "not") (css-not :p) ... compiles-to "not(p)", which selects all descendants which are not a paragraph.

Creates a special CSS pseudoclass function, which compiles similarly as a standard
CSS pseudoclass, but it is pseudoclass function with an argument.

For example. if you wanted to only select every n-th argument:
(defpseudoclassfn nth-child)
(nth-child :odd)     ... compiles to   "<parent>:nth-child(odd)"
(nth-child "3n+1")   ... compiles to   "<parent>:nth-child(3n+1)"

Or if you wanted to show something based on the current language of the browser:
(defpseudoclass lang)
(lang "en") ... compiles to   "<parent>:lang(en)"

To avoid collisions with some Clojure functions, you can give a second argument
to defpseudoclassfn for a different translation to CSS:
(defpseudoclass css-not "not")
(css-not :p) ... compiles-to   "not(p)", which selects all descendants which are
not a paragraph.
sourceraw docstring

defpseudoelementcljmacro

(defpseudoelement pseudoelement)

Defines a CSS pseudoelement. A CSS pseudoelement activates some CSS properties on a special part of a css-class/css-id/html-element.

For example, first-letter: (defpseudoclass first-letter) When compiling a selectors sequence, e.g. [:.abc :#def first-letter], the resulting CSS selectors sequence will look like this: ".abc #def::first-letter".

So, what does it even do? We can give the first letter of an element a special value: ... [:.abc :p first-letter {:font-size (u/px 60)} ...] - this causes the first letter of every paragraph in an element with class .abc to have the first letter significantly bigger than the rest of the paragraph.

Defines a CSS pseudoelement. A CSS pseudoelement activates some CSS properties on
a special part of a css-class/css-id/html-element.

For example, first-letter: (defpseudoclass first-letter)
When compiling a selectors sequence, e.g. [:.abc :#def first-letter], the resulting CSS
selectors sequence will look like this: ".abc #def::first-letter".

So, what does it even do? We can give the first letter of an element a special value:
... [:.abc :p first-letter {:font-size (u/px 60)} ...] - this causes the first letter
of every paragraph in an element with class .abc to have the first letter significantly
bigger than the rest of the paragraph.
sourceraw docstring

defunitcljmacro

(defunit unit)
(defunit identifier css-unit)

Creates a unit function which takes 1 argument and creates a CSSUnit record for future compilation. Defunit can take 1 arg: (defunit px) or 2 args: (defunit percent "%").

Usage of the defined units: (px 15) ... compiles to "15px" (percent 33) ... compiles to "33%"

CSSUnits can be added, subtracted, multiplied or divided by using function calc (you can also use these 4 keywords - they are defined just for better search in code: :add, :sub, :mul, :div

E.g. (calc (px 500) :add 3 :mul (vw 5)) ... "calc(500px + 3 * 5vw)".

Creates a unit function which takes 1 argument and creates a CSSUnit record for future
compilation. Defunit can take 1 arg: (defunit px)
                          or 2 args: (defunit percent "%").

Usage of the defined units: (px 15)       ...  compiles to "15px"
                            (percent 33)  ...  compiles to "33%"

CSSUnits can be added, subtracted, multiplied or divided by using function calc (you can
also use these 4 keywords - they are defined just for better search in code:
:add, :sub, :mul, :div

E.g. (calc (px 500) :add 3 :mul (vw 5)) ... "calc(500px + 3 * 5vw)".
sourceraw docstring

cljdoc is a website building & hosting documentation for Clojure/Script libraries

× close