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 ================================================ Mesh Demos

Grid examples

Typography examples

================================================ 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)))