Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/azizzaeny/boot-atomizer
Compile atomic css for boot
https://github.com/azizzaeny/boot-atomizer
atomizer boot boot-tasks clojure
Last synced: about 1 month ago
JSON representation
Compile atomic css for boot
- Host: GitHub
- URL: https://github.com/azizzaeny/boot-atomizer
- Owner: azizzaeny
- Created: 2016-08-22T08:14:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-08-10T02:16:35.000Z (over 1 year ago)
- Last Synced: 2024-11-15T18:39:46.621Z (about 2 months ago)
- Topics: atomizer, boot, boot-tasks, clojure
- Language: Clojure
- Homepage:
- Size: 23.4 KB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Boot-Atomizer
A task for [boot-clj](http://boot-clj.com)
[](http://clojars.org/zaeny/boot-atomizer)
Atomic CSS is a another way to write css, Its feels like functional css... feels great with figwheel...
Snapshot:
```cljs
;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](https://acss.io/thinking-in-atomic.html)
- [Atomic CSS on steroids](https://www.youtube.com/watch?v=988XpUvzslE) - Video 3.4min
- [What is Atomic CSS? Organizing CSS](https://www.youtube.com/watch?v=NRqbLuKKOlE) - Video 6min
- [Discussion: Lets-define-exactly-atomic-css](https://css-tricks.com/lets-define-exactly-atomic-css/)
- [Discussion: How is tachyons different from inline styles?](https://github.com/tachyons-css/tachyons/issues/12)
- [Tachyons](http://tachyons.io/)
- [Expressive css](http://johnpolacek.github.io/expressive-css/)
- [Basscss](http://basscss.com/)
- [Nuclide](http://jkymarsh.com/nuclide/)
- [Quantum CSS](https://github.com/grabr/quantum-css)
### # STEP GUIDE
#### 1.Installation
Sadly we still use tools from outside.. but its ok, lets get a shot...
1. `npm install -g atomizer`
2. or install modules localy `npm install atomizer`
3. and add to `path-atomizer` manually. see below.
#### 2. pull from clojars and use it in build.boot
Require dependencies :
```clojure
(set-env! :dependencies '[[zaeny/boot-atomizer "0.1.1"]])
(require '[zaeny.boot-atomizer :refer [atomizer])
```
add task atomizer :
```clojure
(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
```html
```
### # 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](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.
1. feel free to make changes.
2. it's posible to create own atomizer parser using macros or pure clojure, instead relying on external binary...
and use [noprompt/garden](https://github.com/noprompt/garden) to parse css
3. other options dont output css but send it down and replace innerText ``
4. 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 ()
5. use macros to combine related dynamic values `size(20,5/2)` expanded to `w(20) h(5/2)`
6. what if write parser in other style such as:
underscore :
```cljs
[:button {:class "t_10px c_#333"} ]
```
dashed style :
```cljs
[:button {:class "t-10px c-#333"} ]
```
js function style:
```cljs
[:button {:class "t(10px) c(#333)"} ]
```
clojure style!:
```cljs
[:button {:class "(t,10px) (c,#333)"} ]
```
What do you think ? do you have something ?