Awesome
Boot-Atomizer
A task for boot-clj
Atomic CSS is a another way to write css, Its feels like functional css... feels great with figwheel...
Snapshot:
;Where ;T-> top ;p-> padding
(defn component []
[:div {:class "T(10px) P(1.6em) Translate(50%)"])
; Compose
(defn component []
(let [space "P(1.6em)"
move "T(10px) Translate(50%)"]
[:div {:class (str space move)}]))
See rational at acss.io/thinking-in-atomic
- Atomic CSS on steroids - Video 3.4min
- What is Atomic CSS? Organizing CSS - Video 6min
- Discussion: Lets-define-exactly-atomic-css
- Discussion: How is tachyons different from inline styles?
- Tachyons
- Expressive css
- Basscss
- Nuclide
- Quantum CSS
# STEP GUIDE
1.Installation
Sadly we still use tools from outside.. but its ok, lets get a shot...
npm install -g atomizer
- or install modules localy
npm install atomizer
- and add to
path-atomizer
manually. see below.
2. pull from clojars and use it in build.boot
Require dependencies :
(set-env! :dependencies '[[zaeny/boot-atomizer "0.1.1"]])
(require '[zaeny.boot-atomizer :refer [atomizer])
add task atomizer :
(deftask dev []
(comp (watch) (atomizer))
; robust way
(deftask dev []
(comp
;(serve)
(watch)
(atomizer :find-class "src"
:output-to "main.css"
:path-atomizer "node_modules/.bin/atomizer")
; (reload :cljs-asset-path ".")
; (cljs-repl)
(cljs :source-map true)))
your resources/public/index.html
<link rel="stylesheet" href="main.css">
# Options
find-class
not tobe confused by classes things.. it just term used in atomizer
basicly watch and parse text in what directory. to distinct with other boot-cljs compile in set-env!
clojure {:find-class "src-cljs/"}
path-atomizer where atomizer bin located see https://github.com/acss-io/atomizer
# CLI
boot atomizer -o main.css -r src/
Usage: boot atomizer [options]
Options:
-o --output-to Where to Output CSS [path str]
-r --find-class findClassName or Parse Blob Text from source-directory [path str]
-p --path-atomizer atomizer bin location [default global path]
# Contribution and ahead challanges.
- feel free to make changes.
- it's posible to create own atomizer parser using macros or pure clojure, instead relying on external binary... and use noprompt/garden to parse css
- other options dont output css but send it down and replace innerText
<style></style>
- shorthand property for static values
inline block bold center capitalize nowrap
dynamic values such asz(20) z(a)
for z-index auto keep using () - use macros to combine related dynamic values
size(20,5/2)
expanded tow(20) h(5/2)
- what if write parser in other style such as:
underscore :
[:button {:class "t_10px c_#333"} ]
dashed style :
[:button {:class "t-10px c-#333"} ]
js function style:
[:button {:class "t(10px) c(#333)"} ]
clojure style!:
[:button {:class "(t,10px) (c,#333)"} ]
What do you think ? do you have something ?