Full Code of facjure/mesh for AI

Repository: facjure/mesh
Branch: master
Commit: e37887304c27
Files: 16
Total size: 51.1 KB

Directory structure:
gitextract_x2025m11/

├── .gitignore
├── LICENSE
├── README.md
├── dev/
│   └── repl.cljs
├── examples/
│   ├── grids/
│   │   ├── page.cljs
│   │   └── styles.clj
│   └── typography/
│       ├── page.cljs
│       └── styles.clj
├── project.clj
├── resources/
│   └── public/
│       └── index.html
└── src/
    └── facjure/
        ├── mesh/
        │   ├── core.cljc
        │   ├── grid.cljc
        │   ├── macros.clj
        │   ├── media.cljc
        │   └── typography.cljc
        └── mesh.cljc

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
resources/public/img
resources/public/js
resources/public/css/**/*.css
.lein-*
.repl*
.nrepl*
pom.xml
*jar
/lib/
*.log
js*
/classes/
/target/
/node_modules
/checkouts/
.lein-deps-sum
.lein-repl-history
.lein-plugins/
.lein-failures
*jar
/lib/
/classes/
/out/
/target/
.lein-deps-sum
.lein-repl-history
.lein-plugins/



================================================
FILE: LICENSE
================================================
Eclipse Public License - v 1.0

THE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC
LICENSE ("AGREEMENT"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM
CONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT.

1. DEFINITIONS

"Contribution" means:

a) in the case of the initial Contributor, the initial code and documentation
   distributed under this Agreement, and
b) in the case of each subsequent Contributor:
    i) changes to the Program, and
   ii) additions to the Program;

   where such changes and/or additions to the Program originate from and are
   distributed by that particular Contributor. A Contribution 'originates'
   from a Contributor if it was added to the Program by such Contributor
   itself or anyone acting on such Contributor's behalf. Contributions do not
   include additions to the Program which: (i) are separate modules of
   software distributed in conjunction with the Program under their own
   license agreement, and (ii) are not derivative works of the Program.

"Contributor" means any person or entity that distributes the Program.

"Licensed Patents" mean patent claims licensable by a Contributor which are
necessarily infringed by the use or sale of its Contribution alone or when
combined with the Program.

"Program" means the Contributions distributed in accordance with this
Agreement.

"Recipient" means anyone who receives the Program under this Agreement,
including all Contributors.

2. GRANT OF RIGHTS
  a) Subject to the terms of this Agreement, each Contributor hereby grants
     Recipient a non-exclusive, worldwide, royalty-free copyright license to
     reproduce, prepare derivative works of, publicly display, publicly
     perform, distribute and sublicense the Contribution of such Contributor,
     if any, and such derivative works, in source code and object code form.
  b) Subject to the terms of this Agreement, each Contributor hereby grants
     Recipient a non-exclusive, worldwide, royalty-free patent license under
     Licensed Patents to make, use, sell, offer to sell, import and otherwise
     transfer the Contribution of such Contributor, if any, in source code and
     object code form. This patent license shall apply to the combination of
     the Contribution and the Program if, at the time the Contribution is
     added by the Contributor, such addition of the Contribution causes such
     combination to be covered by the Licensed Patents. The patent license
     shall not apply to any other combinations which include the Contribution.
     No hardware per se is licensed hereunder.
  c) Recipient understands that although each Contributor grants the licenses
     to its Contributions set forth herein, no assurances are provided by any
     Contributor that the Program does not infringe the patent or other
     intellectual property rights of any other entity. Each Contributor
     disclaims any liability to Recipient for claims brought by any other
     entity based on infringement of intellectual property rights or
     otherwise. As a condition to exercising the rights and licenses granted
     hereunder, each Recipient hereby assumes sole responsibility to secure
     any other intellectual property rights needed, if any. For example, if a
     third party patent license is required to allow Recipient to distribute
     the Program, it is Recipient's responsibility to acquire that license
     before distributing the Program.
  d) Each Contributor represents that to its knowledge it has sufficient
     copyright rights in its Contribution, if any, to grant the copyright
     license set forth in this Agreement.

3. REQUIREMENTS

A Contributor may choose to distribute the Program in object code form under
its own license agreement, provided that:

  a) it complies with the terms and conditions of this Agreement; and
  b) its license agreement:
      i) effectively disclaims on behalf of all Contributors all warranties
         and conditions, express and implied, including warranties or
         conditions of title and non-infringement, and implied warranties or
         conditions of merchantability and fitness for a particular purpose;
     ii) effectively excludes on behalf of all Contributors all liability for
         damages, including direct, indirect, special, incidental and
         consequential damages, such as lost profits;
    iii) states that any provisions which differ from this Agreement are
         offered by that Contributor alone and not by any other party; and
     iv) states that source code for the Program is available from such
         Contributor, and informs licensees how to obtain it in a reasonable
         manner on or through a medium customarily used for software exchange.

When the Program is made available in source code form:

  a) it must be made available under this Agreement; and
  b) a copy of this Agreement must be included with each copy of the Program.
     Contributors may not remove or alter any copyright notices contained
     within the Program.

Each Contributor must identify itself as the originator of its Contribution,
if
any, in a manner that reasonably allows subsequent Recipients to identify the
originator of the Contribution.

4. COMMERCIAL DISTRIBUTION

Commercial distributors of software may accept certain responsibilities with
respect to end users, business partners and the like. While this license is
intended to facilitate the commercial use of the Program, the Contributor who
includes the Program in a commercial product offering should do so in a manner
which does not create potential liability for other Contributors. Therefore,
if a Contributor includes the Program in a commercial product offering, such
Contributor ("Commercial Contributor") hereby agrees to defend and indemnify
every other Contributor ("Indemnified Contributor") against any losses,
damages and costs (collectively "Losses") arising from claims, lawsuits and
other legal actions brought by a third party against the Indemnified
Contributor to the extent caused by the acts or omissions of such Commercial
Contributor in connection with its distribution of the Program in a commercial
product offering. The obligations in this section do not apply to any claims
or Losses relating to any actual or alleged intellectual property
infringement. In order to qualify, an Indemnified Contributor must:
a) promptly notify the Commercial Contributor in writing of such claim, and
b) allow the Commercial Contributor to control, and cooperate with the
Commercial Contributor in, the defense and any related settlement
negotiations. The Indemnified Contributor may participate in any such claim at
its own expense.

