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.

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.

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);
}

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