[ { "path": ".gitignore", "content": "resources/public/img\nresources/public/js\nresources/public/css/**/*.css\n.lein-*\n.repl*\n.nrepl*\npom.xml\n*jar\n/lib/\n*.log\njs*\n/classes/\n/target/\n/node_modules\n/checkouts/\n.lein-deps-sum\n.lein-repl-history\n.lein-plugins/\n.lein-failures\n*jar\n/lib/\n/classes/\n/out/\n/target/\n.lein-deps-sum\n.lein-repl-history\n.lein-plugins/\n\n" }, { "path": "LICENSE", "content": "Eclipse Public License - v 1.0\n\nTHE ACCOMPANYING PROGRAM IS PROVIDED UNDER THE TERMS OF THIS ECLIPSE PUBLIC\nLICENSE (\"AGREEMENT\"). ANY USE, REPRODUCTION OR DISTRIBUTION OF THE PROGRAM\nCONSTITUTES RECIPIENT'S ACCEPTANCE OF THIS AGREEMENT.\n\n1. DEFINITIONS\n\n\"Contribution\" means:\n\na) in the case of the initial Contributor, the initial code and documentation\n distributed under this Agreement, and\nb) in the case of each subsequent Contributor:\n i) changes to the Program, and\n ii) additions to the Program;\n\n where such changes and/or additions to the Program originate from and are\n distributed by that particular Contributor. A Contribution 'originates'\n from a Contributor if it was added to the Program by such Contributor\n itself or anyone acting on such Contributor's behalf. Contributions do not\n include additions to the Program which: (i) are separate modules of\n software distributed in conjunction with the Program under their own\n license agreement, and (ii) are not derivative works of the Program.\n\n\"Contributor\" means any person or entity that distributes the Program.\n\n\"Licensed Patents\" mean patent claims licensable by a Contributor which are\nnecessarily infringed by the use or sale of its Contribution alone or when\ncombined with the Program.\n\n\"Program\" means the Contributions distributed in accordance with this\nAgreement.\n\n\"Recipient\" means anyone who receives the Program under this Agreement,\nincluding all Contributors.\n\n2. GRANT OF RIGHTS\n a) Subject to the terms of this Agreement, each Contributor hereby grants\n Recipient a non-exclusive, worldwide, royalty-free copyright license to\n reproduce, prepare derivative works of, publicly display, publicly\n perform, distribute and sublicense the Contribution of such Contributor,\n if any, and such derivative works, in source code and object code form.\n b) Subject to the terms of this Agreement, each Contributor hereby grants\n Recipient a non-exclusive, worldwide, royalty-free patent license under\n Licensed Patents to make, use, sell, offer to sell, import and otherwise\n transfer the Contribution of such Contributor, if any, in source code and\n object code form. This patent license shall apply to the combination of\n the Contribution and the Program if, at the time the Contribution is\n added by the Contributor, such addition of the Contribution causes such\n combination to be covered by the Licensed Patents. The patent license\n shall not apply to any other combinations which include the Contribution.\n No hardware per se is licensed hereunder.\n c) Recipient understands that although each Contributor grants the licenses\n to its Contributions set forth herein, no assurances are provided by any\n Contributor that the Program does not infringe the patent or other\n intellectual property rights of any other entity. Each Contributor\n disclaims any liability to Recipient for claims brought by any other\n entity based on infringement of intellectual property rights or\n otherwise. As a condition to exercising the rights and licenses granted\n hereunder, each Recipient hereby assumes sole responsibility to secure\n any other intellectual property rights needed, if any. For example, if a\n third party patent license is required to allow Recipient to distribute\n the Program, it is Recipient's responsibility to acquire that license\n before distributing the Program.\n d) Each Contributor represents that to its knowledge it has sufficient\n copyright rights in its Contribution, if any, to grant the copyright\n license set forth in this Agreement.\n\n3. REQUIREMENTS\n\nA Contributor may choose to distribute the Program in object code form under\nits own license agreement, provided that:\n\n a) it complies with the terms and conditions of this Agreement; and\n b) its license agreement:\n i) effectively disclaims on behalf of all Contributors all warranties\n and conditions, express and implied, including warranties or\n conditions of title and non-infringement, and implied warranties or\n conditions of merchantability and fitness for a particular purpose;\n ii) effectively excludes on behalf of all Contributors all liability for\n damages, including direct, indirect, special, incidental and\n consequential damages, such as lost profits;\n iii) states that any provisions which differ from this Agreement are\n offered by that Contributor alone and not by any other party; and\n iv) states that source code for the Program is available from such\n Contributor, and informs licensees how to obtain it in a reasonable\n manner on or through a medium customarily used for software exchange.\n\nWhen the Program is made available in source code form:\n\n a) it must be made available under this Agreement; and\n b) a copy of this Agreement must be included with each copy of the Program.\n Contributors may not remove or alter any copyright notices contained\n within the Program.\n\nEach Contributor must identify itself as the originator of its Contribution,\nif\nany, in a manner that reasonably allows subsequent Recipients to identify the\noriginator of the Contribution.\n\n4. COMMERCIAL DISTRIBUTION\n\nCommercial distributors of software may accept certain responsibilities with\nrespect to end users, business partners and the like. While this license is\nintended to facilitate the commercial use of the Program, the Contributor who\nincludes the Program in a commercial product offering should do so in a manner\nwhich does not create potential liability for other Contributors. Therefore,\nif a Contributor includes the Program in a commercial product offering, such\nContributor (\"Commercial Contributor\") hereby agrees to defend and indemnify\nevery other Contributor (\"Indemnified Contributor\") against any losses,\ndamages and costs (collectively \"Losses\") arising from claims, lawsuits and\nother legal actions brought by a third party against the Indemnified\nContributor to the extent caused by the acts or omissions of such Commercial\nContributor in connection with its distribution of the Program in a commercial\nproduct offering. The obligations in this section do not apply to any claims\nor Losses relating to any actual or alleged intellectual property\ninfringement. In order to qualify, an Indemnified Contributor must:\na) promptly notify the Commercial Contributor in writing of such claim, and\nb) allow the Commercial Contributor to control, and cooperate with the\nCommercial Contributor in, the defense and any related settlement\nnegotiations. The Indemnified Contributor may participate in any such claim at\nits own expense.\n\nFor example, a Contributor might include the Program in a commercial product\noffering, Product X. That Contributor is then a Commercial Contributor. If\nthat Commercial Contributor then makes performance claims, or offers\nwarranties related to Product X, those performance claims and warranties are\nsuch Commercial Contributor's responsibility alone. Under this section, the\nCommercial Contributor would have to defend claims against the other\nContributors related to those performance claims and warranties, and if a\ncourt requires any other Contributor to pay any damages as a result, the\nCommercial Contributor must pay those damages.\n\n5. NO WARRANTY\n\nEXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, THE PROGRAM IS PROVIDED ON AN\n\"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR\nIMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OR CONDITIONS OF TITLE,\nNON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Each\nRecipient is solely responsible for determining the appropriateness of using\nand distributing the Program and assumes all risks associated with its\nexercise of rights under this Agreement , including but not limited to the\nrisks and costs of program errors, compliance with applicable laws, damage to\nor loss of data, programs or equipment, and unavailability or interruption of\noperations.\n\n6. DISCLAIMER OF LIABILITY\n\nEXCEPT AS EXPRESSLY SET FORTH IN THIS AGREEMENT, NEITHER RECIPIENT NOR ANY\nCONTRIBUTORS SHALL HAVE ANY LIABILITY FOR ANY DIRECT, INDIRECT, INCIDENTAL,\nSPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING WITHOUT LIMITATION\nLOST PROFITS), HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN\nCONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)\nARISING IN ANY WAY OUT OF THE USE OR DISTRIBUTION OF THE PROGRAM OR THE\nEXERCISE OF ANY RIGHTS GRANTED HEREUNDER, EVEN IF ADVISED OF THE POSSIBILITY\nOF SUCH DAMAGES.\n\n7. GENERAL\n\nIf any provision of this Agreement is invalid or unenforceable under\napplicable law, it shall not affect the validity or enforceability of the\nremainder of the terms of this Agreement, and without further action by the\nparties hereto, such provision shall be reformed to the minimum extent\nnecessary to make such provision valid and enforceable.\n\nIf Recipient institutes patent litigation against any entity (including a\ncross-claim or counterclaim in a lawsuit) alleging that the Program itself\n(excluding combinations of the Program with other software or hardware)\ninfringes such Recipient's patent(s), then such Recipient's rights granted\nunder Section 2(b) shall terminate as of the date such litigation is filed.\n\nAll Recipient's rights under this Agreement shall terminate if it fails to\ncomply with any of the material terms or conditions of this Agreement and does\nnot cure such failure in a reasonable period of time after becoming aware of\nsuch noncompliance. If all Recipient's rights under this Agreement terminate,\nRecipient agrees to cease use and distribution of the Program as soon as\nreasonably practicable. However, Recipient's obligations under this Agreement\nand any licenses granted by Recipient relating to the Program shall continue\nand survive.\n\nEveryone is permitted to copy and distribute copies of this Agreement, but in\norder to avoid inconsistency the Agreement is copyrighted and may only be\nmodified in the following manner. The Agreement Steward reserves the right to\npublish new versions (including revisions) of this Agreement from time to\ntime. No one other than the Agreement Steward has the right to modify this\nAgreement. The Eclipse Foundation is the initial Agreement Steward. The\nEclipse Foundation may assign the responsibility to serve as the Agreement\nSteward to a suitable separate entity. Each new version of the Agreement will\nbe given a distinguishing version number. The Program (including\nContributions) may always be distributed subject to the version of the\nAgreement under which it was received. In addition, after a new version of the\nAgreement is published, Contributor may elect to distribute the Program\n(including its Contributions) under the new version. Except as expressly\nstated in Sections 2(a) and 2(b) above, Recipient receives no rights or\nlicenses to the intellectual property of any Contributor under this Agreement,\nwhether expressly, by implication, estoppel or otherwise. All rights in the\nProgram not expressly granted under this Agreement are reserved.\n\nThis Agreement is governed by the laws of the State of New York and the\nintellectual property laws of the United States of America. No party to this\nAgreement will bring a legal action under this Agreement more than one year\nafter the cause of action arose. Each party waives its rights to a jury trial in\nany resulting litigation." }, { "path": "README.md", "content": "Mesh\n====\n\nA Responsive Grid & Web Typography toolkit for Clojure & Clojurescript. \n\nBuilt on [Garden](https://github.com/noprompt/garden).\n\n## Rationale\n\n> Web Design is 95% Typography - iA\n\n## Features\n\nMy current priority is to build a Clojurescript interface to [CSS\nGrid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), [CSS\nAnimations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)\nspecs in the context of Typography and Graphic Design.\n\nEarly research includes expressing:\n\n- A grid in a single fn\n- Available grids: columnar, container-row-column, fluid-nested-grid, golden-grid\n- Baseline Grid in a single fn\n- Modular Scale in a single fn\n- Viewport Math in a single fn\n- Baseline Typography\n- Typography mixins, and responsive utilities with gardener.\n- Create new DSLs\n\n## Quickstart\n\nEarly prototypes:\n\n**A simple 8-column grid** with `col-x` classes:\n\n```clojure\n(grid/create-minimal-grid \".grid\" (px 20))\n```\n\n**Fluid, Fractional grids**\n\n```clojure\n(def gutter (px 20))\n\n(def grids\n (list (grid/create \".grid\" gutter)\n (grid/wrap-widths 978)\n (grid/create-nested-units)\n (grid/nuke-gutters-and-padding)\n (grid/respond-small (:mobile breakpoints) gutter)\n (grid/respond-medium (:tablet breakpoints))))\n```\n\n**Nested Grids**\n\nAdd the following to fluid grids:\n\n```clojure\n(grid/create-nested-units)\n```\n\n**Baseline Typpography**\n\n```clojure\n(grid/zoomable-baseline-grid 16 24)\n```\n\n**Create new DSLs**\n\nYou may be working with a Creative Director or a Print Designer who does not\nunderstand CSS. But they understand Design. Wouldn't it be nice to understand\ntheir specs and codify them into data?\n\nDesigner: Make the headings `serifs` and `scale-types` using four `breakpoints`\n(take 480 px increments). And yes, use our brand settings.\n\n```clojure\n(def settings\n {:min-width (px 400)\n :max-width (px 1200)\n :min-font (px 12)\n :max-font (px 32)\n :body-font (:eb-garamond typo/font-families)\n :header-font (:eb-garamond typo/font-families)\n :header-font-weight 600\n :header-color \"#111\"\n :scale :golden-ratio\n :breakpoints {:mobile (px 480)\n :tablet (px 960)\n :laptop (px 1440)\n :monitor (px 1920)}})\n\n(def fonts {:font-size-base (em 1.5)\n :line-height-base (em 1.45)\n :ff-serif [\"EB Garamond\" \"Serif\"]\n :ff-sans [\"Fira Sans\" \"sans-serif\"]\n :ff-mono [\"Source Code Pro\" \"monospace\"]})\n\t\t\t\n(defn headings [declarations]\n\t[:h1 :h2 :h3 :header declarations])\n\n;; Create your own DSL\n(-> headings\n (scale-type settings)\n (make-serifs typo/font-families)))\n```\n\nFunctional programmer: \"Sure, let me build two higher order functions.\"\n\n```clojure\n;; a bad example\n(defn make-serifs [selector families]\n (fn [declarations]\n (let [styles (selector declarations)]\n (conj styles (font (:garamond families) 3 600 0.5 2)))))\n\n;; slightly better\n(defn scale-type [selector params]\n (fn [declarations]\n (let [styles (selector declarations)]\n (conj styles\n (at-media {:min-width (get-in params [:breakpoints :mobile])}\n [:& {:font-size (* 1.5 (:min-font params))}])\n (at-media {:min-width (get-in params [:breakpoints :tablet])}\n [:& {:font-size (* 1.75 (:min-font params))}])\n (at-media {:min-width (get-in params [:breakpoints :laptop])}\n [:& {:font-size (* 2.25 (:min-font params))}])))))\n\n```\n\n## Examples\n\nExamples include example designs with [Om](https://github.com/omcljs/om) and soon Reagent.\n\nRun `examples` with the current mesh src, using figwheel:\n\n\tlein dev\n\n- typography: showcase of all grids with Clj (compile to css)\n- grids: showcase of all grids with Clj (compile to css)\n\n## Clojure or Clojurescript?\n\nStyles can be compiled on the server, client, or generated as plain css files.\n\nWrite styles in **Clojure** when you prefer static styles or compiled styles on\nserver. Assuming you’re running `lein garden auto` with `:stylesheet\napp.styles/index` set in its build id, all styles will be compiled into css on\ndisk.\n\nWrite styles in **Clojurescript** when you want styles to be dynamically\nincluded at runtime, via Js or Cljs. This is useful if you're building\nfine-grained components based on React-like libraries: rather than bundling\nstyles into a single file, just import individual styles as _functions_:\n\n```clojure\n(ns app.styles\n (:require [garden.core :refer [css]]))\n\n(def index\n (css grids)))\n\n(mesh.utils/insert-styles styles/index)\n```\n\nInvoke styles via plain old **Javascript**:\n\n```javascript\nmesh.dom.insert_styles(app.styles.index)\n```\n\nYou don't need complex build tools like [Webpack](http://webpack.github.io) in\nClojurescript. Just Convert CSS into data and pass them around as code.\n\n## Credits\n\nJoel Holbrooks for creating Garden, Chris Coyler for countless\n[CSS-Tricks](https://css-tricks.com).\n\nI learned a lot by studying the source of multiple libraries (see references),\nand may have borrowed ideas from them. Starting this library would have been\nmuch harder without the work of these designers.\n\n## References\n\n- [Clojure/West Presentation](https://www.youtube.com/watch?v=-jnJGNDoSXc)\n- [LispCast Interview](http://www.lispcast.com/pre-west-priyatam-mudivarti)\n- [Grid Systems in Graphic Design](http://www.amazon.com/Grid-Systems-Graphic-Design-Communication/dp/3721201450)\nby Josef Müller-Brockmann is a classic\n- [Thinking grids](https://github.com/priyatam/thinking-grids) is my reference to\nexplore grid libraries in Sass, Less, and Stylus.\n- [Don’t overthink it](https://css-tricks.com/dont-overthink-it-grids/) by Chris Coyler\n- [Baseline Grids](http://alistapart.com/article/settingtypeontheweb)\n- [Fluid Grids](http://alistapart.com/article/fluidgrids)\n- [OOCS](http://oocss.org/grids_docs.html)\n- [The magic of Bootstrap Grids](http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works)\n- [Understanding Susy's Grids](http://www.zell-weekeat.com/susy2-tutorial)\n- [Golden Grid System](http://goldengridsystem.com)\n- [Gridism](http://cobyism.com/gridism/)\n- [Lost](https://github.com/corysimmons/lost) \n\n## Contributing\n\nMesh is currently in the development phase. I will be open to contributions\nduring Alpha.\n\n## Status\n\nDevelopment.\n\n[![Clojars Project](http://clojars.org/facjure/mesh/latest-version.svg)](http://clojars.org/facjure/mesh)\n\n## License\n\nCopyright © 2015-2019 Facjure, LLC.\n\nReleased under the Eclipse Public License, same as Clojure & Clojurescript.\n" }, { "path": "dev/repl.cljs", "content": "(ns repl\n (:require-macros\n [figwheel.client.utils :refer [enable-dev-blocks!]])\n (:require [examples.typography.page :as typo]\n [examples.grids.page :as grids]\n [figwheel.client :as fw]))\n\n(enable-console-print!)\n(enable-dev-blocks!)\n\n(print \"Starting Figwheel Cljs Repl ... \")\n\n(fw/start\n {:websocket-url \"ws://localhost:3449/figwheel-ws\"\n :on-jsload (fn []\n (print \"Figwheel ... js loaded \"))\n :load-warninged-code true})\n" }, { "path": "examples/grids/page.cljs", "content": "(ns examples.grids.page\n (:require [om.core :as om :include-macros true]\n [om.dom :as dom :include-macros true]\n [sablono.core :as html :refer-macros [html]]))\n\n(enable-console-print!)\n\n(defn view [grid-component]\n [:section {:class \"demo\"}\n (grid-component)])\n\n;; TODO Refactor\n(defn fluid-grids []\n [:div\n [:h2 {:class \"grid-title\"} \"Fluid/Fractional Grids\"]\n [:div {:class \"grid\"}\n [:div {:class \"unit whole\"}\n [:pre \".whole\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit half\"}\n [:pre \".half\"]]\n [:div {:class \"unit half\"}\n [:pre \".half\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit one-third\"}\n [:pre \".one third\"]]\n [:div {:class \"unit two-thirds\"}\n [:pre \".two thirds\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit one-quarter\"}\n [:pre \".one-quarter\"]]\n [:div {:class \"unit three-quarters\"}\n [:pre \".three-quarters\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit one-fifth\"}\n [:pre \".one-fifth\"]]\n [:div {:class \"unit four-fifths\"}\n [:pre \".four-fifths\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit two-fifths\"}\n [:pre \".two-fifths\"]]\n [:div {:class \"unit three-fifths\"}\n [:pre \".three-fifths\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit golden-large\"}\n [:pre \".golden-large\"]]\n [:div {:class \"unit golden-small\"}\n [:pre \".golden-small\"]]]])\n\n;; TODO Refactor\n(defn nested-grids []\n [:div\n [:div {:class \"grid\"}\n [:div {:class \"unit one-quarter align-right center-on-mobile\"}\n [:h2 \"Nested Grids\"]\n [:p \"Nested Grids also work, but markup gets crazy pretty soon!\"]]\n [:div {:class \"unit three-quarters\"}\n [:div {:class \"grid\"}\n [:div {:class \"unit whole\"}\n [:p {:class \"align-center\"} \"Nesting!\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit one-third\"}\n [:pre \"***\"]]\n [:div {:class \"unit two-thirds\"}\n [:div {:class \"grid\"}\n [:div {:class \"unit whole\"}\n [:p {:class \"align-center\"} \"Nesting!\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit two-fifths\"}\n [:pre \"***\"]]\n [:div {:class \"unit three-fifths\"}\n [:pre \"***\"]]]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit four-fifths\"}\n [:div {:class \"grid\"}\n [:div {:class \"unit whole\"}\n [:p {:class \"align-center\"} \"Gridception!\"]]]\n [:div {:class \"grid\"}\n [:div {:class \"unit one-quarter\"}\n [:pre \"***\"]]\n\n [:div {:class \"unit one-quarter\"}\n [:pre \"***\"]]\n [:div {:class \"unit one-quarter\"}\n [:pre \"***\"]]\n [:div {:class \"unit one-quarter\"}\n [:pre \"***\"]]]]\n [:div {:class \"unit one-fifth\"} \"***\"]]]]])\n\n(defn fluid-widget [data owner]\n (reify\n om/IWillMount\n (will-mount [_]\n (println \"Fluid widget mounting\"))\n om/IRenderState\n (render-state [_ {:keys [count]}]\n (println \"Render!\")\n (html (view fluid-grids)))))\n\n(defn nested-widget [data owner]\n (reify\n om/IWillMount\n (will-mount [_]\n (println \"Nested widget mounting\"))\n om/IRenderState\n (render-state [_ {:keys [count]}]\n (println \"Render!\")\n (html (view nested-grids)))))\n\n(defn empty-widget [data owner]\n (reify\n om/IRenderState\n (render-state [_ {:keys [count]}]\n (println \"Unmounting!\")\n (html [:div \"\"]))))\n\n(defn mount\n ([widget id]\n (mount widget id nil))\n ([widget id style]\n (om/root\n widget\n app-state\n {:target (.getElementById js/document id)})))\n\n(defn unmount [id]\n (om/root\n empty-widget\n app-state\n {:target (.getElementById js/document id)}))\n\n(mount fluid-widget \"fluid\")\n(mount nested-widget \"nested\")\n\n#_(unmount \"fluid\")\n" }, { "path": "examples/grids/styles.clj", "content": "(ns grids.styles\n (:refer-clojure :exclude [+ - * /])\n (:require [garden.def :refer [defstyles defrule defkeyframes]]\n [garden.core :refer [css]]\n [garden.units :as u :refer [px pt em]]\n [garden.color :as color :refer [hsl rgb]]\n [garden.arithmetic :refer [+ - * /]]\n [facjure.mesh.media :as respond :refer [breakpoints]]\n [facjure.mesh.core :as mesh]\n [facjure.mesh.typography :as typo :refer [typeset vr-block scale-type make-serifs]]\n [facjure.mesh.grid :as grid]))\n\n(def gutter (px 20))\n\n(def alegreya [\"Alegreya\" \"Baskerville\" \"Georgia\" \"Times\" \"serif\"])\n(def sans [\"\\\"Open Sans\\\"\" \"Avenir\" \"Helvetica\" \"sans-serif\"])\n(def mono [\"Inconsolata\" \"Menlo\" \"Courier\" \"monospace\"])\n\n(defstyles printer\n #_(typeset serif\n (:optima typo/font-families)\n (:sourcecode-pro typo/font-families))\n (typo/typeset-html typo/defaults :golden))\n\n(defstyles reset\n mesh/reset-common-selectors)\n#_(typo/baseline-overlay (:cadetblue color/color-name->hex) 0)\n\n(defstyles grids\n mesh/alignments\n (grid/create \".grid\" gutter)\n (grid/wrap-widths 978)\n (grid/create-nested-units)\n (grid/nuke-gutters-and-padding)\n (grid/media-small (:mobile breakpoints) gutter)\n (grid/media-medium (:tablet breakpoints)))\n\n(def bp\n (let [grid-title (defrule grid-title :.grid-title)]\n (respond/iphone-5\n (grid-title {:font-size 10}))))\n\n(def index\n (merge grids printer bp reset))\n" }, { "path": "examples/typography/page.cljs", "content": "(ns examples.typography.page\n (:refer-clojure :exclude [+ - * /])\n (:require [om.core :as om :include-macros true]\n [om.dom :as dom :include-macros true]\n [sablono.core :as html :refer-macros [html]]))\n\n(enable-console-print!)\n\n(defonce app-state\n (atom {:msg \"The quick brown fox jumps over the lazy dog\"}))\n\n(defn component [data owner]\n (reify\n om/IRenderState\n (render-state [_ {:keys [msg]}]\n (html\n [:section {:class \"home\"}\n [:h2 \"Typographic Scales\"]\n [:h1 (:msg data)]\n [:h2 (:msg data)]\n [:h3 (:msg data)]\n [:h4 (:msg data)]\n [:h5 (:msg data)]\n [:h6 (:msg data)]\n [:p.large (:msg data)]\n [:p.medium (:msg data)]\n [:p.small (:msg data)]]))))\n\n(defn mount [widget id]\n (om/root\n widget\n app-state\n {:target (.getElementById js/document id)}))\n\n(mount component \"typography\")\n" }, { "path": "examples/typography/styles.clj", "content": "(ns typography.styles\n (:refer-clojure :exclude [+ - * /])\n (:require [garden.def :refer [defstyles defrule]]\n [garden.core :refer [css]]\n [garden.units :as u :refer [px pt em]]\n [garden.arithmetic :refer [+ - * /]]\n [facjure.mesh.media :as respond]\n [facjure.mesh.typography :as typo :refer [typeset vr-block scales scale-type make-serifs]]\n [facjure.mesh.grid :as grid]))\n\n(def alegreya [\"Alegreya\" \"Baskerville\" \"Georgia\" \"Times\" \"serif\"])\n(def sans [\"\\\"Open Sans\\\"\" \"Avenir\" \"Helvetica\" \"sans-serif\"])\n(def mono [\"Inconsolata\" \"Menlo\" \"Courier\" \"monospace\"])\n\n(defstyles fonts\n (typeset alegreya sans mono))\n\n(defrule homepage :section.home)\n(defrule body :body)\n(defrule h1 :h1)\n(defrule h2 :h2)\n(defrule h3 :h3)\n(defrule h4 :h4)\n(defrule h5 :h5)\n(defrule h6 :h6)\n(defrule small :p.small)\n(defrule medium :p.medium)\n(defrule large :p.large)\n\n(def ms\n (let [f (typo/modular-scale-fn 16 (:golden scales))]\n (fn [n]\n (px (f n)))))\n\n(defstyles typography\n (body\n {:font-family alegreya})\n\n (homepage\n (h1\n (respond/tablet\n {:padding [[0 (ms 2)]]\n :font-size (ms 5)\n :line-height (ms 5)})\n (respond/iphone-5\n {:padding [[0 (ms 2)]]\n :font-size (ms 5)\n :line-height (ms 5)}))\n\n (h2\n (respond/tablet\n {:padding [[0 (ms 1)]]\n :font-size (ms 4)\n :line-height (ms 4)}))\n\n (h3\n (respond/tablet\n {:padding [[0 (ms 1)]]\n :font-size (ms 3)\n :line-height (ms 3)}))\n\n (h4\n (respond/tablet\n {:padding [[0 (ms 1)]]\n :font-size (ms 2)\n :line-height (ms 2)}))\n\n (h5\n (respond/tablet\n {:padding [[0 (ms 1)]]\n :font-size (ms 1)\n :line-height (ms 1)}))\n\n (h6\n (respond/desktop\n {:padding [[0 (ms 1)]]\n :font-size (ms 0)\n :line-height (ms 0)}))\n\n (large\n (respond/tablet\n {:padding [[0 (ms 1)]]\n :font-size (ms -1)\n :line-height (ms -1)}))\n\n (medium\n (respond/tablet\n {:padding [[0 (ms 1)]]\n :font-size (ms -2)\n :line-height (ms -2)}))\n\n (small\n (respond/tablet\n {:padding [[0 (ms 1)]]\n :font-size (ms -3)\n :line-height (ms -3)}))))\n\n(defstyles typesettings\n typography)\n\n(def index\n typesettings)\n" }, { "path": "project.clj", "content": "(defproject facjure/mesh \"0.6.0\"\n :description \"A toolkit for responsive grids and web typography\"\n :url \"https://github.com/facjure/mesh\"\n :license {:name \"Eclipse Public License\"\n :url \"http://www.eclipse.org/legal/epl-v10.html\"}\n :scm {:name \"git\" :url \"https://github.com/facjure/mesh\"}\n :min-lein-version \"2.8.1\"\n :global-vars {*warn-on-reflection* false *assert* false}\n :dependencies [[org.clojure/clojure \"1.10.0\" :scope \"provided\"]\n [org.clojure/clojurescript \"1.10.439\" :scope \"provided\"]\n [com.gfredericks/cljs-numbers \"0.1.2\"]\n [garden \"1.3.6\"]]\n :node-dependencies [[autoprefixer \"9.4.3\"]\n [css-min \"0.4.3\"]]\n :source-paths [\"src\" \"target/classes\"]\n :clean-targets ^{:protect false} [\"resources/public/js\" \"target/classes\"]\n :cljsbuild {:builds\n [{:id \"dev\"\n :source-paths [\"examples\" \"dev\"]\n :compiler {:main repl\n :output-to \"resources/public/js/mesh.js\"\n :output-dir \"resources/public/js/out\"\n :asset-path \"js/out\"\n :optimizations :none\n :source-map-timestamp true\n :install-deps true\n :npm-deps {:create-react-class \"15.6.0\"}\n :preloads [devtools.preload]}\n :figwheel {}}\n {:id \"prod\"\n :source-paths [\"src\"]\n :compiler {:output-to \"dist/mesh.min.js\"\n :optimizations :advanced\n :pretty-print false}}]}\n :garden {:builds\n [{:id \"typography\"\n :source-paths [x\"examples\"]\n :stylesheet typography.styles/index\n :compiler {:output-to \"resources/public/css/typography.css\"\n :pretty-print true}}\n {:id \"grids\"\n :source-paths [\"src\" \"examples\"]\n :stylesheet grids.styles/index\n :compiler {:output-to \"resources/public/css/grids.css\"\n :pretty-print true}}]}\n\n :plugins [[lein-cljsbuild \"1.1.7\"]\n [lein-figwheel \"0.5.16\"]\n [lein-garden \"0.2.8\"]\n [lein-npm \"0.6.2\"]\n [lein-pdo \"0.1.1\"]\n [lein-doo \"0.1.9\"]]\n\n :repl-options {:nrepl-middleware [cider.piggieback/wrap-cljs-repl]}\n\n :profiles {:dev\n {:dependencies [[cider/piggieback \"0.3.10\" :exclude [org.clojure/tools.nrepl]]\n [binaryage/devtools \"0.9.9\"]\n [figwheel-sidecar \"0.5.16\"]\n [sablono \"0.3.4\"]\n [org.omcljs/om \"0.9.0\"]]\n :figwheel {:http-server-root \"public\"\n :server-port 3449\n :nrepl-port 7888\n :css-dirs [\"resources/public/css\"]\n }}}\n :aliases {\"init\" [\"pdo\" \"clean,\" \"garden\" \"clean\"]\n \"dev\" [\"pdo\" \"garden\" \"auto,\" \"figwheel\"]\n \"release\" [\"pdo\" \"clean,\" \"cljsbuild\" \"once\" \"prod\"]})\n" }, { "path": "resources/public/index.html", "content": "\n\n \n \n \n \n Mesh Demos \n\n \n\n \n \n \n\n \n \n \n\t

Grid examples

\n\t\n
\n
\n
\n
\n\n\t

Typography examples

\n\t
\n\n \n \n\n" }, { "path": "src/facjure/mesh/core.cljc", "content": "(ns facjure.mesh.core\n (:require [garden.core :refer [css]]))\n\n;; Resets -----\n\n(defn clearfix [clazz]\n [clazz {:*zoom 1}\n [:&:before :&:after {:display \"table\"\n :content \" \"\n :line-height 0}]\n [:&:after {:clear \"both\"}]])\n\n(def reset-common-selectors\n [:h1 :h2 :h3 :h4 :h5 :h6\n :p :blockquote :pre\n :dl :dt :dd :ol :ul :li\n :fieldset :form :label :legend\n :th :td\n :artcle :section :aside :figure :footer :header\n :hgroup :menu :nav :section\n {:margin 0\n :padding 0\n :border 0}])\n\n(def reset-padding\n {:padding \"0 !important\"})\n\n(def alignments\n [[:.align-center {:text-align \"center\"}]\n [:.align-left {:text-align \"left\"}]\n [:.align-right {:text-align \"right\"}]\n [:.pull-left {:float \"left\"}]\n [:.pull-right {:float \"right\"}]])\n\n(def border-box\n {:box-sizing \"border-box\"})\n\n(def content-box\n {:box-sizing \"content-box\"})\n\n\n;; Math ------\n\n#?(:cljs\n (defn viewport-w []\n (.. js/document -documentElement -clientWidth)))\n\n#?(:cljs\n (defn viewport-h []\n (.. js/document -documentElement -clientHeight)))\n\n#?(:clj\n (defn pow [base e]\n (.pow Math base e)))\n\n#?(:cljs\n (defn pow [base e]\n (.pow js/Math base e)))\n\n(defn whole-number? [n]\n (= n (Math/floor n)))\n\n\n;; Dom -----\n\n#?(:cljs\n (defn insert-styles [styles]\n \"Inserts Stylesheet into document head\"\n (let [el (.createElement js/document \"style\")\n node (.createTextNode js/document styles)]\n (.appendChild el node)\n (.appendChild (.-head js/document) el)\n el)))\n\n" }, { "path": "src/facjure/mesh/grid.cljc", "content": "(ns facjure.mesh.grid\n (:refer-clojure :exclude [+ - * /])\n (:require [garden.core :refer [css]]\n [garden.units :as u :refer [px pt pc]]\n [garden.units :refer (px+ px* px- px-div em)]\n [garden.color :as color :refer [hsl rgb]]\n [garden.arithmetic :refer [+ - * /]]\n [garden.stylesheet :refer [at-media]]\n [facjure.mesh.media :as media]\n [facjure.mesh.core :refer [border-box clearfix reset-padding]]))\n\n(defn initialize [clazz gutter]\n \"Define a unit within grid with a gutter in px\"\n [[clazz :.unit border-box]\n [clazz {:display \"block\"\n :clear \"both\"}\n [:.unit {:float \"left\"\n :width \"100%\"\n :padding (/ gutter 2)}\n [:&:first-child {:padding-left gutter}]\n [:&:last-child {:padding-right gutter}]]]])\n\n;; A simple Grid, based on on 1,2,4,8 columns\n;; https://css-tricks.com/dont-overthink-it-grids\n\n(defn create-minimal-grid [clazz pad]\n [[:* {:box-sizing \"border-box\"}]\n [clazz {:background \"white\"\n :margin [[0 0 pad 0]]}\n [:&:after {:content \"\"\n :display \"table\"\n :clear \"both\"}]\n [\"[class*='col-']\" {:float \"left\"\n :padding-right pad\n }]\n [:.col-1-3 {:width \"33.33%\"}]\n [:.col-2-3 {:width \"66.66%\"}]\n [:.col-1-2 {:width \"50.00%\"}]\n [:.col-1-4 {:width \"25.00%\"}]\n [:.col-1-8 {:width \"12.50%\"}]\n [:.out-padding {:padding [[pad 0 pad pad pad]]}\n [\"[class*='col-']:last-of-type\" {:padding-right pad}]]]])\n\n;; Fluid/Fractional Grids, with nesting\n\n(defn create-nested-units []\n [:.unit\n [:.unit\n [:&:first-child {:padding-left 0}]\n [:&:last-child {:padding-right 0}]]\n [:.grid:first-child\n [:>\n [:.unit {:padding-top 0}]]]\n [:.grid:last-child\n [:>\n [:.unit {:padding-bottom 0}]]]])\n\n(defn nuke-gutters-and-padding []\n [[:.unit.no-gutters reset-padding]\n [:.no-gutters\n [:.unit reset-padding]]])\n\n(defn wrap-widths [width]\n [[:.wrap\n [:.grid {:max-width (px width)\n :margin \"0 auto\"}]]\n [:.grid.wrap\n {:max-width (px width)\n :margin \"0 auto\"}]])\n\n(defn create-fractions [clazz]\n [[clazz\n [:.whole {:width \"100%\"}]]\n [clazz\n [:.half {:width \"50%\"}]]\n [clazz\n [:.one-third {:width \"33.3332%\"}]]\n [clazz\n [:.two-thirds {:width \"66.6665%\"}]]\n [clazz\n [:.one-fourth :.one-quarter {:width \"25%\"}]]\n [clazz\n [:.three-forths :.three-quarters {:width \"75%\"}]]\n [clazz\n [:.one-fifth {:width \"20%\"}]]\n [clazz\n [:.two-fifths {:width \"40%\"}]]\n [clazz\n [:.three-fifths {:width \"60%\"}]]\n [clazz\n [:.four-fifths {:width \"80%\"}]]\n [clazz\n [:.golden-small {:width \"38.2716%\"}]]\n [clazz\n [:.golden-large {:width \"61.7283%\"}]]])\n\n(defn create [clazz gutter]\n (list (clearfix clazz)\n (initialize clazz gutter)\n (create-fractions clazz)))\n\n(defn media-small [width gutter]\n (at-media {:screen true :max-width width}\n [\".grid:not(.no-stacking-on-mobiles)\"\n [:>\n [:.unit {:width \"100% !important\"\n :padding-left gutter\n :padding-right gutter}]]]\n [:.unit\n [:.grid\n [:.unit {:padding-left (px 0)\n :padding-right (px 0)}]]]\n [:.center-on-mobiles {:text-align \"center !important\"}]\n [:.hide-on-mobiles {:display \"none !important\"}]))\n\n(defn media-medium [width]\n (at-media {:screen true :min-width width}\n [:.wider\n [:.grid {:max-width width\n :margin \"0 auto\"}]]))\n\n;; Bootstrap-style Container=>Row=>Column Grids with 15px margins, and % offsets\n\n(def container\n (list\n [:& clearfix]\n (media/mobile)\n (media/phablet)\n (media/tablet)\n (media/desktop)\n (media/hd)))\n\n(defn offset [n]\n (let [m (min (max 0 n) 12)]\n [:&\n {:margin-left (pc (* 100 (/ n 12.0)))}]))\n\n(defn col [n]\n (let [m (min (max 0 n) 12)]\n [:&\n {:float :left\n :position :relative\n :min-height (px 1)\n :padding-left (px 15)\n :padding-right (px 15)\n :width (pc (* 100 (/ m 12.0)))}]))\n\n(def row\n [:&\n {:margin-right (px -15)\n :margin-left (px -15)}\n clearfix])\n\n(defn block [& {:as opts}]\n [:&\n (when-let [c (:col opts)]\n (col c))\n (when-let [o (:offset opts)]\n (offset o))])\n" }, { "path": "src/facjure/mesh/macros.clj", "content": "(ns facjure.mesh.macros\n (:require [garden.types]\n [garden.core]\n [garden.stylesheet :refer [at-media]])\n (:import garden.types.CSSFunction\n garden.types.CSSAtRule))\n\n(defmacro defbreakpoint [name media-params]\n `(defn ~name [& rules#]\n (at-media ~media-params\n [:& rules#])))\n" }, { "path": "src/facjure/mesh/media.cljc", "content": "(ns facjure.mesh.media\n (:refer-clojure :exclude [+ - * / rem])\n #?(:cljs\n (:require-macros [facjure.mesh.macros :refer [defbreakpoint]]))\n #?(:clj\n (:require [facjure.mesh.macros :refer [defbreakpoint]]))\n (:require [garden.core :refer [css]]\n [garden.units :as units :refer (px pt em rem dpi)]\n [garden.color :as color :refer [hsl rgb]]\n [garden.arithmetic :refer [+ - * /]]\n [garden.stylesheet :refer [at-media]]))\n\n;; Generic\n\n(def breakpoints\n {:mobile (px 320)\n :tablet (px 768)\n :laptop (px 1024)\n :desktop (px 1440)})\n\n(defbreakpoint mobile\n {:screen true\n :min-width (px 320)})\n\n(defbreakpoint phablet\n {:screen true\n :min-width (px 481)})\n\n(defbreakpoint tablet\n {:screen true\n :min-width (px 768)\n :max-width (px 1023)})\n\n(defbreakpoint laptop\n {:screen true\n :min-width (px 1024)\n :max-width (px 1439)})\n\n(defbreakpoint desktop\n {:screen true\n :min-width (px 1440)})\n\n(defbreakpoint hd\n {:screen true\n :min-width (px 1824)})\n\n;; IPhones (3, 4, 4s, 5, 5s, 6)\n\n(def iphone-3-4-media-params\n {:screen true\n :min-device-width (px 320)\n :max-device-width (px 480)\n :-webkit-min-device-pixel-ratio 2})\n\n(defbreakpoint iphone-3-4\n iphone-3-4-media-params)\n\n(defbreakpoint iphone-3-4-landscape\n (assoc iphone-3-4-media-params :orientation :landscape))\n\n(defbreakpoint iphone-3-4-portrait\n (assoc iphone-3-4-media-params :orientation :portrait))\n\n(def iphone-5-media-params\n {:screen true\n :min-device-width (px 320)\n :max-device-width (px 568)\n :-webkit-min-device-pixel-ratio 2})\n\n(defbreakpoint iphone-5\n iphone-5-media-params)\n\n(defbreakpoint iphone-5-landscape\n (assoc iphone-5-media-params :orientation :landscape))\n\n(defbreakpoint iphone-5-portrait\n (assoc iphone-5-media-params :orientation :portrait))\n\n(def iphone-6-media-params\n {:screen true\n :min-device-width (px 375)\n :max-device-width (px 667)\n :-webkit-min-device-pixel-ratio 2})\n\n(defbreakpoint iphone-6\n iphone-6-media-params)\n\n(defbreakpoint iphone-6-landscape\n (assoc iphone-6-media-params :orientation :landscape))\n\n(defbreakpoint iphone-6-portrait\n (assoc iphone-6-media-params :orientation :portrait))\n\n;; Galaxy Phones\n\n(def galaxy-s3-media-params\n {:screen true\n :min-device-width (px 320)\n :max-device-width (px 640)\n :-webkit-min-device-pixel-ratio 2})\n\n(defbreakpoint galaxy-s3\n galaxy-s3-media-params)\n\n(defbreakpoint galaxy-s3-landscape\n (assoc galaxy-s3-media-params :orientation :landscape))\n\n(defbreakpoint galaxy-s3-portrait\n (assoc galaxy-s3-media-params :orientation :portrait))\n\n(def galaxy-s4-media-params\n {:screen true\n :min-device-width (px 320)\n :max-device-width (px 640)\n :-webkit-min-device-pixel-ratio 3})\n\n(defbreakpoint galaxy-s4\n galaxy-s4-media-params)\n\n(defbreakpoint galaxy-s4-landscape\n (assoc galaxy-s4-media-params :orientation :landscape))\n\n(defbreakpoint galaxy-s4-portrait\n (assoc galaxy-s4-media-params :orientation :portrait))\n\n(def galaxy-s5-media-params\n {:screen true\n :min-device-width (px 360)\n :max-device-width (px 640)\n :-webkit-min-device-pixel-ratio 3})\n\n(defbreakpoint galaxy-s5\n galaxy-s5-media-params)\n\n(defbreakpoint galaxy-s5-landscape\n (assoc galaxy-s5-media-params :orientation :landscape))\n\n(defbreakpoint galaxy-s5-portrait\n (assoc galaxy-s5-media-params :orientation :portrait))\n\n;; HTC One\n\n(def htc-one galaxy-s5)\n(def htc-one-landscape galaxy-s5-landscape)\n(def htc-one-portrait galaxy-s5-portrait)\n\n;; IPads\n\n(def ipad-1-2-media-params\n {:screen true\n :min-device-width (px 768)\n :max-device-width (px 1024)\n :-webkit-min-device-pixel-ratio 1})\n\n(defbreakpoint ipad-1-2\n ipad-1-2-media-params)\n\n(defbreakpoint ipad-1-2-landscape\n (assoc ipad-1-2-media-params :orientation :landscape))\n\n(defbreakpoint ipad-1-2-portrait\n (assoc ipad-1-2-media-params :orientation :portrait))\n\n(def ipad-mini ipad-1-2)\n(def ipad-mini-landscape ipad-1-2-landscape)\n(def ipad-mini-portrait ipad-1-2-portrait)\n\n(def ipad-3-4-media-params\n {:screen true\n :min-device-width (px 768)\n :max-device-width (px 1024)\n :-webkit-min-device-pixel-ratio 2})\n\n(defbreakpoint ipad-3-4\n ipad-3-4-media-params)\n\n(defbreakpoint ipad-3-4-landscape\n (assoc ipad-3-4-media-params :orientation :landscape))\n\n(defbreakpoint ipad-3-4-portrait\n (assoc ipad-3-4-media-params :orientation :portrait))\n\n;; Galaxy Tablets\n\n(def galaxy-tab-media-params\n {:min-device-width (px 800)\n :max-device-width (px 1280)})\n\n(defbreakpoint galaxy-tab\n galaxy-tab-media-params)\n\n(defbreakpoint galaxy-tab-landscape\n (assoc galaxy-tab-media-params :orientation :landscape))\n\n(defbreakpoint galaxy-tab-portrait\n (assoc galaxy-tab-media-params :orientation :portrait))\n\n;; Nexus Tablets\n\n(def nexus-tab-media-params\n {:screen true\n :min-device-width (px 601)\n :max-device-width (px 906)\n :-webkit-min-device-pixel-ratio 1.331\n :-webkit-max-device-pixel-ratio 1.332})\n\n(defbreakpoint nexus-tab\n nexus-tab-media-params)\n\n(defbreakpoint nexus-tab-landscape\n (assoc nexus-tab-media-params :orientation :landscape))\n\n(defbreakpoint nexus-tab-portrait\n (assoc nexus-tab-media-params :orientation :portrait))\n\n;; Kindle Fire Crap\n\n(def kindle-fire-media-params\n {:screen true\n :min-device-width (px 800)\n :max-device-width (px 1280)\n :-webkit-min-device-pixel-ratio 1.5})\n\n(defbreakpoint kindle-fire\n kindle-fire-media-params)\n\n(defbreakpoint kindle-fire-landscape\n (assoc kindle-fire-media-params :orientation :landscape))\n\n(defbreakpoint kindle-fire-portrait\n (assoc kindle-fire-media-params :orientation :portrait))\n\n;; Kindle Fire HD Crap\n\n(def kindle-fire-hd-media-params\n {:screen true\n :min-device-width (px 1200)\n :max-device-width (px 1600)\n :-webkit-min-device-pixel-ratio 1.5})\n\n(defbreakpoint kindle-fire-hd\n kindle-fire-hd-media-params)\n\n(defbreakpoint kindle-fire-hd-landscape\n (assoc kindle-fire-hd-media-params :orientation :landscape))\n\n(defbreakpoint kindle-fire-hd-portrait\n (assoc kindle-fire-hd-media-params :orientation :portrait))\n\n;; Laptops\n\n(defbreakpoint non-retina-laptops\n {:screen true\n :min-device-width (px 1200)\n :max-device-width (px 1600)\n :-webkit-min-device-pixel-ratio 1})\n\n(defbreakpoint retina-laptops\n {:screen true\n :min-device-width (px 1200)\n :max-device-width (px 1600)\n :-webkit-min-device-pixel-ratio 2\n :min-resolution (dpi 192)})\n" }, { "path": "src/facjure/mesh/typography.cljc", "content": "(ns facjure.mesh.typography\n (:refer-clojure :exclude [+ - * / rem])\n (:require [garden.compiler :refer [render-css]]\n [garden.core :refer [css]]\n [garden.units :as units :refer (px pt pc em rem vw)]\n [garden.arithmetic :refer [+ - * /]]\n [garden.stylesheet :refer [at-media]]\n [facjure.mesh.media :as media]\n #?(:cljs\n [cljs-numbers.core :refer [ratio? double? zero? pos? neg?]])\n #?(:clj\n [facjure.mesh.core :as core :refer [pow whole-number?]])\n #?@(:cljs\n [[facjure.mesh.core :as core :refer [pow viewport-w]]])))\n\n(def font-families\n {:garamond [\"\\\"EB Garamond\\\"\" \"Baskerville\" \"Georgia\" \"Times\" \"serif\"]\n :optima [\"\\\"Optima\\\"\" \"Segoe\" \"Calibri\" \"Arial\" \"sans-serif\"]\n :firasans [\"\\\"Fira Sans\\\"\" \"Calibri\" \"Arial\" \"sans-serif\"]\n :sourcecode-pro [\"\\\"Source Code Pro\\\"\" \"monospace\"]})\n\n(def scales\n {:minor-second (/ 16 15)\n :major-second (/ 9 8)\n :minor-third (/ 6 5)\n :major-third (/ 5 4)\n :perfect-fourth (/ 4 3)\n :aug-fourth (/ 1.411 1)\n :perfect-fifth (/ 3 2)\n :minor-sixth (/ 8 5)\n :golden (/ 1.61803 1)\n :major-sixth (/ 5 3)\n :minor-seventh (/ 16 9)\n :major-seventh (/ 15 8)\n :octave (/ 2 1)\n :major-tenth (/ 5 2)\n :major-eleventh (/ 8 3)\n :major-twelfth (/ 3 1)\n :double-octave (/ 4 1)})\n\n(def defaults\n {:line-height-ratio 1.5\n :header-ratio (:golden scales)\n :min-width (px 480)\n :max-width (px 960)\n :vertical-rythm true\n :min-font (px 12)\n :max-font (px 28)\n :body-color \"#666\"\n :body-font (:garamond font-families)\n :body-font-weight 400\n :header-font (:garamond font-families)\n :header-font-weight 600\n :header-color \"#111\"})\n\n(defn font [family size weight kerning leading & options]\n {:font-family family\n :font-size (rem size)\n :font-weight weight\n :letter-spacing (rem kerning)\n :line-height (em leading)\n :text-align \"left\"\n :text-transform (get options :text-transform \"none\")})\n\n(defn zoomable-baseline-grid\n \"Creates a baseline grid typography with a base body\n copy and five type scales, with a default 16px. All\n sizes are calculated in ems\"\n [base-fsize base-lead]\n (let [base-fem (/ base-fsize 16)\n base-lem (/ base-lead 16)\n settings (fn [f l]\n {:font-size (em f)\n :line-height (em l)})]\n [[:body ;; 16px/24px\n (settings (/ base-fsize 16)\n (/ base-lead base-fsize))]\n [:.baseline-small ;; 13px/18px\n (settings (* base-fsize 0.8125)\n (/ (* base-lead 0.75) (* base-fsize 0.8125)))]\n [:.baseline-medium :h3 ;; 16px/24px\n (settings base-fem base-lem)]\n [:.baseline-large :h1 :h2 ;; 26/36px\n (settings (/ 26 16) (/ (* base-lead 1.5) 26))]\n [:.baseline-xl ;; 42/48px\n (settings (/ 42 16) (/ (* base-lead 2) 42))]\n [:.baseline-xxl ;; 68/72px\n (settings (/ 68 16) (/ (* base-lead 3) 68))]]))\n\n(defn baseline-overlay [color offset]\n ;; TODO: implement a real func in Garden\n (let [linear-gradient (str \"linear-gradient(to top, \" color \" 5%, white 5%)\")]\n [:body {:background-position [[0 (px offset)]]\n :background-size [[\"100%\" (em (:line-height-ratio defaults))]]\n :background linear-gradient}]))\n\n;; http://madebymike.com.au/writing/precise-control-responsive-typography/\n;; calc(a + (b - x) * ((100vw - d) / (e - f))\n\n#?(:cljs\n (defn calc [min-font max-font min-width max-width]\n (println \"Viewport size:\" (viewport-w))\n (let [font-diff (+ min-font (- max-font min-font))\n vp-diff (- (px (viewport-w)) min-width)\n wid-diff (- max-width min-width)\n res (* font-diff (/ vp-diff wid-diff))]\n res)))\n\n#?(:cljs\n (defn typeset-html [conf scale]\n [[:html {:font-family (:body-font conf)\n :font-weight (:body-font-weight conf)\n :color (:body-color conf)\n :line-height (em (:line-height-ratio conf))\n :font-size (:min-font conf)}]\n (at-media {:min-width (:tablet media/breakpoints)}\n [:html {:font-size (calc (:min-font conf)\n (:max-font conf)\n (:min-width conf)\n (:max-width conf))}])\n (at-media {:min-width (:laptop media/breakpoints)}\n [:html {:font-size (calc (:min-font conf)\n (:max-font conf)\n (:min-width conf)\n (:max-width conf))}])\n (at-media {:min-width (:max-width conf)}\n [:html {:font-size (:max-font conf)}])]))\n\n#?(:clj\n (defn typeset-html [conf scale]\n [[:html {:font-family (:body-font conf)\n :font-weight (:body-font-weight conf)\n :color (:body-color conf)\n :line-height (em (:line-height-ratio conf))\n :font-size (:min-font conf)}]\n (at-media {:min-width (:min-width conf)}\n [:html {:font-size (* (scale scales) (:min-font conf))}])]))\n\n(def reset\n {:margin 0\n :padding 0})\n\n(defn block []\n {:margin-bottom (:line-height-ratio defaults)})\n\n(defn vr-block [units offset]\n (let [a (* (:line-height-ratio defaults) (:max-font defaults))\n b (/ (:max-font defaults) 2)\n c (/ units 2)\n d (+ 1 (/ offset (:max-font defaults)))]\n (em (* c d (/ a b)))))\n\n(defn typeset [serif sans mono]\n [[:body :p (font sans 1 300 0.1 1.5)]\n [:h1 (font serif 3 600 0.5 1.5)]\n [:h2 (font serif 3 400 0.5 1.5)]\n [:h3 (font serif 2 300 0.5 1.3)]\n [:h4 (font serif 1.5 300 0.3 1.3)]\n [:h5 :h6 (font mono 1.2 300 0.2 1.2)]\n [:header (font serif 4 700 0.3 1.2 \"small-caps\")]\n [:footer (font sans 1 100 0.3 1.2)]])\n\n#?(:clj\n (defn modular-scale-fn [base ratio]\n (let [[up down] (if (ratio? ratio)\n (if (< (denominator ratio)\n (numerator ratio))\n [* /]\n [/ *])\n (if (< 1 ratio)\n [* /]\n [/ *]))\n f (float ratio)\n us (iterate #(up % f) base)\n ds (iterate #(down % f) base)]\n (memoize\n (fn ms [n]\n (cond\n (< 0 n) (if (whole-number? n)\n (nth us n)\n (let [m (Math/floor (float n))\n [a b] [(ms m) (ms (inc m))]]\n (+ a (* (Math/abs (- a b))\n (- n m)))))\n (< n 0) (if (whole-number? n)\n (nth ds (Math/abs n))\n (let [m (Math/floor (float n))\n [a b] [(ms m) (ms (dec m))]]\n (+ a (* (Math/abs (- a b))\n (- n m)))))\n :else base))))))\n\n;; Experimental DSL\n\n(defn make-serifs [selector families]\n (fn [declarations]\n (let [styles (selector declarations)]\n (conj styles (font (:ff-sans families) 2 400 0.5 1.45)))))\n\n(defn scale-type [selector params]\n (fn [declarations]\n (let [styles (selector declarations)]\n (conj styles\n (at-media {:min-width (get-in params [:breakpoints :mobile])}\n [:& {:font-size (* 1.5 (:min-font params))}])\n (at-media {:min-width (get-in params [:breakpoints :tablet])}\n [:& {:font-size (* 2 (:min-font params))}])\n (at-media {:min-width (get-in params [:breakpoints :laptop])}\n [:& {:font-size (* 2.5 (:min-font params))}])))))\n\n\n(defn leading [selector lead]\n (fn [declarations]\n (let [styles (selector declarations)]\n (conj styles {:line-height (em lead)}))))\n" }, { "path": "src/facjure/mesh.cljc", "content": "(ns facjure.mesh\n (:require [garden.compiler :as compiler]\n [garden.util :as util]\n [garden.types]\n [garden.color]\n [garden.selectors :as selectors])\n (:import (garden.types CSSUnit\n CSSFunction\n CSSAtRule)\n (garden.color CSSColor)\n (garden.selectors CSSSelector)))\n\n(defmethod print-method CSSUnit [css-unit writer]\n (.write writer (compiler/render-css css-unit)))\n" } ]