tincture.cssfns — tincture 0.3.3-1

calc cljs

(calc & args)

Create a calc CSS function, takes a variable number of arguments.

Example:

(require '[garden.units :refer [percent px]])
(garden.core/css [:.my-class {:height (calc (percent 100) '- (px 20))}])

Result:

.my-class {
  height: calc(100% - 20px);
}

NOTE: No validation is currently done on the input of this function since it can be serveral different units, leaving the validation to CSS.

NOTE: Due to how this functions arguments is layed out the calc call takes its arguments using infix notation, which is not ideal but might improve in future.

linear-gradient cljs

(linear-gradient color1 color2)

(linear-gradient dir color1 position1 color2 position2)

Create a linear gradient CSS function using two colors and two positions.

See MDN linear-gradient documentation for posible values, I'm not gonna detail all the variants here.

Args:

Either two color stops, leaving the rest to default, or:

• dir (direction): See https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values

• color1: first color, all valid color-stops

• postition1: first position, either percentage or length

• color2: second color, all valid color stops

• postition2: second position, either percentage or length

Example usage:

(garden.core/css [:.my-class {:background (linear-gradient "to-left" "#333" "0%" "#eee" "100%")}])

Result:

.my-class {
  background: linear-gradient(to-left, #333 0%, #eee 100%);}
}

TODO Add more variants, multiple colors.

NOTE: No validation currently done on input.

NOTE: Your milage may vary on this one, there are simply too many variations to account for all of them. Consider creating your own custom css function using garden.

rgb cljs

(rgb r g b)

(rgb r g b a)

Create a RGB(A) color string by passing red green blue and optionally alpha.

Args:

• r (red): a number between 0 and 255 (inclusive) or a percent string (0% - 100%)
• g (green): a number between 0 and 255 (inclusive) or a percent string (0% - 100%)
• b (blue): a number between 0 and 255 (inclusive) or a percent string (0% - 100%)

Optional:

• a (alpha): floating point value between 0 and 1 inclusive

Example usage:

(garden.core/css [:.my-class {:color (rgb 255 255 255 0.2)}])

Result:

.my-class {
  color: rgb(255, 255, 255, 0.2);
}

url cljs

(url & args)

Create a CSS URL data type

Example usage:

(garden.core/css [:.my-class {:background (url "http://www.example.com/image.png")}])

Result:

.my-class {
  background: url(http://www.example.com/image.png);
}

NOTE: I make no attempt at validating URLs currently, unsure how to do it properly