Atomic styles

[heapwolf]

Created an atomic-styles branch where module styles are included . A browserify transform handles compiling and insert-css handles adding it to the body of the document. The source for global styles (such as css-reset, and variables, etc) are located at app/styles.

Because the styles are injected, there is a Flash of Unstyled Content. There should be some kind of remedy for this sort of issue. /cc @OscarGodson @Techwraith

[heapwolf]

Hmm... maybe a page loader? Ew.

[OscarGodson]

@dadambickford and I had a hell of a time getting our CSS to work in an "atomic" way. Our CSS is modular, but not atomic since Atomify doesn't suppot SASS and SASS itself doesn't handle CSS like Node does with require in that if you @import X 10x, you get that CSS 10x. CSS should work the way you seem to want to use it and the way we wanted to use it, but AFAIK, we can't get it to work that way.

Would be amazing to do like:

a.scss

@import 'button';
.a-module {
  color: red;
}

b.scss

@import 'button';
.b-module {
  color: green;
}

button.scss

.button {
  background: blue;
}

and get output.css like

.button {
  background: blue;
}
.a-module {
  color: red;
}
.b-module {
  color: green;
}

But that doesn't really work. We instead use a naming convention to make it obvious what module and stuff it is. @dadambickford can go into more detail about that naming convention.