For example, a Contributor might include the Program in a commercial product
offering, Product X. That Contributor is then a Commercial Contributor. If
that Commercial Contributor then makes performance claims, or offers
warranties related to Product X, those performance claims and warranties are
such Commercial Contributor's responsibility alone. Under this section, the
Commercial Contributor would have to defend claims against the other
Contributors related to those performance claims and warranties, and if a
court requires any other Contributor to pay any damages as a result, the
Commercial Contributor must pay those damages.

5. NO WARRANTY

EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON AN
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR
IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE,
NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Each
Recipient is solely responsible for determining the appropriateness of using
and distributing the Program and assumes all risks associated with its
exercise of rights under this Agreement , including but not limited to the
risks and costs of program errors, compliance with applicable laws, damage to
or loss of data, programs or equipment, and unavailability or interruption of
operations.

6. DISCLAIMER OF LIABILITY

EXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY
CONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION
LOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE
EXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY
OF SUCH DAMAGES.

7. GENERAL

If any provision of this Agreement is invalid or unenforceable under
applicable law, it shall not affect the validity or enforceability of the
remainder of the terms of this Agreement, and without further action by the
parties hereto, such provision shall be reformed to the minimum extent
necessary to make such provision valid and enforceable.

If Recipient institutes patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Program itself
(excluding combinations of the Program with other software or hardware)
infringes such Recipient's patent(s), then such Recipient's rights granted
under Section 2(b) shall terminate as of the date such litigation is filed.

All Recipient's rights under this Agreement shall terminate if it fails to
comply with any of the material terms or conditions of this Agreement and does
not cure such failure in a reasonable period of time after becoming aware of
such noncompliance. If all Recipient's rights under this Agreement terminate,
Recipient agrees to cease use and distribution of the Program as soon as
reasonably practicable. However, Recipient's obligations under this Agreement
and any licenses granted by Recipient relating to the Program shall continue
and survive.

Everyone is permitted to copy and distribute copies of this Agreement, but in
order to avoid inconsistency the Agreement is copyrighted and may only be
modified in the following manner. The Agreement Steward reserves the right to
publish new versions (including revisions) of this Agreement from time to
time. No one other than the Agreement Steward has the right to modify this
Agreement. The Eclipse Foundation is the initial Agreement Steward. The
Eclipse Foundation may assign the responsibility to serve as the Agreement
Steward to a suitable separate entity. Each new version of the Agreement will
be given a distinguishing version number. The Program (including
Contributions) may always be distributed subject to the version of the
Agreement under which it was received. In addition, after a new version of the
Agreement is published, Contributor may elect to distribute the Program
(including its Contributions) under the new version. Except as expressly
stated in Sections 2(a) and 2(b) above, Recipient receives no rights or
licenses to the intellectual property of any Contributor under this Agreement,
whether expressly, by implication, estoppel or otherwise. All rights in the
Program not expressly granted under this Agreement are reserved.

This Agreement is governed by the laws of the State of New York and the
intellectual property laws of the United States of America. No party to this
Agreement will bring a legal action under this Agreement more than one year
after the cause of action arose. Each party waives its rights to a jury trial in
any resulting litigation.

================================================
FILE: README.md
================================================
Mesh
====

A Responsive Grid & Web Typography toolkit for Clojure & Clojurescript. 

