tornado.core — org.clojars.jansuran03/tornado 0.1.0

The core tornado namespace, where every single function or value you could need is defined and documented in this namespace.

active clj

CSS pseudoselector "active". Used as a value, e.g.: [:.some-sel {:width (px 100)} [hover {:width (px 120)}]]

adjacent-sibling clj

(adjacent-sibling & selectors)

Coming soon

after clj

Coming soon

at-font-face clj

(at-font-face & props-maps)

Can be used for more convenient describing of @font-face. This is how example props-maps look like:

{:src [[(url "../webfonts/woff2/roboto.woff2") (css-format :woff2)] [(url "../webfonts/woff/roboto.woff") (css-format :woff)]] :font-family "Roboto" :font-weight :normal :font-style :italic}

This function can receive any number of props maps so that you can also write the example above this way:

{:src [[(url "../webfonts/woff2/roboto.woff2") (css-format :woff2)]]} {:src [[(url "../webfonts/woff/roboto.woff") (css-format :woff)]] :font-family "Roboto" :font-weight :normal :font-style :italic}

at-media clj

(at-media rules & changes)

Takes a rules map and any number of media changes and creates a CSSAtRule instance with "media" identifier:

(at-media {:screen :only :max-width (u/px 600) :min-width (u/px 800} [:& {:margin [[(u/px 15 0 (u/px 15) (u/px 20]] [:.abc #:def {:margin (u/px 20) :padding [[(u/px 30) (u/px 15)]] [:span {:background-color (colors/mix :red :green)]] [:footer {:font-size (u/em 1)])

The :& selector selects the current element. As you can see, you can nest the affected CSS hiccup how you only want. Special rules values: :screen :only => only screen :screen true => screen :screen false => not screen

{:screen true :speech false :max-width (u/px 600) :min-width (u/px 800} => @media screen and not speech and (min-width: 600px) and (max-width: 800px) {...

attr clj

(attr & args)

Coming soon

before clj

Coming soon

blur clj

(blur arg)

Coming soon

brightness clj

(brightness arg)

Coming soon

calc clj

(calc & args)

Coming soon

checked clj

CSS pseudoselector "checked". Used as a value, e.g.: [:.some-sel {:border [[(px 1) :solid :red]]} [checked {:border [[(px 1) :solid :crimson]]}]]

child-selector clj

(child-selector & selectors)

Coming soon

circle clj

(circle & args)

Coming soon

cm clj

(cm value)

An absolute length unit, "centimeter".

commajoin clj

(commajoin {:keys [compiles-to args]})

Coming soon

compile-expression clj

(compile-expression expr)

Compiles an expression: a number, string, symbol or a record. If the expression is a vector of sequential structures, compiles each of the structures and str/joins them with a space. Then, str/joins all these str/spacejoined structures with a comma.

E.g.: (compile-expression [[(u/px 15) (u/percent 20)] [:red :chocolate]]) => "15px 20%, #FF0000 #D2691E"

contains-subs clj

(contains-subs attribute subvalue)

(contains-subs tag attribute subvalue)

Selects all descendant elements which have a given parameter with a value containing a given substring (unlike the contains-word selector, the substring does not have to be a whole word).

contains-word clj

(contains-word attribute subvalue)

(contains-word tag attribute subvalue)

Selects all descendant elements which have a given parameter with a value containing a given word (substring is not enough - a matching word separated by commas or spaces).

contrast clj

(contrast arg)

Coming soon

counter clj

(counter & args)

Coming soon

counters clj

(counters & args)

Coming soon

css clj

(css css-hiccup)

(css flags css-hiccup)

Generates CSS from a hiccup vector or a (maybe multiple times) nested list of hiccup vectors (and/or with @keyframes, @font-face). If pretty-print? is set to false, compresses it as well. Then saves the compiled CSS string to a given file path.

You can also call this function without flags whenever you want to to just get the whole compiled CSS string printed out.

css-empty clj

CSS pseudoselector "css-empty". Used as a value, e.g.: [:.some-sel {:padding (px 20)} [css-empty {:padding (px 5)}]]

css-filter clj

(css-filter & args)

Coming soon

css-first clj

CSS pseudoselector "css-first". Used as a value, e.g.: [:.some-sel [css-first {:transform (scale 1.1)}]]

css-format clj

(css-format arg)

css-max clj

(css-max & args)

Coming soon

css-min clj

(css-min & args)

Coming soon

css-not clj

(css-not arg)

Coming soon

css-rem clj

(css-rem value)

A relative length unit, "rem", depending on the size of the root element

css-var clj

(css-var & args)

Coming soon

cubic-bezier clj

(cubic-bezier & args)

Coming soon

darken clj

(darken color value)

Transforms a color to hsl/hsla and subtracts an absolute lightness from it. E.g.: (darken (rgb 50 100 150) "15%"), (darken :gray 0.35), (darken "#123456" (percent 50))

defattributeselector clj macro

(defattributeselector & args)

Defines a CSS attribute selector. Those select all descendant elements containing a given attribute, of which the value matches a given substring. All attribute selectors have different conditions for matching: Start with a word, start with a substring, contain a word, contain a substring, end with a substring, have a given value, have a given attribute with any value.

By attributes, it is meant html attributes, e.g. span[class~="info"] selects all spans with a class containing a whole word "info". In tornado, we can represent this by (contains-word :span :class "info").

We can also use (contains-word :class "info") to mark all elements with that class ... compiles to [class~´"info"] and affects all elements with that condition.

default clj

CSS pseudoselector "default". Used as a value, e.g.: [:.some-sel {:width (px 100)} [default {:width (px 120)}]]

defcombinatorselector clj macro

(defcombinatorselector & args)

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"

defcssfn clj macro

(defcssfn & args)

Creates a cssfn function which which takes any number of arguments and creates a CSSFunction record for future compilation.

Defcssfn can take 1 argument, which creates the function with the same name in CSS and it will be expanded with str/join ", " (default function - commajoin): (defcssfn some-fn) => my.namespace/some-fn (some-fn "arg1" 42 (px 15)) ... compiles to "some-fn(arg1, 42, 15px)"

or it can take 2 arguments: (defcssfn css-min "min") => my.namespace/css-min (css-min (px 500) (vw 60)) ... compiles to "min(500px, 60vw)"

or the 2nd argument can be a compiling function (most commonly spacejoin, commajoin or single-arg for separating the args, you can also define a special function for that, but it should not ever be needed; read docs to these 3 functions): (defcssfn calc spacejoin) (calc (px 500) add 3 mul (vw 5)) ... "calc(500px + 3 * 5vw)"

you can also give defcssfn 3 arguments, where the 2nd one will be a special string for translation to CSS and the 3rd one the compiling function.

defkeyframes clj macro

(defkeyframes & args)

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, insert it to 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 (ms 500) :animation-name fade-in-opacity)}] [:#another-element {:animation-name fade-in-opacity :animation-delay (s 1.5)}]))

You can also define from & to progress animations:

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

defpseudoclass clj macro

(defpseudoclass & args)

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").

defpseudoclassfn clj macro

(defpseudoclassfn & args)

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.

defpseudoelement clj macro

(defpseudoelement & args)

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.

defunit clj macro

(defunit & args)

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)".

deg clj

(deg value)

An angular unit, "degree".

desaturate clj

(desaturate color value)

Transforms a color to hsl/hsla and subtracts an absolute saturation from it. E.g.: (desaturate (rgb 50 100 150) "15%"), (desaturate :gray 0.35), (desaturate "#123456" (percent 50))

disabled clj

CSS pseudoselector "disabled". Used as a value, e.g.: [:.some-sel {:background-color :white} [disabled {:background-color :gray}]]

dpcm clj

(dpcm value)

A resolution unit, "dots per centimeter".

dpi clj

(dpi value)

A resolution unit, "dots per inches".

dppx clj

(dppx value)

A resolution unit, "dots per pixels".

drop-shadow clj

(drop-shadow & args)

Coming soon

ellipse clj

(ellipse & args)

Coming soon

em clj

(em value)

A relative length unit, "em", depending on the size of the parent element.

enabled clj

CSS pseudoselector "enabled". Used as a value, e.g.: [:.some-sel {:background-color :gray} [enabled {:background-color :white}]]

ends-with clj

(ends-with attribute subvalue)

(ends-with tag attribute subvalue)

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 matching word.

first-child clj

CSS pseudoselector "first-child". Used as a value, e.g.: [:.some-sel [first-child {:transform (scale 1.1)}]]

first-letter clj

Coming soon

first-line clj

Coming soon

first-of-type clj

CSS pseudoselector "first-of-type". Used as a value, e.g.: [:.some-sel [first-of-type {:transform (scale 1.1)}]]

focus clj

CSS pseudoselector "focus". Used as a value, e.g.: [:.some-sel [focus {:background-color :blue}]]

fr clj

(fr value)

A relative length unit, "fraction", depending on the size of the parent element.

fullscreen clj

CSS pseudoselector "fullscreen". Used as a value, e.g.: [:.some-sel [fullscreen {:background-color :gray}]]

general-sibling clj

(general-sibling & selectors)

Coming soon

grad clj

(grad value)

An angular unit, "gradian". 100 gradians are equal to 90 degrees.

grayscale clj

(grayscale arg)

Coming soon

grid-areas clj

(grid-areas [first-row & more :as all-rows])

Given a sequence of grid-rows sequences, where each the element is represented by a keyword, a string or a symbol, return a grid-areas string:

(grid-areas [(repeat 3 :header) [:. :content :.] (repeat 3 :footer)]) Output CSS string: "header header header" ". content ." "footer footer footer"

has-attr clj

(has-attr attribute)

(has-attr tag attribute)

An attribute selector which selects all elements which have a given attribute with any value, or all html elements on/below the current nested selectors level which have a given attribute with any value.

has-val clj

(has-val attribute subvalue)

(has-val tag attribute subvalue)

Selects all descendants of a html tag which have a given parameter with a given value.

hover clj

CSS pseudoselector "hover". Used as a value, e.g.: [:.some-sel {:width (px 100)} [hover {:width (px 120)}]]

hsl clj

(hsl [hue saturation lightness])

(hsl hue saturation lightness)

Creates an hsl color.

hsla clj

(hsla [hue saturation lightness])

(hsla [hue saturation lightness alpha])

(hsla hue saturation lightness)

(hsla hue saturation lightness alpha)

Creates an hsla color.

hue-rotate clj

(hue-rotate arg)

Coming soon

hwb clj

(hwb & args)

Coming soon

Hz clj

(Hz value)

A frequency unit, "Hertz.

image clj

(image & args)

Coming soon

important clj

(important expr)

After the expression is compiled, " !important" is appended to it:

(important [(repeat 3 :auto)]) => "auto auto auto !important" (important :none => "none !important" (important "yellow" => "yellow !important"

in clj

(in value)

An absolute length unit, "inch"

in-range clj

CSS pseudoselector "in-range". Used as a value, e.g.: [:.some-sel [in-range {:border [[(px 2) :solid :red]]}]]

indeterminate clj

CSS pseudoselector "indeterminate". Used as a value, e.g.: [:.some-sel {:width (px 100)} [indeterminate {:width (px 120)}]]

inset clj

(inset & args)

Coming soon

invalid clj

CSS pseudoselector "invalid". Used as a value, e.g.: [:.some-sel {:width (px 100)} [invalid [:.err-msg {:display :flex}]]

invert clj

(invert arg)

Coming soon

kHz clj

(kHz value)

A frequency unit, "kiloHertz.

lang clj

(lang arg)

Coming soon

last-child clj

CSS pseudoselector "last-child". Used as a value, e.g.: [:.some-sel [last-child {:padding-right 0}]]

last-of-type clj

CSS pseudoselector "last-of-type". Used as a value, e.g.: [:.some-sel [last-of-type {:margin-right (px 5p}]]

left clj

CSS pseudoselector "left". Used as a value, e.g.: [:.some-sel [left {:background-color :red}]]

lh clj

(lh value)

A relative length unit, equal to the line height.

lighten clj

(lighten color value)

Transforms a color to hsl/hsla and adds an absolute lightness to it. E.g.: (lighten (rgb 50 100 150) "15%"), (lighten :gray 0.35), (lighten "#123456" (percent 50))

linear-gradient clj

(linear-gradient & args)

Coming soon

links clj

CSS pseudoselector "links". Used as a value, e.g.: [:.some-sel [hover {:color :font-black}]]

matrix clj

(matrix & args)

Coming soon

matrix3d clj

(matrix3d & args)

Coming soon

mix-colors clj

(mix-colors color & more)

Given any number of colors in any form (alpha-hex, non-alpha-hex, rgb, rgba, hsl, hsla), converts them to the most frequent type and mixes them.

mm clj

(mm value)

An absolute length unit, "millimeter".

ms clj

(ms value)

A time unit, "millisecond".

nth-child clj

(nth-child arg)

Coming soon

nth-last-child clj

(nth-last-child arg)

Coming soon

nth-last-of-type clj

(nth-last-of-type arg)

Coming soon

nth-of-type clj

(nth-of-type arg)

Coming soon

only-child clj

CSS pseudoselector "only-child". Used as a value, e.g.: [:.some-sel {:padding (px 10)} [only-child {:padding (px 15)}]]

only-of-type clj

CSS pseudoselector "only-of-type". Used as a value, e.g.: [:.some-sel [only-of-type {:background-color :chocolate}]]

opacify clj

(opacify color value)

Transforms a color to its with-alpha form and adds an absolute alpha to it. E.g.: (opacify(rgb 50 100 150) "15%"), (opacify :gray 0.35), (opacify "#123456" (percent 50))

opposite-hue clj

(opposite-hue color)

Transforms a color to hsl/hsla and rotates its hue by a half.

optional clj

CSS pseudoselector "optional". Used as a value, e.g.: [:.some-sel [optional {:opacity 0.8}]]

out-of-range clj

CSS pseudoselector "out-of-range". Used as a value, e.g.: [:.some-sel [out-of-range {:display :none}]]

pc clj

(pc value)

An absolute length unit, "pica".

percent clj

(percent value)

An absolute length unit, "percent" ("%"), can be used as color alpha in this library.

perspective clj

(perspective arg)

Coming soon

polygon clj

(polygon & args)

Coming soon

pt clj

(pt value)

An absolute length unit, "point".

px clj

(px value)

An absolute length unit, "pixel".

rad clj

(rad value)

An angular unit, "radian". Equal to 360°/2π

radial-gradient clj

(radial-gradient & args)

Coming soon

read-only clj

CSS pseudoselector "read-only". Used as a value, e.g.: [:.some-sel [read-only {:background-color :blanchedalmond}]]

read-write clj

CSS pseudoselector "read-write". Used as a value, e.g.: [:.some-sel [read-write {:cursor :pointer}]]

repeating-linear-gradient clj

(repeating-linear-gradient & args)

Coming soon

repeating-radial-gradient clj

(repeating-radial-gradient & args)

Coming soon

repl-css clj

(repl-css css-hiccup)

Generates CSS from a hiccup vector or a (maybe multiple times) nested list of hiccup vectors (and/or with @keyframes, @font-face). It then pretty prints the output string, which is useful for evaluating any tornado code in REPL.

required clj

CSS pseudoselector "required". Used as a value, e.g.: [:.some-sel [required {:border [[(px 2) :dotted :crimson]]}]]

rgb clj

(rgb [red green blue])

(rgb red green blue)

Creates an rgb color.

rgba clj

(rgba [red green blue])

(rgba [red green blue alpha])

(rgba red green blue)

(rgba red green blue alpha)

Creates an rgba color.

right clj

CSS pseudoselector "right". Used as a value, e.g.: [:.some-sel [right {:font-weight 800}]]

root clj

CSS pseudoselector "root". Used as a value, e.g.: [:.some-sel [root {:font-size (px 24)}]]

rotate clj

(rotate arg)

Coming soon

rotate-hue clj

(rotate-hue color angle)

Transforms a color to hsl/hsla and rotates its hue by an angle.

rotate3d clj

(rotate3d & args)

Coming soon

rotateX clj

(rotateX arg)

Coming soon

rotateY clj

(rotateY arg)

Coming soon

rotateZ clj

(rotateZ arg)

Coming soon

s clj

(s value)

A time unit, "second".

saturate clj

(saturate color value)

Transforms a color to hsl/hsla and adds an absolute saturation to it. E.g.: (saturate (rgb 50 100 150) "15%"), (saturate :gray 0.35), (saturate "#123456" (percent 50))

scale clj

(scale & args)

Coming soon

scale-alpha clj

(scale-alpha color value)

Transforms a color to its with-alpha form and adds multiplies its alpha with a numeric value. E.g.: (scale-alpha (rgb 50 100 150) "15%"), (scale-alpha :gray 0.35), (scale-alpha "#123456" (percent 50))

scale-lightness clj

(scale-lightness color value)

Transforms a color to hsl/hsla and adds multiplies its lightness with a numeric value. E.g.: (scale-lightness (rgb 50 100 150) "15%"), (scale-lightness :gray 0.35), (scale-lightness "#123456" (percent 50))

scale-saturation clj

(scale-saturation color value)

Transforms a color to hsl/hsla and adds multiplies its saturation with a numeric value. E.g.: (saturate (rgb 50 100 150) "15%"), (saturate :gray 0.35), (saturate "#123456" (percent 50))

scale3d clj

(scale3d & args)

Coming soon

scaleX clj

(scaleX arg)

Coming soon

scaleY clj

(scaleY arg)

Coming soon

scaleZ clj

(scaleZ arg)

Coming soon

scope clj

CSS pseudoselector "scope". Used as a value, e.g.: [:.some-sel [scope {:background-color :lime}]]

selection clj

Coming soon

sepia clj

(sepia arg)

Coming soon

single-arg clj

(single-arg {:keys [compiles-to args]})

Coming soon

skew clj

(skew & args)

Coming soon

skewX clj

(skewX arg)

Coming soon

skewY clj

(skewY arg)

Coming soon

spacejoin clj

(spacejoin {:keys [compiles-to args]})

Coming soon

starts-with clj

(starts-with attribute subvalue)

(starts-with tag attribute subvalue)

Selects all descendant elements which have a given parameter with a value starting with a given substring (unlike the contains-word selector, the substring does not have to be a whole matching word.

starts-with-word clj

(starts-with-word attribute subvalue)

(starts-with-word tag attribute subvalue)

Selects all descendant elements which have a given parameter with a value starting with a given word (substring is not enough - a matching word separated by commas or spaces).

symbols clj

(symbols & args)

Coming soon

target clj

CSS pseudoselector "target". Used as a value, e.g.: [:.some-sel [target {:background-color :teal}]]

translate clj

(translate & args)

Coming soon

translate3d clj

(translate3d & args)

Coming soon

translateX clj

(translateX arg)

Coming soon

translateY clj

(translateY arg)

Coming soon

translateZ clj

(translateZ arg)

Coming soon

transparentize clj

(transparentize color value)

Transforms a color to its with-alpha form and subtracts an absolute alpha from it. E.g.: (transparentize (rgb 50 100 150) "15%"), (transparentize :gray 0.35), (transparentize "#123456" (percent 50))

triad-next clj

(triad-next color)

Transforms a color to hsl/hsla and rotates its hue by a third clockwise.

triad-previous clj

(triad-previous color)

Transforms a color to hsl/hsla and rotates its hue by a third counterclockwise.

turn clj

(turn value)

An angular unit, "turn". Represents one whole turn, equal to 360 degrees.

url clj

(url & args)

Coming soon

valid clj

CSS pseudoselector "valid". Used as a value, e.g.: [:.some-sel [valid {:background-color :limegreen}]]

vh clj

(vh value)

A relative length unit, "viewport height", based on the height of the window.

visited clj

CSS pseudoselector "visited". Used as a value, e.g.: [:.some-sel [visited {:color :seashell}]]

vmax clj

(vmax value)

A relative length unit, maximum of vw and vh.

vmin clj

(vmin value)

A relative length unit, minimum of vw and vh.

vw clj

(vw value)

A relative length unit, "viewport width", based on the width of the window.