{"id":32184277,"url":"https://github.com/facjure/mesh","last_synced_at":"2026-02-21T12:01:36.232Z","repository":{"id":16263110,"uuid":"19011240","full_name":"facjure/mesh","owner":"facjure","description":"A toolkit for Responsive Web Typography","archived":false,"fork":false,"pushed_at":"2019-01-20T03:00:27.000Z","size":120,"stargazers_count":171,"open_issues_count":1,"forks_count":7,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-10-21T23:45:16.693Z","etag":null,"topics":["cssgrid","layout-engine","typography"],"latest_commit_sha":null,"homepage":"","language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"epl-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/facjure.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-22T00:09:09.000Z","updated_at":"2025-06-05T18:09:53.000Z","dependencies_parsed_at":"2022-09-24T11:40:41.475Z","dependency_job_id":null,"html_url":"https://github.com/facjure/mesh","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/facjure/mesh","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facjure%2Fmesh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facjure%2Fmesh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facjure%2Fmesh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facjure%2Fmesh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/facjure","download_url":"https://codeload.github.com/facjure/mesh/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/facjure%2Fmesh/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29680147,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T11:29:27.227Z","status":"ssl_error","status_checked_at":"2026-02-21T11:29:20.292Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cssgrid","layout-engine","typography"],"created_at":"2025-10-21T23:44:29.474Z","updated_at":"2026-02-21T12:01:36.227Z","avatar_url":"https://github.com/facjure.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"Mesh\n====\n\nA Responsive Grid \u0026 Web Typography toolkit for Clojure \u0026 Clojurescript. \n\nBuilt on [Garden](https://github.com/noprompt/garden).\n\n## Rationale\n\n\u003e 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(-\u003e 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                      [:\u0026 {:font-size (* 1.5 (:min-font params))}])\n            (at-media {:min-width (get-in params [:breakpoints :tablet])}\n                      [:\u0026 {:font-size (* 1.75 (:min-font params))}])\n            (at-media {:min-width (get-in params [:breakpoints :laptop])}\n                      [:\u0026 {: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 \u0026 Clojurescript.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffacjure%2Fmesh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffacjure%2Fmesh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffacjure%2Fmesh/lists"}