Built on [Garden](https://github.com/noprompt/garden).

## Rationale

> Web Design is 95% Typography - iA

## Features

My current priority is to build a Clojurescript interface to [CSS
Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), [CSS
Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
specs in the context of Typography and Graphic Design.

Early research includes expressing:

- A grid in a single fn
- Available grids: columnar, container-row-column, fluid-nested-grid, golden-grid
- Baseline Grid in a single fn
- Modular Scale in a single fn
- Viewport Math in a single fn
- Baseline Typography
- Typography mixins, and responsive utilities with gardener.
- Create new DSLs

## Quickstart

Early prototypes:

**A simple 8-column grid** with `col-x` classes:

```clojure
(grid/create-minimal-grid ".grid" (px 20))
```

**Fluid, Fractional grids**

```clojure
(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:

```clojure
(grid/create-nested-units)
```

**Baseline Typpography**

```clojure
(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.

```clojure
(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."

```clojure
;; 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

Examples include example designs with [Om](https://github.com/omcljs/om) and soon Reagent.

Run `examples` with the current mesh src, using figwheel:

	lein dev

- typography: showcase of all grids with Clj (compile to css)
- grids: showcase of all grids with Clj (compile to css)

## Clojure or Clojurescript?

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_:

```clojure
(ns app.styles
  (:require [garden.core :refer [css]]))

(def index
  (css grids)))

(mesh.utils/insert-styles styles/index)
```

Invoke styles via plain old **Javascript**:

```javascript
mesh.dom.insert_styles(app.styles.index)
```

You don't need complex build tools like [Webpack](http://webpack.github.io) in
Clojurescript. Just Convert CSS into data and pass them around as code.

## Credits

Joel Holbrooks for creating Garden, Chris Coyler for countless
[CSS-Tricks](https://css-tricks.com).

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.

## References

- [Clojure/West Presentation](https://www.youtube.com/watch?v=-jnJGNDoSXc)
- [LispCast Interview](http://www.lispcast.com/pre-west-priyatam-mudivarti)
- [Grid Systems in Graphic Design](http://www.amazon.com/Grid-Systems-Graphic-Design-Communication/dp/3721201450)
by Josef Müller-Brockmann is a classic
- [Thinking grids](https://github.com/priyatam/thinking-grids) is my reference to
explore grid libraries in Sass, Less, and Stylus.
- [Don’t overthink it](https://css-tricks.com/dont-overthink-it-grids/) by Chris Coyler
- [Baseline Grids](http://alistapart.com/article/settingtypeontheweb)
- [Fluid Grids](http://alistapart.com/article/fluidgrids)
- [OOCS](http://oocss.org/grids_docs.html)
- [The magic of Bootstrap Grids](http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works)
- [Understanding Susy's Grids](http://www.zell-weekeat.com/susy2-tutorial)
- [Golden Grid System](http://goldengridsystem.com)
- [Gridism](http://cobyism.com/gridism/)
- [Lost](https://github.com/corysimmons/lost) 

## Contributing

Mesh is currently in the development phase. I will be open to contributions
during Alpha.

## Status

Development.

[![Clojars Project](http://clojars.org/facjure/mesh/latest-version.svg)](http://clojars.org/facjure/mesh)

## License

Copyright © 2015-2019 Facjure, LLC.

Released under the Eclipse Public License, same as Clojure & Clojurescript.


================================================
FILE: dev/repl.cljs
================================================
(ns repl
  (:require-macros
   [figwheel.client.utils :refer [enable-dev-blocks!]])
  (:require [examples.typography.page :as typo]
            [examples.grids.page :as grids]
            [figwheel.client :as fw]))

(enable-console-print!)
(enable-dev-blocks!)

(print "Starting Figwheel Cljs Repl ... ")

(fw/start
 {:websocket-url "ws://localhost:3449/figwheel-ws"
  :on-jsload (fn []
               (print "Figwheel ... js loaded "))
  :load-warninged-code true})


================================================
FILE: examples/grids/page.cljs
================================================
(ns examples.grids.page
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]
            [sablono.core :as html :refer-macros [html]]))

(enable-console-print!)

(defn view [grid-component]
  [:section {:class "demo"}
   (grid-component)])

;; TODO Refactor
(defn fluid-grids []
  [:div
   [:h2 {:class "grid-title"} "Fluid/Fractional Grids"]
   [:div {:class "grid"}
    [:div {:class "unit whole"}
     [:pre ".whole"]]]
   [:div {:class "grid"}
    [:div {:class "unit half"}
     [:pre ".half"]]
    [:div {:class "unit half"}
     [:pre ".half"]]]
   [:div {:class "grid"}
    [:div {:class "unit one-third"}
     [:pre ".one third"]]
    [:div {:class "unit two-thirds"}
     [:pre ".two thirds"]]]
   [:div {:class "grid"}
    [:div {:class "unit one-quarter"}
     [:pre ".one-quarter"]]
    [:div {:class "unit three-quarters"}
     [:pre ".three-quarters"]]]
   [:div {:class "grid"}
    [:div {:class "unit one-fifth"}
     [:pre ".one-fifth"]]
    [:div {:class "unit four-fifths"}
     [:pre ".four-fifths"]]]
   [:div {:class "grid"}
    [:div {:class "unit two-fifths"}
     [:pre ".two-fifths"]]
    [:div {:class "unit three-fifths"}
     [:pre ".three-fifths"]]]
   [:div {:class "grid"}
    [:div {:class "unit golden-large"}
     [:pre ".golden-large"]]
    [:div {:class "unit golden-small"}
     [:pre ".golden-small"]]]])

;; TODO Refactor
(defn nested-grids []
  [:div
   [:div {:class "grid"}
    [:div {:class "unit one-quarter align-right center-on-mobile"}
     [:h2 "Nested Grids"]
     [:p "Nested Grids also work, but markup gets crazy pretty soon!"]]
    [:div {:class "unit three-quarters"}
     [:div {:class "grid"}
      [:div {:class "unit whole"}
       [:p {:class "align-center"} "Nesting!"]]]
     [:div {:class "grid"}
      [:div {:class "unit one-third"}
       [:pre "***"]]
      [:div {:class "unit two-thirds"}
       [:div {:class "grid"}
        [:div {:class "unit whole"}
         [:p {:class "align-center"} "Nesting!"]]]
       [:div {:class "grid"}
        [:div {:class "unit two-fifths"}
         [:pre "***"]]
        [:div {:class "unit three-fifths"}
         [:pre "***"]]]]]
     [:div {:class "grid"}
      [:div {:class "unit four-fifths"}
       [:div {:class "grid"}
        [:div {:class "unit whole"}
         [:p {:class "align-center"} "Gridception!"]]]
       [:div {:class "grid"}
        [:div {:class "unit one-quarter"}
         [:pre "***"]]

        [:div {:class "unit one-quarter"}
         [:pre "***"]]
        [:div {:class "unit one-quarter"}
         [:pre "***"]]
        [:div {:class "unit one-quarter"}
         [:pre "***"]]]]
      [:div {:class "unit one-fifth"} "***"]]]]])

(defn fluid-widget [data owner]
  (reify
    om/IWillMount
    (will-mount [_]
      (println "Fluid widget mounting"))
    om/IRenderState
    (render-state [_ {:keys [count]}]
      (println "Render!")
      (html (view fluid-grids)))))

(defn nested-widget [data owner]
  (reify
    om/IWillMount
    (will-mount [_]
      (println "Nested widget mounting"))
    om/IRenderState
    (render-state [_ {:keys [count]}]
      (println "Render!")
      (html (view nested-grids)))))

(defn empty-widget [data owner]
  (reify
    om/IRenderState
    (render-state [_ {:keys [count]}]
      (println "Unmounting!")
      (html [:div ""]))))

(defn mount
  ([widget id]
   (mount widget id nil))
  ([widget id style]
   (om/root
    widget
    app-state
    {:target (.getElementById js/document id)})))

(defn unmount [id]
  (om/root
   empty-widget
   app-state
   {:target (.getElementById js/document id)}))

(mount fluid-widget "fluid")
(mount nested-widget "nested")

#_(unmount "fluid")


================================================
FILE: examples/grids/styles.clj
================================================
(ns grids.styles
  (:refer-clojure :exclude [+ - * /])
  (:require [garden.def :refer [defstyles defrule defkeyframes]]
            [garden.core :refer [css]]
            [garden.units :as u :refer [px pt em]]
            [garden.color :as color :refer [hsl rgb]]
            [garden.arithmetic :refer [+ - * /]]
            [facjure.mesh.media :as respond :refer [breakpoints]]
            [facjure.mesh.core :as mesh]
            [facjure.mesh.typography :as typo :refer [typeset vr-block scale-type make-serifs]]
            [facjure.mesh.grid :as grid]))

(def gutter (px 20))

(def alegreya ["Alegreya" "Baskerville" "Georgia" "Times" "serif"])
(def sans ["\"Open Sans\"" "Avenir" "Helvetica" "sans-serif"])
(def mono ["Inconsolata" "Menlo" "Courier" "monospace"])

(defstyles printer
  #_(typeset serif
             (:optima typo/font-families)
             (:sourcecode-pro typo/font-families))
  (typo/typeset-html typo/defaults :golden))

(defstyles reset
  mesh/reset-common-selectors)
#_(typo/baseline-overlay (:cadetblue color/color-name->hex) 0)

(defstyles grids
  mesh/alignments
  (grid/create ".grid" gutter)
  (grid/wrap-widths 978)
  (grid/create-nested-units)
  (grid/nuke-gutters-and-padding)
  (grid/media-small (:mobile breakpoints) gutter)
  (grid/media-medium (:tablet breakpoints)))

(def bp
  (let [grid-title (defrule grid-title :.grid-title)]
    (respond/iphone-5
     (grid-title {:font-size 10}))))

(def index
  (merge grids printer bp reset))


================================================
FILE: examples/typography/page.cljs
================================================
(ns examples.typography.page
  (:refer-clojure :exclude [+ - * /])
  (:require  [om.core :as om :include-macros true]
             [om.dom :as dom :include-macros true]
             [sablono.core :as html :refer-macros [html]]))

(enable-console-print!)

(defonce app-state
  (atom {:msg "The quick brown fox jumps over the lazy dog"}))

(defn component [data owner]
  (reify
    om/IRenderState
    (render-state [_ {:keys [msg]}]
      (html
       [:section {:class "home"}
        [:h2 "Typographic Scales"]
        [:h1 (:msg data)]
        [:h2 (:msg data)]
        [:h3 (:msg data)]
        [:h4 (:msg data)]
        [:h5 (:msg data)]
        [:h6 (:msg data)]
        [:p.large (:msg data)]
        [:p.medium (:msg data)]
        [:p.small (:msg data)]]))))

(defn mount [widget id]
  (om/root
   widget
   app-state
   {:target (.getElementById js/document id)}))

(mount component "typography")


================================================
FILE: examples/typography/styles.clj
================================================
(ns typography.styles
  (:refer-clojure :exclude [+ - * /])
  (:require [garden.def :refer [defstyles defrule]]
            [garden.core :refer [css]]
            [garden.units :as u :refer [px pt em]]
            [garden.arithmetic :refer [+ - * /]]
            [facjure.mesh.media :as respond]
            [facjure.mesh.typography :as typo :refer [typeset vr-block scales scale-type make-serifs]]
            [facjure.mesh.grid :as grid]))

(def alegreya ["Alegreya" "Baskerville" "Georgia" "Times" "serif"])
(def sans ["\"Open Sans\"" "Avenir" "Helvetica" "sans-serif"])
(def mono ["Inconsolata" "Menlo" "Courier" "monospace"])

(defstyles fonts
  (typeset alegreya sans mono))

(defrule homepage :section.home)
(defrule body :body)
(defrule h1 :h1)
(defrule h2 :h2)
(defrule h3 :h3)
(defrule h4 :h4)
(defrule h5 :h5)
(defrule h6 :h6)
(defrule small :p.small)
(defrule medium :p.medium)
(defrule large :p.large)

(def ms
  (let [f (typo/modular-scale-fn 16 (:golden scales))]
    (fn [n]
      (px (f n)))))

(defstyles typography
  (body
   {:font-family alegreya})

  (homepage
   (h1
     (respond/tablet
      {:padding  [[0 (ms 2)]]
       :font-size (ms 5)
       :line-height (ms 5)})
     (respond/iphone-5
      {:padding  [[0 (ms 2)]]
       :font-size (ms 5)
       :line-height (ms 5)}))

   (h2
     (respond/tablet
      {:padding  [[0 (ms 1)]]
       :font-size (ms 4)
       :line-height (ms 4)}))

   (h3
     (respond/tablet
      {:padding  [[0 (ms 1)]]
       :font-size (ms 3)
       :line-height (ms 3)}))

   (h4
     (respond/tablet
      {:padding  [[0 (ms 1)]]
       :font-size (ms 2)
       :line-height (ms 2)}))

   (h5
     (respond/tablet
      {:padding  [[0 (ms 1)]]
       :font-size (ms 1)
       :line-height (ms 1)}))

   (h6
     (respond/desktop
      {:padding  [[0 (ms 1)]]
       :font-size (ms 0)
       :line-height (ms 0)}))

   (large
     (respond/tablet
      {:padding  [[0 (ms 1)]]
       :font-size (ms -1)
       :line-height (ms -1)}))

   (medium
     (respond/tablet
      {:padding  [[0 (ms 1)]]
       :font-size (ms -2)
       :line-height (ms -2)}))

   (small
     (respond/tablet
      {:padding  [[0 (ms 1)]]
       :font-size (ms -3)
       :line-height (ms -3)}))))

(defstyles typesettings
  typography)

(def index
  typesettings)


================================================
FILE: project.clj
================================================
(defproject facjure/mesh "0.6.0"
  :description "A toolkit for responsive grids and web typography"
  :url "https://github.com/facjure/mesh"
  :license {:name "Eclipse Public License"
            :url "http://www.eclipse.org/legal/epl-v10.html"}
  :scm {:name "git" :url "https://github.com/facjure/mesh"}
  :min-lein-version "2.8.1"
  :global-vars {*warn-on-reflection* false *assert* false}
  :dependencies [[org.clojure/clojure "1.10.0" :scope "provided"]
                 [org.clojure/clojurescript "1.10.439" :scope "provided"]
                 [com.gfredericks/cljs-numbers "0.1.2"]
                 [garden "1.3.6"]]
  :node-dependencies [[autoprefixer "9.4.3"]
                      [css-min "0.4.3"]]
  :source-paths ["src" "target/classes"]
  :clean-targets ^{:protect false} ["resources/public/js" "target/classes"]
  :cljsbuild {:builds
              [{:id "dev"
                :source-paths ["examples" "dev"]
                :compiler {:main repl
                           :output-to "resources/public/js/mesh.js"
                           :output-dir "resources/public/js/out"
                           :asset-path "js/out"
                           :optimizations :none
                           :source-map-timestamp true
                           :install-deps true
                           :npm-deps {:create-react-class "15.6.0"}
                           :preloads [devtools.preload]}
                 :figwheel {}}
               {:id "prod"
                        :source-paths ["src"]
                        :compiler {:output-to "dist/mesh.min.js"
                                   :optimizations :advanced
                                   :pretty-print false}}]}
  :garden {:builds
           [{:id "typography"
             :source-paths [x"examples"]
             :stylesheet typography.styles/index
             :compiler {:output-to "resources/public/css/typography.css"
                        :pretty-print true}}
            {:id "grids"
             :source-paths ["src" "examples"]
             :stylesheet grids.styles/index
             :compiler {:output-to "resources/public/css/grids.css"
                        :pretty-print true}}]}

  :plugins [[lein-cljsbuild "1.1.7"]
            [lein-figwheel "0.5.16"]
            [lein-garden "0.2.8"]
            [lein-npm "0.6.2"]
            [lein-pdo "0.1.1"]
            [lein-doo "0.1.9"]]

  :repl-options {:nrepl-middleware [cider.piggieback/wrap-cljs-repl]}

  :profiles {:dev
             {:dependencies [[cider/piggieback "0.3.10" :exclude [org.clojure/tools.nrepl]]
                             [binaryage/devtools "0.9.9"]
                             [figwheel-sidecar "0.5.16"]
                             [sablono "0.3.4"]
                             [org.omcljs/om "0.9.0"]]
              :figwheel {:http-server-root "public"
                         :server-port 3449
                         :nrepl-port 7888
                         :css-dirs ["resources/public/css"]
                         }}}
  :aliases {"init"  ["pdo" "clean," "garden" "clean"]
            "dev" ["pdo" "garden" "auto," "figwheel"]
            "release" ["pdo" "clean," "cljsbuild" "once" "prod"]})


================================================
FILE: resources/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Mesh Demos </title>

    <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Alegreya:400,400i/Open+Sans:400,700/Inconsolata:500">

    <!-- Uncomment to insert static or serverside compiled styles -->
    <link rel="stylesheet" type="text/css" href="/css/grids.css" />
    <link rel="stylesheet" type="text/css" href="/css/typography.css" />

  </head>
  <body>
    <!-- Inject Components -->
	<h1> Grid examples </h1>
	
    <div id="simple"> </div>
    <div id="fluid"> </div>
    <div id="nested"> </div>
    <div id="baseline"> </div>

	<h1> Typography examples</h1>
	<div id="typography"> </div>

    <script src="/js/mesh.js" type="text/javascript"></script>
  </body>
</html>


================================================
FILE: src/facjure/mesh/core.cljc
================================================
(ns facjure.mesh.core
  (:require [garden.core :refer [css]]))

;; Resets -----

(defn clearfix [clazz]
  [clazz {:*zoom 1}
   [:&:before :&:after {:display "table"
                        :content " "
                        :line-height 0}]
   [:&:after {:clear "both"}]])

(def reset-common-selectors
  [:h1 :h2 :h3 :h4 :h5 :h6
   :p :blockquote :pre
   :dl :dt :dd :ol :ul :li
   :fieldset :form :label :legend
   :th :td
   :artcle :section :aside :figure :footer :header
   :hgroup :menu :nav :section
   {:margin 0
    :padding 0
    :border 0}])

(def reset-padding
  {:padding "0 !important"})

(def alignments
  [[:.align-center {:text-align "center"}]
   [:.align-left {:text-align "left"}]
   [:.align-right {:text-align "right"}]
   [:.pull-left {:float "left"}]
   [:.pull-right {:float "right"}]])

(def border-box
  {:box-sizing "border-box"})

(def content-box
  {:box-sizing "content-box"})


;; Math ------

#?(:cljs
   (defn viewport-w []
     (.. js/document -documentElement -clientWidth)))

#?(:cljs
   (defn viewport-h []
     (.. js/document -documentElement -clientHeight)))

#?(:clj
   (defn pow [base e]
     (.pow Math base e)))

#?(:cljs
   (defn pow [base e]
     (.pow js/Math base e)))

(defn whole-number? [n]
    (= n (Math/floor n)))


;; Dom -----

#?(:cljs
   (defn insert-styles [styles]
     "Inserts Stylesheet into document head"
     (let [el (.createElement js/document "style")
           node (.createTextNode js/document styles)]
       (.appendChild el node)
       (.appendChild (.-head js/document) el)
       el)))



================================================
FILE: src/facjure/mesh/grid.cljc
================================================
(ns facjure.mesh.grid
  (:refer-clojure :exclude [+ - * /])
  (:require [garden.core :refer [css]]
            [garden.units :as u :refer [px pt pc]]
            [garden.units :refer (px+ px* px- px-div em)]
            [garden.color :as color :refer [hsl rgb]]
            [garden.arithmetic :refer [+ - * /]]
            [garden.stylesheet :refer [at-media]]
            [facjure.mesh.media :as media]
            [facjure.mesh.core :refer [border-box clearfix reset-padding]]))

(defn initialize [clazz gutter]
  "Define a unit within grid with a gutter in px"
  [[clazz :.unit border-box]
   [clazz {:display "block"
           :clear "both"}
    [:.unit {:float "left"
             :width "100%"
             :padding (/ gutter 2)}
     [:&:first-child {:padding-left gutter}]
     [:&:last-child {:padding-right gutter}]]]])

;; A simple Grid, based on on 1,2,4,8 columns
;; https://css-tricks.com/dont-overthink-it-grids

(defn create-minimal-grid [clazz pad]
  [[:* {:box-sizing "border-box"}]
   [clazz {:background "white"
           :margin [[0 0 pad 0]]}
    [:&:after {:content ""
               :display "table"
               :clear "both"}]
    ["[class*='col-']" {:float "left"
                        :padding-right pad
                        }]
    [:.col-1-3 {:width "33.33%"}]
    [:.col-2-3 {:width "66.66%"}]
    [:.col-1-2 {:width "50.00%"}]
    [:.col-1-4 {:width "25.00%"}]
    [:.col-1-8 {:width "12.50%"}]
    [:.out-padding {:padding [[pad 0 pad pad pad]]}
     ["[class*='col-']:last-of-type" {:padding-right pad}]]]])

;; Fluid/Fractional Grids, with nesting

(defn create-nested-units []
  [:.unit
   [:.unit
    [:&:first-child {:padding-left 0}]
    [:&:last-child {:padding-right 0}]]
   [:.grid:first-child
    [:>
     [:.unit {:padding-top 0}]]]
   [:.grid:last-child
    [:>
     [:.unit {:padding-bottom 0}]]]])

(defn nuke-gutters-and-padding []
  [[:.unit.no-gutters reset-padding]
   [:.no-gutters
    [:.unit reset-padding]]])

(defn wrap-widths [width]
  [[:.wrap
    [:.grid {:max-width (px width)
             :margin "0 auto"}]]
   [:.grid.wrap
    {:max-width (px width)
     :margin "0 auto"}]])

(defn create-fractions [clazz]
  [[clazz
    [:.whole {:width "100%"}]]
   [clazz
    [:.half {:width "50%"}]]
   [clazz
    [:.one-third {:width "33.3332%"}]]
   [clazz
    [:.two-thirds {:width "66.6665%"}]]
   [clazz
    [:.one-fourth :.one-quarter {:width "25%"}]]
   [clazz
    [:.three-forths :.three-quarters {:width "75%"}]]
   [clazz
    [:.one-fifth {:width "20%"}]]
   [clazz
    [:.two-fifths {:width "40%"}]]
   [clazz
    [:.three-fifths {:width "60%"}]]
   [clazz
    [:.four-fifths {:width "80%"}]]
   [clazz
    [:.golden-small {:width "38.2716%"}]]
   [clazz
    [:.golden-large {:width "61.7283%"}]]])

(defn create [clazz gutter]
  (list (clearfix clazz)
        (initialize clazz gutter)
        (create-fractions clazz)))

(defn media-small [width gutter]
  (at-media {:screen true :max-width width}
            [".grid:not(.no-stacking-on-mobiles)"
             [:>
              [:.unit {:width "100% !important"
                       :padding-left gutter
                       :padding-right gutter}]]]
            [:.unit
             [:.grid
              [:.unit {:padding-left (px 0)
                       :padding-right (px 0)}]]]
            [:.center-on-mobiles {:text-align "center !important"}]
            [:.hide-on-mobiles {:display "none !important"}]))

(defn media-medium [width]
  (at-media {:screen true :min-width width}
            [:.wider
             [:.grid {:max-width width
                      :margin "0 auto"}]]))

;; Bootstrap-style Container=>Row=>Column Grids with 15px margins, and % offsets

(def container
  (list
   [:& clearfix]
   (media/mobile)
   (media/phablet)
   (media/tablet)
   (media/desktop)
   (media/hd)))

(defn offset [n]
  (let [m (min (max 0 n) 12)]
    [:&
     {:margin-left (pc (* 100 (/ n 12.0)))}]))

(defn col [n]
  (let [m (min (max 0 n) 12)]
    [:&
     {:float :left
      :position :relative
      :min-height (px 1)
      :padding-left (px 15)
      :padding-right (px 15)
      :width (pc (* 100 (/ m 12.0)))}]))

(def row
  [:&
   {:margin-right (px -15)
    :margin-left (px -15)}
   clearfix])

(defn block [& {:as opts}]
  [:&
   (when-let [c (:col opts)]
     (col c))
   (when-let [o (:offset opts)]
     (offset o))])


================================================
FILE: src/facjure/mesh/macros.clj
================================================
(ns facjure.mesh.macros
  (:require [garden.types]
            [garden.core]
            [garden.stylesheet :refer [at-media]])
  (:import garden.types.CSSFunction
           garden.types.CSSAtRule))

(defmacro defbreakpoint [name media-params]
  `(defn ~name [& rules#]
     (at-media ~media-params
       [:& rules#])))


================================================
FILE: src/facjure/mesh/media.cljc
================================================
(ns facjure.mesh.media
  (:refer-clojure :exclude [+ - * / rem])
  #?(:cljs
     (:require-macros [facjure.mesh.macros :refer [defbreakpoint]]))
  #?(:clj
     (:require [facjure.mesh.macros :refer [defbreakpoint]]))
  (:require [garden.core :refer [css]]
            [garden.units :as units :refer (px pt em rem dpi)]
            [garden.color :as color :refer [hsl rgb]]
            [garden.arithmetic :refer [+ - * /]]
            [garden.stylesheet :refer [at-media]]))

;; Generic

(def breakpoints
  {:mobile (px 320)
   :tablet (px 768)
   :laptop (px 1024)
   :desktop (px 1440)})

(defbreakpoint mobile
  {:screen true
   :min-width (px 320)})

(defbreakpoint phablet
  {:screen true
   :min-width (px 481)})

(defbreakpoint tablet
  {:screen true
   :min-width (px 768)
   :max-width (px 1023)})

(defbreakpoint laptop
  {:screen true
   :min-width (px 1024)
   :max-width (px 1439)})

(defbreakpoint desktop
  {:screen true
   :min-width (px 1440)})

(defbreakpoint hd
  {:screen true
   :min-width (px 1824)})

;; IPhones (3, 4, 4s, 5, 5s, 6)

(def iphone-3-4-media-params
  {:screen true
   :min-device-width (px 320)
   :max-device-width (px 480)
   :-webkit-min-device-pixel-ratio 2})

(defbreakpoint iphone-3-4
  iphone-3-4-media-params)

(defbreakpoint iphone-3-4-landscape
  (assoc iphone-3-4-media-params :orientation :landscape))

(defbreakpoint iphone-3-4-portrait
  (assoc iphone-3-4-media-params :orientation :portrait))

(def iphone-5-media-params
  {:screen true
   :min-device-width (px 320)
   :max-device-width (px 568)
   :-webkit-min-device-pixel-ratio 2})

(defbreakpoint iphone-5
  iphone-5-media-params)

(defbreakpoint iphone-5-landscape
  (assoc iphone-5-media-params :orientation :landscape))

(defbreakpoint iphone-5-portrait
  (assoc iphone-5-media-params :orientation :portrait))

(def iphone-6-media-params
  {:screen true
   :min-device-width (px 375)
   :max-device-width (px 667)
   :-webkit-min-device-pixel-ratio 2})

(defbreakpoint iphone-6
  iphone-6-media-params)

(defbreakpoint iphone-6-landscape
  (assoc iphone-6-media-params :orientation :landscape))

(defbreakpoint iphone-6-portrait
  (assoc iphone-6-media-params :orientation :portrait))

;; Galaxy Phones

(def galaxy-s3-media-params
  {:screen true
   :min-device-width (px 320)
   :max-device-width (px 640)
   :-webkit-min-device-pixel-ratio 2})

(defbreakpoint galaxy-s3
  galaxy-s3-media-params)

(defbreakpoint galaxy-s3-landscape
  (assoc galaxy-s3-media-params :orientation :landscape))

(defbreakpoint galaxy-s3-portrait
  (assoc galaxy-s3-media-params :orientation :portrait))

(def galaxy-s4-media-params
  {:screen true
   :min-device-width (px 320)
   :max-device-width (px 640)
   :-webkit-min-device-pixel-ratio 3})

(defbreakpoint galaxy-s4
  galaxy-s4-media-params)

(defbreakpoint galaxy-s4-landscape
  (assoc galaxy-s4-media-params :orientation :landscape))

(defbreakpoint galaxy-s4-portrait
  (assoc galaxy-s4-media-params :orientation :portrait))

(def galaxy-s5-media-params
  {:screen true
   :min-device-width (px 360)
   :max-device-width (px 640)
   :-webkit-min-device-pixel-ratio 3})

(defbreakpoint galaxy-s5
  galaxy-s5-media-params)

(defbreakpoint galaxy-s5-landscape
  (assoc galaxy-s5-media-params :orientation :landscape))

(defbreakpoint galaxy-s5-portrait
  (assoc galaxy-s5-media-params :orientation :portrait))

;; HTC One

(def htc-one galaxy-s5)
(def htc-one-landscape galaxy-s5-landscape)
(def htc-one-portrait galaxy-s5-portrait)

;; IPads

(def ipad-1-2-media-params
  {:screen true
   :min-device-width (px 768)
   :max-device-width (px 1024)
   :-webkit-min-device-pixel-ratio 1})

(defbreakpoint ipad-1-2
  ipad-1-2-media-params)

(defbreakpoint ipad-1-2-landscape
  (assoc ipad-1-2-media-params :orientation :landscape))

(defbreakpoint ipad-1-2-portrait
  (assoc ipad-1-2-media-params :orientation :portrait))

(def ipad-mini ipad-1-2)
(def ipad-mini-landscape ipad-1-2-landscape)
(def ipad-mini-portrait ipad-1-2-portrait)

(def ipad-3-4-media-params
  {:screen true
   :min-device-width (px 768)
   :max-device-width (px 1024)
   :-webkit-min-device-pixel-ratio 2})

(defbreakpoint ipad-3-4
  ipad-3-4-media-params)

(defbreakpoint ipad-3-4-landscape
  (assoc ipad-3-4-media-params :orientation :landscape))

(defbreakpoint ipad-3-4-portrait
  (assoc ipad-3-4-media-params :orientation :portrait))

;; Galaxy Tablets

(def galaxy-tab-media-params
  {:min-device-width (px 800)
   :max-device-width (px 1280)})

(defbreakpoint galaxy-tab
  galaxy-tab-media-params)

(defbreakpoint galaxy-tab-landscape
  (assoc galaxy-tab-media-params :orientation :landscape))

(defbreakpoint galaxy-tab-portrait
  (assoc galaxy-tab-media-params :orientation :portrait))

;; Nexus Tablets

(def nexus-tab-media-params
  {:screen true
   :min-device-width (px 601)
   :max-device-width (px 906)
   :-webkit-min-device-pixel-ratio 1.331
   :-webkit-max-device-pixel-ratio 1.332})

(defbreakpoint nexus-tab
  nexus-tab-media-params)

(defbreakpoint nexus-tab-landscape
  (assoc nexus-tab-media-params :orientation :landscape))

(defbreakpoint nexus-tab-portrait
  (assoc nexus-tab-media-params :orientation :portrait))

;; Kindle Fire Crap

(def kindle-fire-media-params
  {:screen true
   :min-device-width (px 800)
   :max-device-width (px 1280)
   :-webkit-min-device-pixel-ratio 1.5})

(defbreakpoint kindle-fire
  kindle-fire-media-params)

(defbreakpoint kindle-fire-landscape
  (assoc kindle-fire-media-params :orientation :landscape))

(defbreakpoint kindle-fire-portrait
  (assoc kindle-fire-media-params :orientation :portrait))

;; Kindle Fire HD Crap

(def kindle-fire-hd-media-params
  {:screen true
   :min-device-width (px 1200)
   :max-device-width (px 1600)
   :-webkit-min-device-pixel-ratio 1.5})

(defbreakpoint kindle-fire-hd
  kindle-fire-hd-media-params)

(defbreakpoint kindle-fire-hd-landscape
  (assoc kindle-fire-hd-media-params :orientation :landscape))

(defbreakpoint kindle-fire-hd-portrait
  (assoc kindle-fire-hd-media-params :orientation :portrait))

;; Laptops

(defbreakpoint non-retina-laptops
  {:screen true
   :min-device-width (px 1200)
   :max-device-width (px 1600)
   :-webkit-min-device-pixel-ratio 1})

(defbreakpoint retina-laptops
  {:screen true
   :min-device-width (px 1200)
   :max-device-width (px 1600)
   :-webkit-min-device-pixel-ratio 2
   :min-resolution (dpi 192)})


================================================
FILE: src/facjure/mesh/typography.cljc
================================================
(ns facjure.mesh.typography
  (:refer-clojure :exclude [+ - * / rem])
  (:require  [garden.compiler :refer [render-css]]
             [garden.core :refer [css]]
             [garden.units :as units :refer (px pt pc em rem vw)]
             [garden.arithmetic :refer [+ - * /]]
             [garden.stylesheet :refer [at-media]]
             [facjure.mesh.media :as media]
             #?(:cljs
                [cljs-numbers.core :refer [ratio? double? zero? pos? neg?]])
             #?(:clj
                [facjure.mesh.core :as core :refer [pow whole-number?]])
             #?@(:cljs
                 [[facjure.mesh.core :as core :refer [pow viewport-w]]])))

(def font-families
  {:garamond ["\"EB Garamond\"" "Baskerville" "Georgia" "Times" "serif"]
   :optima ["\"Optima\"" "Segoe" "Calibri" "Arial" "sans-serif"]
   :firasans ["\"Fira Sans\"" "Calibri" "Arial" "sans-serif"]
   :sourcecode-pro ["\"Source Code Pro\"" "monospace"]})

(def scales
  {:minor-second (/ 16 15)
   :major-second (/ 9 8)
   :minor-third  (/ 6 5)
   :major-third  (/ 5 4)
   :perfect-fourth (/ 4 3)
   :aug-fourth (/ 1.411 1)
   :perfect-fifth (/ 3 2)
   :minor-sixth (/ 8 5)
   :golden (/ 1.61803 1)
   :major-sixth (/ 5 3)
   :minor-seventh (/ 16 9)
   :major-seventh (/ 15 8)
   :octave (/ 2 1)
   :major-tenth (/ 5 2)
   :major-eleventh (/ 8 3)
   :major-twelfth (/ 3 1)
   :double-octave (/ 4 1)})

(def defaults
  {:line-height-ratio 1.5
   :header-ratio (:golden scales)
   :min-width (px 480)
   :max-width (px 960)
   :vertical-rythm true
   :min-font (px 12)
   :max-font (px 28)
   :body-color "#666"
   :body-font (:garamond font-families)
   :body-font-weight 400
   :header-font (:garamond font-families)
   :header-font-weight 600
   :header-color "#111"})

(defn font [family size weight kerning leading & options]
  {:font-family family
   :font-size (rem size)
   :font-weight weight
   :letter-spacing (rem kerning)
   :line-height (em leading)
   :text-align "left"
   :text-transform (get options :text-transform "none")})

(defn zoomable-baseline-grid
  "Creates a baseline grid typography with a base body
   copy and five type scales, with a default 16px. All
   sizes are calculated in ems"
  [base-fsize base-lead]
  (let [base-fem (/ base-fsize 16)
        base-lem (/ base-lead 16)
        settings (fn [f l]
                   {:font-size (em f)
                    :line-height (em l)})]
    [[:body ;; 16px/24px
      (settings (/ base-fsize 16)
                (/ base-lead base-fsize))]
     [:.baseline-small  ;; 13px/18px
      (settings (* base-fsize 0.8125)
                (/ (* base-lead 0.75) (* base-fsize 0.8125)))]
     [:.baseline-medium :h3  ;; 16px/24px
      (settings base-fem base-lem)]
     [:.baseline-large :h1 :h2 ;; 26/36px
      (settings (/ 26 16) (/ (* base-lead 1.5) 26))]
     [:.baseline-xl ;; 42/48px
      (settings (/ 42 16) (/ (* base-lead 2) 42))]
     [:.baseline-xxl ;; 68/72px
      (settings (/ 68 16) (/ (* base-lead 3) 68))]]))

(defn baseline-overlay [color offset]
  ;; TODO: implement a real func in Garden
  (let [linear-gradient (str "linear-gradient(to top, " color " 5%, white 5%)")]
    [:body {:background-position [[0 (px offset)]]
            :background-size [["100%" (em (:line-height-ratio defaults))]]
            :background linear-gradient}]))

;; http://madebymike.com.au/writing/precise-control-responsive-typography/
;; calc(a + (b - x) * ((100vw - d) / (e - f))

#?(:cljs
   (defn calc [min-font max-font min-width max-width]
     (println "Viewport size:" (viewport-w))
     (let [font-diff (+ min-font (- max-font min-font))
           vp-diff (- (px (viewport-w)) min-width)
           wid-diff (- max-width min-width)
           res (* font-diff (/ vp-diff wid-diff))]
       res)))

#?(:cljs
   (defn typeset-html [conf scale]
     [[:html {:font-family (:body-font conf)
              :font-weight (:body-font-weight conf)
              :color (:body-color conf)
              :line-height (em (:line-height-ratio conf))
              :font-size (:min-font conf)}]
      (at-media {:min-width (:tablet media/breakpoints)}
                [:html {:font-size (calc (:min-font conf)
                                         (:max-font conf)
                                         (:min-width conf)
                                         (:max-width conf))}])
      (at-media {:min-width (:laptop media/breakpoints)}
                [:html {:font-size (calc (:min-font conf)
                                         (:max-font conf)
                                         (:min-width conf)
                                         (:max-width conf))}])
      (at-media {:min-width (:max-width conf)}
                [:html {:font-size (:max-font conf)}])]))

#?(:clj
   (defn typeset-html [conf scale]
     [[:html {:font-family (:body-font conf)
              :font-weight (:body-font-weight conf)
              :color (:body-color conf)
              :line-height (em (:line-height-ratio conf))
              :font-size (:min-font conf)}]
      (at-media {:min-width (:min-width conf)}
                [:html {:font-size (* (scale scales) (:min-font conf))}])]))

(def reset
  {:margin 0
   :padding 0})

(defn block []
  {:margin-bottom (:line-height-ratio defaults)})

(defn vr-block [units offset]
  (let [a (* (:line-height-ratio defaults) (:max-font defaults))
        b (/ (:max-font defaults) 2)
        c (/ units 2)
        d (+ 1 (/ offset (:max-font defaults)))]
    (em (* c d (/ a b)))))

(defn typeset [serif sans mono]
  [[:body :p (font sans 1 300 0.1 1.5)]
   [:h1 (font serif 3 600 0.5 1.5)]
   [:h2 (font serif 3 400 0.5 1.5)]
   [:h3 (font serif 2 300 0.5 1.3)]
   [:h4 (font serif 1.5 300 0.3 1.3)]
   [:h5 :h6 (font mono 1.2 300 0.2 1.2)]
   [:header (font serif 4 700 0.3 1.2 "small-caps")]
   [:footer (font sans 1 100 0.3 1.2)]])

#?(:clj
   (defn modular-scale-fn [base ratio]
     (let [[up down] (if (ratio? ratio)
                       (if (< (denominator ratio)
                              (numerator ratio))
                         [* /]
                         [/ *])
                       (if (< 1 ratio)
                         [* /]
                         [/ *]))
           f (float ratio)
           us (iterate #(up % f) base)
           ds (iterate #(down % f) base)]
       (memoize
        (fn ms [n]
          (cond
            (< 0 n) (if (whole-number? n)
                      (nth us n)
                      (let [m (Math/floor (float n))
                            [a b] [(ms m) (ms (inc m))]]
                        (+ a (* (Math/abs (- a b))
                                (- n m)))))
            (< n 0) (if (whole-number? n)
                      (nth ds (Math/abs n))
                      (let [m (Math/floor (float n))
                            [a b] [(ms m) (ms (dec m))]]
                        (+ a (* (Math/abs (- a b))
                                (- n m)))))
            :else base))))))

;; Experimental DSL

(defn make-serifs [selector families]
  (fn [declarations]
    (let [styles (selector declarations)]
      (conj styles (font (:ff-sans families) 2 400 0.5 1.45)))))

(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 (* 2 (:min-font params))}])
            (at-media {:min-width (get-in params [:breakpoints :laptop])}
                      [:& {:font-size (* 2.5 (:min-font params))}])))))


(defn leading [selector lead]
  (fn [declarations]
    (let [styles (selector declarations)]
      (conj styles {:line-height (em lead)}))))


================================================
FILE: src/facjure/mesh.cljc
================================================
(ns facjure.mesh
  (:require [garden.compiler :as compiler]
            [garden.util :as util]
            [garden.types]
            [garden.color]
            [garden.selectors :as selectors])
  (:import (garden.types CSSUnit
                         CSSFunction
                         CSSAtRule)
           (garden.color CSSColor)
           (garden.selectors CSSSelector)))

(defmethod print-method CSSUnit [css-unit writer]
  (.write writer (compiler/render-css css-unit)))