A toolkit for Kinetic Web Typography
A Responsive Grid & Web Typography toolkit for Clojure & Clojurescript.
Built on Garden.
Web Design is 95% Typography - iA
My current priority is to build a Clojurescript interface to CSS
Grid, CSS
Animations
specs in the context of Typography and Graphic Design.
Early research includes expressing:
Early prototypes:
A simple 8-column grid with col-x classes:
(grid/create-minimal-grid ".grid" (px 20))
Fluid, Fractional grids
(def gutter (px 20))(def grids(list (grid/create ".grid" gutter)(grid/wrap-widths 978)(grid/create-nested-units)(grid/nuke-gutters-and-padding)(grid/respond-small (:mobile breakpoints) gutter)(grid/respond-medium (:tablet breakpoints))))
Nested Grids
Add the following to fluid grids:
(grid/create-nested-units)
Baseline Typpography
(grid/zoomable-baseline-grid 16 24)
Create new DSLs
You may be working with a Creative Director or a Print Designer who does not
understand CSS. But they understand Design. Wouldn’t it be nice to understand
their specs and codify them into data?
Designer: Make the headings serifs and scale-types using four breakpoints
(take 480 px increments). And yes, use our brand settings.
(def settings{:min-width (px 400):max-width (px 1200):min-font (px 12):max-font (px 32):body-font (:eb-garamond typo/font-families):header-font (:eb-garamond typo/font-families):header-font-weight 600:header-color "#111":scale :golden-ratio:breakpoints {:mobile (px 480):tablet (px 960):laptop (px 1440):monitor (px 1920)}})(def fonts {:font-size-base (em 1.5):line-height-base (em 1.45):ff-serif ["EB Garamond" "Serif"]:ff-sans ["Fira Sans" "sans-serif"]:ff-mono ["Source Code Pro" "monospace"]})(defn headings [declarations][:h1 :h2 :h3 :header declarations]);; Create your own DSL(-> headings(scale-type settings)(make-serifs typo/font-families)))
Functional programmer: “Sure, let me build two higher order functions.”
;; a bad example(defn make-serifs [selector families](fn [declarations](let [styles (selector declarations)](conj styles (font (:garamond families) 3 600 0.5 2)))));; slightly better(defn scale-type [selector params](fn [declarations](let [styles (selector declarations)](conj styles(at-media {:min-width (get-in params [:breakpoints :mobile])}[:& {:font-size (* 1.5 (:min-font params))}])(at-media {:min-width (get-in params [:breakpoints :tablet])}[:& {:font-size (* 1.75 (:min-font params))}])(at-media {:min-width (get-in params [:breakpoints :laptop])}[:& {:font-size (* 2.25 (:min-font params))}])))))
Examples include example designs with Om and soon Reagent.
Run examples with the current mesh src, using figwheel:
lein dev
Styles can be compiled on the server, client, or generated as plain css files.
Write styles in Clojure when you prefer static styles or compiled styles on
server. Assuming you’re running lein garden auto with :stylesheet
app.styles/index set in its build id, all styles will be compiled into css on
disk.
Write styles in Clojurescript when you want styles to be dynamically
included at runtime, via Js or Cljs. This is useful if you’re building
fine-grained components based on React-like libraries: rather than bundling
styles into a single file, just import individual styles as functions:
(ns app.styles(:require [garden.core :refer [css]]))(def index(css grids)))(mesh.utils/insert-styles styles/index)
Invoke styles via plain old Javascript:
mesh.dom.insert_styles(app.styles.index)
You don’t need complex build tools like Webpack in
Clojurescript. Just Convert CSS into data and pass them around as code.
Joel Holbrooks for creating Garden, Chris Coyler for countless
CSS-Tricks.
I learned a lot by studying the source of multiple libraries (see references),
and may have borrowed ideas from them. Starting this library would have been
much harder without the work of these designers.
Mesh is currently in the development phase. I will be open to contributions
during Alpha.
Development.
Copyright © 2015-2019 Facjure, LLC.
Released under the Eclipse Public License, same as Clojure & Clojurescript.