Project

Namespaces

Public Vars

tincture.core

-main

(-main & args)

<sub

Shorthand for subscribing to re-frame subscriptions and dereference in one go.

Source: https://lambdaisland.com/blog/2017-02-11-re-frame-form-1-subscriptions

Example:

(<sub [:tincture/viewport-width])

>evt

Shorthand for dispatching re-frame events

source: https://lambdaisland.com/blog/2017-02-11-re-frame-form-1-subscriptions

Example:

(>evt [:tincture/set-font
  {:font-family ["Raleway" "'Helvetica Neue'" "Arial" "Helvetica" "sans-serif"]
   :font-url "https://fonts.googleapis.com/css?family=Raleway:300,400,500"}])

box-shadow

(box-shadow elevation)

Takes a elevation and retuns a CSS box-shadow string. Elevation can be one of #{0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24}

breakpoints

Map of breakpoints to be used in media queries, this is just an alias to the breakpoints defined in tincture.core/grid

clamp

(clamp value min-value max-value)

Clamps a value between a pair of boundary values. Takes a value and boundries max-value, min-value, and returns the a value within those bounds. Example:

(clamp 200 100 150)
;=> 150

create-transition

(create-transition {:keys [property duration delay easing], :or {property :all, duration 300, easing :ease-in-cubic, delay 0}})

Helper function that generates a transition string for multiple properties.

Options

create-transition takes a map of options:

  • :property CSS property/ies to transition. Can be single prop either string or keyword, a sequental collection of string or keyword.

  • :duration Duration applied to each property. A single positive int in milliseconds, or sequential collection of positive integers in milliseconds. Does not have to match the property count, it will get padded out to match the property count.

  • :delay, delay applied to each property. A single positive int in milliseconds, or a sequential collection of positive integers in milliseconds. Does not have to match property count, will get padded out based on the last value in collection, or if single value it is used for each property.

  • :easing, the easing function to be used on each property. Can be one of: #{:ease-in-quad :ease-in-cubic :ease-in-quart :ease-in-quint :ease-in-expo :ease-in-circ :ease-out-quad :ease-out-cubic :ease-out-quart :ease-out-quint :ease-out-expo :ease-out-circ :ease-in-out-quad :ease-in-out-cubic :ease-in-out-quart :ease-in-out-quint :ease-in-out-expo :ease-in-out-circ} or a sequential collection the same. Does not have to match property count, will get padded out based on either last value in collection.

Example usage

{:transition (create-transition {:property [:transform :opacity]
                                 :duration [300 500]
                                 :easing   [:ease-in-cubic :ease-out-cubic]})}

Result:

{:transition "transform 300ms cubic-bezier(.550, .055, .675, .19) 0ms, opacity 300ms cubic-bezier(.550, .055, .675, .19) 0ms"}

css-wrap-url

deprecated in 0.2.0

(css-wrap-url prop)

Wrap a url string in the url css function. Deprecated, use tincture.cssfns/url instead

easing-presets

Map of easing preset functions to be used in CSS transitions Source: https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d

index-of

(index-of coll value)

Takes a collection and a value and returns the value’s index in the given collection

init!

(init!)(init! options)

Initialize tincture. Dispatches :tincture/initialize which takes a map of options:

Options

:font-family a vector of font-families to be used in tincture.typography/Typography component. Default: ["Roboto" "Helvetica" "Arial" "sans-serif"]

:font-url a string representing a font url. If a url is provided it is injected as a <link> element in <head> on initialize. Default: nil

text-shadow

(text-shadow elevation)

Takes an elevation and returns a CSS string to be used in text-shadow property Elevation can be one of #{0 1 2 3}