{"id":22184623,"url":"https://github.com/azizzaeny/boot-atomizer","last_synced_at":"2025-07-26T19:31:29.552Z","repository":{"id":62435261,"uuid":"66252784","full_name":"azizzaeny/boot-atomizer","owner":"azizzaeny","description":"Compile atomic css for boot","archived":false,"fork":false,"pushed_at":"2023-08-10T02:16:35.000Z","size":24,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-15T18:39:46.621Z","etag":null,"topics":["atomizer","boot","boot-tasks","clojure"],"latest_commit_sha":null,"homepage":"","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/azizzaeny.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-22T08:14:44.000Z","updated_at":"2023-08-10T02:14:08.000Z","dependencies_parsed_at":"2022-11-01T21:02:21.043Z","dependency_job_id":null,"html_url":"https://github.com/azizzaeny/boot-atomizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizzaeny%2Fboot-atomizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizzaeny%2Fboot-atomizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizzaeny%2Fboot-atomizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/azizzaeny%2Fboot-atomizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/azizzaeny","download_url":"https://codeload.github.com/azizzaeny/boot-atomizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227707751,"owners_count":17807517,"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":["atomizer","boot","boot-tasks","clojure"],"created_at":"2024-12-02T10:13:34.453Z","updated_at":"2024-12-02T10:13:35.379Z","avatar_url":"https://github.com/azizzaeny.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Boot-Atomizer\n\nA task for [boot-clj](http://boot-clj.com)    \n[![Clojars Project](http://clojars.org/zaeny/boot-atomizer/latest-version.svg)](http://clojars.org/zaeny/boot-atomizer)\n\nAtomic CSS is a another way to write css, Its feels like functional css... feels great with figwheel...    \n\nSnapshot:\n```cljs\n;Where  ;T-\u003e top  ;p-\u003e padding\n\n(defn component []\n  [:div {:class \"T(10px) P(1.6em) Translate(50%)\"])\n\n; Compose\n(defn component []\n  (let [space \"P(1.6em)\"\n        move  \"T(10px) Translate(50%)\"]\n    [:div {:class (str space move)}]))\n\n```\n\nSee rational at [acss.io/thinking-in-atomic](https://acss.io/thinking-in-atomic.html)\n- [Atomic CSS on steroids](https://www.youtube.com/watch?v=988XpUvzslE) - Video 3.4min\n- [What is Atomic CSS? Organizing CSS](https://www.youtube.com/watch?v=NRqbLuKKOlE) - Video 6min\n- [Discussion: Lets-define-exactly-atomic-css](https://css-tricks.com/lets-define-exactly-atomic-css/)\n- [Discussion: How is tachyons different from inline styles?](https://github.com/tachyons-css/tachyons/issues/12)\n- [Tachyons](http://tachyons.io/)\n- [Expressive css](http://johnpolacek.github.io/expressive-css/)\n- [Basscss](http://basscss.com/)\n- [Nuclide](http://jkymarsh.com/nuclide/)\n- [Quantum CSS](https://github.com/grabr/quantum-css)\n\n###  # STEP GUIDE\n#### 1.Installation\nSadly we still use tools from outside.. but its ok, lets get a shot...   \n\n\n1. `npm install -g atomizer`\n2. or install modules localy  `npm install atomizer`\n3. and add to `path-atomizer` manually. see below.\n\n#### 2. pull from clojars and use it in build.boot\n\nRequire dependencies :\n\n```clojure\n(set-env! :dependencies '[[zaeny/boot-atomizer \"0.1.1\"]])\n\n(require '[zaeny.boot-atomizer :refer [atomizer])\n```\nadd task atomizer :\n```clojure\n(deftask dev []\n  (comp (watch) (atomizer))\n\n; robust way\n(deftask dev []  \n  (comp\n   ;(serve)\n    (watch)\n    (atomizer :find-class \"src\"\n              :output-to \"main.css\"\n              :path-atomizer \"node_modules/.bin/atomizer\")\n  ; (reload :cljs-asset-path \".\")\n  ; (cljs-repl)\n    (cljs :source-map true)))\n```\n\nyour resources/public/index.html\n```html\n\u003clink rel=\"stylesheet\" href=\"main.css\"\u003e\n```\n\n### # Options\n\n_find-class_\nnot tobe confused by classes things.. it just term used in atomizer\nbasicly watch and parse text in what directory. to distinct with other boot-cljs compile in `set-env!`\n```clojure {:find-class \"src-cljs/\"} ```\n\n_path-atomizer_\nwhere atomizer bin located  see [https://github.com/acss-io/atomizer](https://github.com/acss-io/atomizer)\n\n### # CLI\n```\nboot atomizer -o main.css -r src/\n\nUsage: boot atomizer [options]\n    Options:\n\n    -o  --output-to     Where to Output CSS [path str]\n    -r  --find-class    findClassName or Parse Blob Text from source-directory [path str]\n    -p  --path-atomizer atomizer bin  location [default global path]\n\n```\n\n### # Contribution and ahead challanges.\n1. feel free to make changes.\n2. it's posible to create own atomizer parser using macros or pure clojure, instead relying on external binary...\n   and use [noprompt/garden](https://github.com/noprompt/garden) to parse css\n3. other options dont output css but send it down and replace innerText `\u003cstyle\u003e\u003c/style\u003e`\n4. shorthand property for static values `inline block bold center capitalize nowrap` dynamic values such as `z(20) z(a)` for z-index auto keep using ()\n5. use macros to combine related  dynamic values `size(20,5/2)` expanded to `w(20) h(5/2)`\n6. what if write parser in other style such as:\n\nunderscore :\n```cljs  \n[:button {:class \"t_10px c_#333\"} ]\n```\ndashed style :\n```cljs  \n[:button {:class \"t-10px c-#333\"} ]\n```\njs function style:\n```cljs  \n[:button {:class \"t(10px) c(#333)\"} ]\n```\nclojure style!:\n```cljs  \n[:button {:class \"(t,10px) (c,#333)\"} ]\n```\n\nWhat do you think ? do you have something ?\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazizzaeny%2Fboot-atomizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fazizzaeny%2Fboot-atomizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fazizzaeny%2Fboot-atomizer/lists"}