└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | [basscss]: http://www.basscss.com
 2 | [css-modules]: https://github.com/css-modules/css-modules
 3 | [brent]: https://twitter.com/jxnblk
 4 | 
 5 | # atomify ![draft](https://img.shields.io/badge/status-draft-blue.svg?style=flat-square)
 6 | 
 7 | > Automatically atomify your CSS
 8 | 
 9 | ![This might be a silly idea but I'm giving it a shot anyway](http://messages.hellobits.com/warning.svg?message=This%20might%20be%20a%20silly%20idea%20but%20I'm%20giving%20it%20a%20shot%20anyway)
10 | 
11 | ## Why
12 | 
13 | In my opinion, [Brent Jackson][brent] nailed it with [Basscss][basscss]. It's
14 | a very practical response to CSS modularization, with no bullshit.
15 | 
16 | The idea of isolating patterns into specific classes and composing them as you
17 | wish is simple but really powerful. If you have a solid design foundation, you
18 | can literally start iterating without having to make CSS changes whatsoever.
19 | 
20 | Of course you can achieve that by explaining this concept to both developers and
21 | designers and sticking to it. This tool is just an attempt to automate that so
22 | you can apply this concept to code bases that already exist.
23 | 
24 | ## How it works
25 | 
26 | Given the following input:
27 | 
28 | ```css
29 | .container {
30 |   width: 100%;
31 |   padding: 3rem;
32 | }
33 | 
34 | .full-width {
35 |   width: 100%;
36 | }
37 | ```
38 | 
39 | This tool would output:
40 | 
41 | ```css
42 | .w100 {
43 |   width: 100% !important;
44 | }
45 | 
46 | .container {
47 |   padding: 3rem;
48 | }
49 | ```
50 | 
51 | ### Class name generation
52 | 
53 | We could have pluggable algorithms to generate the class names (like [CSS Modules][css-modules] does), so `w100` could be a unique id instead, like `_15QFk`.
54 | This can be also a great way to integrate the output generated by `atomify` with JavaScript inline styles.
55 | 
56 | ### `!important`
57 | 
58 | You can opt-out but it's the only way to enforce the concept of immutable styles in CSS.
59 | 
60 | ## Usage
61 | 
62 | ```sh
63 | $ atomify --help
64 | 
65 | Usage: atomify input.css > output.css
66 | 
67 | Options:
68 |   -v    --version           Display current software version
69 |   -h    --help              Display software help and usage details
70 |         --not-so-important  Do not append `!important` at the end of every rule
71 | ```
72 | 
73 | ## Questions to be answered
74 | 
75 | * Is a build tool a good way to approach this?
76 | * How debugging would work?
77 | * How to generate a proper report for the compiled file?
78 | * How to sync dev vs. prod markup?
79 | * How to handle media queries?
80 | * How to use the output with JavaScript inline styles?
81 | 
82 | ## Contribute
83 | 
84 | Feel free to open an issue to give suggestions!
85 | 


--------------------------------------------------------------------------------