{"id":13591320,"url":"https://github.com/noprompt/garden","last_synced_at":"2025-04-11T03:29:51.216Z","repository":{"id":708589,"uuid":"9311911","full_name":"noprompt/garden","owner":"noprompt","description":"Generate CSS with Clojure","archived":false,"fork":false,"pushed_at":"2024-01-16T21:37:58.000Z","size":633,"stargazers_count":1345,"open_issues_count":43,"forks_count":88,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-10-29T15:34:29.987Z","etag":null,"topics":["clojure","clojurescript","css-compiler"],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/noprompt.png","metadata":{"files":{"readme":"README.md","changelog":"ChangeLog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2013-04-09T02:58:50.000Z","updated_at":"2024-10-25T04:12:58.000Z","dependencies_parsed_at":"2024-01-26T21:48:13.244Z","dependency_job_id":"09d9bdc9-ad36-41c3-b46d-d429171280d4","html_url":"https://github.com/noprompt/garden","commit_stats":{"total_commits":505,"total_committers":28,"mean_commits":"18.035714285714285","dds":"0.25742574257425743","last_synced_commit":"be9c73bf5fdf148fb004ce98c743ce6004906ec6"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noprompt%2Fgarden","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noprompt%2Fgarden/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noprompt%2Fgarden/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noprompt%2Fgarden/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noprompt","download_url":"https://codeload.github.com/noprompt/garden/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248335270,"owners_count":21086545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["clojure","clojurescript","css-compiler"],"created_at":"2024-08-01T16:00:56.083Z","updated_at":"2025-04-11T03:29:51.196Z","avatar_url":"https://github.com/noprompt.png","language":"Clojure","funding_links":[],"categories":["Clojure","lang \u0026 extensions","Awesome ClojureScript"],"sub_categories":["CSS tools"],"readme":"# Garden\n\nGarden is a library for rendering CSS in Clojure and ClojureScript.\nConceptually similar to [Hiccup](https://github.com/weavejester/hiccup), it uses\nvectors to represent rules and maps to represent declarations. It is designed\nfor stylesheet authors who are interested in what's possible when you trade a\npreprocessor for a programming language.\n\n## Table of Contents\n\n* [Getting Started](#getting-started)\n* [Syntax](#syntax)\n* [Development](#development)\n* [Community](#community)\n* [Help!](#help)\n\n\n## Getting Started\n\nAdd the following dependency to your `project.clj` file:\n\n[![Clojars Project](http://clojars.org/garden/latest-version.svg)](http://clojars.org/garden)\n\nGarden 1.2.5 and below requires Clojure 1.6.0 and is known to work with\nClojureScript 0.0-2342. However, starting with Garden 1.3.0 Garden requires\nClojure 1.7 and ClojureScript 1.7.x to leverage a unified syntax with\n[reader conditionals](http://dev.clojure.org/display/design/Reader+Conditionals),\nand other major changes in the compiler and repl in Clojurescript.\n\n## Syntax\n\nGarden syntax is very similar to\n[Hiccup](https://github.com/weavejester/hiccup). If you're familiar with Hiccup\nyou should feel right at home. If not, don't sweat it!\n\nFrom your project's root directory start up a new REPL and try the following:\n\n```clojure\nuser=\u003e (require '[garden.core :refer [css]])\nnil\nuser=\u003e (css [:body {:font-size \"16px\"}])\n\"body{font-size:16px}\"\n```\n\nFirst you'll notice the use of the `css` function. This function takes an\noptional map of compiler flags, any number of rules, and returns a string of\ncompiled CSS.\n\nVectors represent rules in CSS. The first _n_ **non-collection** elements of a\nvector depict the rule's selector where _n_ \u003e 0. When _n_ = 0 the rule is not\nrendered. To produce a rule which selects the `\u003ch1\u003e` and `\u003ch2\u003e` HTML elements\nfor example, we simply begin a vector with `[:h1 :h2]`:\n\n```clojure\nuser=\u003e (css [:h1 :h2 {:font-weight \"none\"}])\n\"h1,h2{font-weight:none}\"\n```\n\nTo target **child selectors** nested vectors may be employed:\n\n```clojure\nuser=\u003e (css [:h1 [:a {:text-decoration \"none\"}]])\n\"h1 a{text-decoration:none}\"\nuser=\u003e (css [:h1 :h2 [:a {:text-decoration \"none\"}]])\n\"h1 a, h2 a{text-decoration:none}\"\n```\n\nAs in Less/Sass, Garden also supports selectors prefixed with the `\u0026`\ncharacter allowing you to reference a **parent selector**:\n\n```clojure\nuser=\u003e (css [:a\n             {:font-weight 'normal\n              :text-decoration 'none}\n             [:\u0026:hover\n              {:font-weight 'bold\n               :text-decoration 'underline}]])\n\"a{text-decoration:none;font-weight:normal}a:hover{text-decoration:underline;font-weight:bold}\"\n```\n\nA slightly more complex example demonstrating nested vectors with multiple\nselectors:\n\n```clojure\nuser=\u003e (css [:h1 :h2 {:font-weight \"normal\"}\n             [:strong :b {:font-weight \"bold\"}]])\n\"h1,h2{font-weight:normal}h1 strong,h1 b,h2 strong,h2 b{font-weight:bold}\"\n```\n\n`garden.selectors` namespace defines a CSSSelector record. It doubles as both a\nfunction and a literal (when passed to the css-selector). When the function is\ncalled it will return a new instance that possesses the same properties. All\narguments to the function must satisfy ICSSSelector.\n\n`garden.selectors` namespace also defines these macros that create a selector\nrecord: `defselector`, `defclass`, `defid`, `defpseudoclass` and\n`defpseudoelement`.\n\n`garden.selectors` namespace also defines many CSSSelector instances such as:\n\n* Type selectors `a`, `abbr`, `address` and [more](src/garden/selectors.cljc)\n* Pseudo-classes `active`, `checked`, `disabled` and\n  [more](src/garden/selectors.cljc)\n* Language and negation pseudo-classes `lang` and `not`\n* Structural pseudo-classes `nth-child`, `nth-last-child`, `nth-of-type` and\n  `nth-last-of-type`\n* Pseudo-elements `after`, `before`, `first-letter` and `first-line`\n* Attribute selectors `attr=`, `attr-contains`, `attr-starts-with`,\n  `attr-starts-with*`, `attr-ends-with` and `attr-matches`\n* Combinators `descendant`, `+`, `-` and `\u003e`\n* Special selector `\u0026`\n\nand allows to compose complex selectors such as this:\n\n```clojure\n(defselector *)\n(defpseudoclass host [x] x)\n(defpseudoelement content)\n(\u003e (host (attr :flipped)) content (* last-child))\n;; =\u003e :host([flipped]) \u003e ::content \u003e *:last-child\n```\n\n`garden.selectors` namespace also defines a CSS3 selectors's `specificity`\nfunction:\n\n```clojure\n(specificity \"#s12:not(FOO)\")\n;; =\u003e 101\n(specificity (a hover))\n;; =\u003e 10\n```\n\nClojure maps represent CSS declarations where map keys and values represent CSS\nproperties and values respectively. Garden's declaration syntax is a bit more\ninvolved than rules and understanding it is important to make the most of the\nlibrary.\n\nDeclaration map keys _should_ either be a string, keyword, or symbol:\n\n```clojure\nuser=\u003e (css [:h1 {\"font-weight\" \"normal\"}])\n\"h1{font-weight:normal}\"\nuser=\u003e (css [:h1 {:font-weight \"normal\"}])\n\"h1{font-weight:normal}\"\nuser=\u003e (css [:h1 {'font-weight \"normal\"}])\n\"h1{font-weight:normal}\"\n```\n\nBe aware, Garden makes no attempt to validate your declarations and\nwill not raise an error if other key types are used.\n\n```clojure\nuser=\u003e (css [:h1 {30000 \"nom-nom\"}])\n\"h1{30000:nom-nom}\"\n```\n\nWe've already seen strings used as declaration map values, but Garden also\nsupports keywords, symbols, numbers, maps, vectors, and lists in addition.\n\n##### Custom functions\n\nSince Garden doesn't have wrappers for all the possible CSS functions,\nsometimes you might need to define the function you need yourself.\nThis is where the `defcssfn` macro comes in handy.\nSuppose you want to use the `url` CSS function, even if it's not available\nin Garden directly you can just define it yourself by simply:\n\n```\n(defcssfn url)\n;; =\u003e #'user/url\n```\n\nWhich will render like this:\n```\n(css (url \"http://fonts.googleapis.com/css?family=Lato\"))\n;; =\u003e url(http://fonts.googleapis.com/css?family=Lato)\n```\n\n##### Strings, keywords, symbols, and numbers\n\nStrings, keywords, symbols, and numbers are rendered as literal CSS values:\n\n```clojure\nuser=\u003e (css [:body {:font \"16px sans-serif\"}])\n\"body{font:16px sans-serif}\"\n```\n\nBe warned, you must escape literal string values yourself:\n\n```clojure\nuser=\u003e (css [:pre {:font-family \"\\\"Liberation Mono\\\", Consolas, monospace\"}])\n\"pre{font-family:\\\"Liberation Mono\\\", Consolas, monospace}\"\n\n```\n\n## Development\n\n### Leiningen commands\n\nBuilding ClojureScript\n\n```\nlein build-cljs\n```\n\nStarting a Node REPL\n\n```\nlein node-repl\n```\n\nRun Clojure tests, along with a test runner\n\n```\nlein test-clj\n```\n\nRun ClojureScript tests (on Node)\n\n```\nlein test-cljs\n```\n\nRun both Clojure _and_ ClojureScript tests\n\n```\nlein test-cljc\n```\n\n\n## Further Reading \u0026 Wiki\n\nDetailed documentation and a developer guide for Syntax, Rules, Declarations,\nand Plugins is under the community-contributed\n[wiki](https://github.com/noprompt/garden/wiki).\n\nPlease contribute!\n\n## Help!\n\nThis project is looking for team members who can help this project succeed!\nSpecifically of interest are people who can \n\n* help fix bugs,\n* answer questions,\n* merge pull requests, and\n*  deploy new versions.\n\nIf you are interested in becoming a team member please open an issue and direct\nmessage @noprompt, or direct message @noprompt on\n[Clojurians](https://clojurians.slack.com).\n\nThe original author, @noprompt, is a busy person with a family, a job, and\nother projects. Be aware that it may take some time for pull requests to be\nevaluated.\n\n\n## Community\n\n### Mailing List\n\n* [Google Groups](https://groups.google.com/forum/#!forum/garden-clojure)\n\n### Slack\n\n* #clojurescript or #css channel on [Clojurians](https://clojurians.slack.com)\n\n## License\n\nCopyright © 2013-2019 Joel Holdbrooks.\n\nDistributed under the Eclipse Public License, the same as Clojure.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoprompt%2Fgarden","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoprompt%2Fgarden","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoprompt%2Fgarden/lists"}