The Tornado Clojure library

Created by Honza Šuráň

#clj, #clojure, #compiler, #css, #easy, #garden, #html, #internet, #java, #javascript, #leiningen, #simple, #web

Hiccup syntax

How to start

Every useful function or constant in Tornado is defined in tornado.core. You do not need any other namespace. It makes using the library as simple as possible!

mix-colors

representation possibilities

color functions

functions & constants names

Some of the functions & constants are named differently that what they later compile to. It is done so to avoid collisions with Clojure functions.

Mostly, everything is named how you would expect: (px 15),
Pseudoclass/pseudoelement selectors: hover, first-line
Pseudoclass selectors with an arg: (nth-child :odd), (lang :en)
@rules: (at-media {& rules} & [effects]),
Color functions:
(hsl 80 0.5 0.5), (rotate-hue :red 30), (mix-colors :red :lime)
Sometimes to avoid collisions with Clojure functions:
(css-rem 15), (css-filter (blur (px 5)))
Combinators selectors: (has-val :a :target :blank)

colors

other functions

representation in code

list of attribute selectors

All the selectors can also have an element specified to limit the selector effects:

(ends-with :src ".png") => [src$=".png"]
(ends-with :img :src :.png) => img[src$=".png"]

ClojureScript × Clojure

• macros have to be referred from the namespace where they were defined, e.g.
  (:require-macros [tornado.units :refer [defunit]])
• you cannot refer all functions from tornado.core directly, you have to use an alias or refer them specifically functions/constants
  (:require [tornado.core :refer [px rgb hover])
• you cannot save the CSS to disk, but you probably use cljs for outputting to reagent style elements

If any image does not have sufficient resolution, you can download it with full quality by clicking the sandwich in the upper left corner -> files and images -> choose an image -> download

attribute selectors

Attribute selectors select all descendant elements containing a given substring, of which the the value matches a given substring. All attribute selectors have different conditions for matching. Dashes count as word separators. By attributes, it is meant html attributes:

Clojure: (contains-word :div :class :.info)
CSS: div[class~="info"]

lein-tornado

Lein-tornado orgpage

class & id selectors

Class and id selectors style HTML element with the given class or id, optional conditional nesting allowed.

@keyframes

GitHub

https://github.com/JanSuran03/tornado

https://github.com/JanSuran03/lein-tornado

selectors

In CSS, selectors are an essential thing; they specify, which elements should be styled. There are several types of selectors:

Class sel., id sel., element sel., attribute sel., combinator sel., pseudoclass sel. (some of them can have an argument), pseudoelement sel. and some special selectors.

Since in HTML the structure is basically elements nested into another elements, the CSS selectors work them same.

element selectors

Element selectors style each HTML element, optional conditional nesting allowed. 

pseudoelement selectors

Used to style a specific part of an element. Equal usage in code as pseudoclass selectors:

@media

special selectors

The "&" selector selects the current selectors nesting level (see @media).

The "*" selector selects all children (see pseudoclass selectors with an argument).

@rules

@font-face

pseudoclass selectors with an argument

pseudoclass selectors

Pseudoclass selectors change properties of elements based on some special state they currently have: