Tincture is a frontend toolkit for ClojureScript that provides several utility functions, components, and definitions to aid/speed up developing common web page visuals and functionality.

• Documentation
• Demo site

Requirements

Tincture requires at least Clojure 1.9.0 and ClojureScript 1.9.542 due to use of clojure.spec.alpha to validate various input.

The components in this library is build using Reagent API, and the event system used is re-frame. If you'd prefer some other react framework, or no react at all this library is probably not for you.

Usage

To use Tincture add this to your dependencies

Normally Tincture includes Reagent and re-frame, but if you want to use a different version of these libs exclude them from Tincture:

[tincture "0.x.x" :exclusions [reagent re-frame]]

You might also optionally initialize the event system.

(ns my-project
  (:require [tincture.core :as t]))

(defn my-init-function []
  (t/init!))

Examples

See documentation for full overview

Grid component

(ns my-project.my-ns
  (:require [tincture.grid :refer [Grid]]))

[Grid {:container true
       :class "my-class-name"
       :spacing 16
       :justify :center}
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 1"]]
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 2"]]
 [Grid {:item true
        :xs 12
        :sm 6}
  [:span "column 3"]]]

Typography component

The typography component have the default font-family set to ["Roboto" "Helvetica" "Arial" "sans-serif"], but Tincture does not load the Roboto font automatically. It is up to the developer to choose a method to load said font. Two options are:

• Add this markup to index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

• Call tincture.core/init! with a provided font url and family, it is then attached to the head. See Initialize section for more details.

Example

(ns my-project.my-ns
  (:require [tincture.typography :refer [Typography]]))

[:div
 [Typography {:variant :h3
              :gutter-bottom true}
  "my headline"]
 [Typography
  "My body text"]]

Re-frame and Tincture events

Initialize

Tincture uses re-frame as an event/subscription handler, and it can be initialized by calling tincture.core/init!.

init! take a map of options, currently a font family and a font url. These are used in the typography component. If no options is provided Tincture uses ["Roboto" "Helvetica" "Arial" "sans-serif"] as a default, and no url is attached to the head.

Example:

(ns my-project
  (:require [tincture.core :as t]))

;; Add a custom font via init
(defn my-init-function []
  (t/init! {:font-family ["Raleway" "Helvetica" "Arial" "sans-serif"]
            :font-url "https://fonts.googleapis.com/css?family=Raleway:300,400,500,700&display=swap"}))

Subscriptions

:tincture/viewport-size

Returns a vector of the current viewport size: [width height]

:tincture/viewport-width

Returns the current viewport width

:tincture/viewport-height

Returns the current viewport height

:tincture/font

Returns the currently used font family and url

:tincture.font/family

Returns the currently used font family

:tincture.font/url

Returns the currently used font url

:tincture/device

Uses goog.labs.userAgent.device to return whatever device your site is run on.

:tincture/breakpoint-down

Takes a breakpoint, one of #{:xs :sm :md :lg :xl} Returns a boolean that indicates if current viewport width is below the given breakpoint. Breakpoints are defined in tincture.core/breakpoints and looks like this: {:xs 0 :sm 600 :md 960 :lg 1280 :xl 1920}

:tincture/breakpoint-up

Takes a breakpoint, one of #{:xs :sm :md :lg :xl} Returns a boolean that indicates if current viewport width is above the given breakpoint. Breakpoints are defined in tincture.core/breakpoints and looks like this: {:xs 0 :sm 600 :md 960 :lg 1280 :xl 1920}

Advanced compilation

For compilation of CSS to work optimally I recommend adding the flag :clojure-defines {"goog.debug" false} to the :compiler config for your ClojureScript production build setup. This tells the underlying CSS library (Herb) to use minification and remove unneeded meta info from the head.

:cljsbuild {:builds [{:id "demo-release"
                      :source-paths ["demo"]
                      :compiler {:main "demo.prod"
                                 :output-to "resources/public/js/demo.js"
                                 :output-dir "resources/public/js/release"
                                 :closure-defines {"goog.DEBUG" false} ;; NOTE
                                 :optimizations :advanced}}]}

Contributing

Please open issues or pull requests if there is something you'd like to see included in this library. It is at the moment rather bare bones, and I'd love to see what other people use on a regular basis developing web pages using ClojureScript.

Disclaimer

Tincture is not a UI framework, it's more a collection of various functions and components I use on a regular basis being a frontend developer using ClojureScript. Many components in Tincture is based on Material UI, and is a re-implementation of those components in ClojureScript. If you want a full framework I wholeheartedly recommend Material UI.

Sources / Inspiration

• gradients.json sourced from: https://github.com/Ghosh/uiGradients/
• Tincture Grid is inspired by Material-ui Grid
• Tincture Typography is inspired by Material-ui Typography
• Tincture Paper is inspired by Material-ui Paper
• Logo is inspired by the work of Alex Kunchevsky and Boris Garic

Development

Start figwheel main with the development build

lein fig:build

Figwheel-main will automatically push cljs changes to the browser. Once Figwheel starts up, you should be able to open http://localhost:9500 for the development server.

Testing

Either run:

lein fig:test

For a headless test environment using chrome, make sure its installed on your system.

You can also start the dev build and navigate to http://localhost:9500/figwheel-extra-main/auto-testing to get a nice interface while coding that runs the tests on each save.