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.
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.
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!))
See documentation for full overview
(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"]]]
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.
(ns my-project.my-ns
(:require [tincture.typography :refer [Typography]]))
[:div
[Typography {:variant :h3
:gutter-bottom true}
"my headline"]
[Typography
"My body text"]]
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.
(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"}))
Returns a vector of the current viewport size: [width height]
Returns the current viewport width
Returns the current viewport height
Returns the currently used font family and url
Returns the currently used font family
Returns the currently used font url
Uses goog.labs.userAgent.device
to return whatever device your
site is run on.
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}
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}
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}}]}
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.
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.
- 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
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.
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.