Style Guide

@jessedoud @jonlemmon @matthewbartlett @richarddbartlett

Great reading, making my way through now. First thought: gee whiz oh boy all these sites have such nice typography!

Second thought: yes I'd love to be much more oocss-ish, but how on earth would we make that transition?

refactoring the css to meet the above sounds like an arduous kung fu type task for a young grasshopper. Think of how kick-ass your css will be after doing this!

@richarddbartlett we don't rewrite the site in all these new standards.. but we do write the style guide in ideal code. As long as the style guide provides a clear example of what to do.. the production code will get better rather than worse.

The craziest of all the things I want to suggest doing is use the Foundation CSS framework. It's very much like bootstrap but built in SASS.. which I think is actually very important so that we can propoerly @import things.

Thanks for posting this Rob, Learning a lot from this. It all is common sense but it's great to read it and think about moving toward it.

I've started reading. Thanks Rob. The atomic structure sounds great.

This is great, thanks for doing this work rob. I think if we woke up tomorrow, and our css was setup like this, I would weep with tears of joy. OOCSS is a no brainer (including the media element). I hadn't come across BEM before, but I those conventions would be super helpful. I can totally wrap my mind around creating a style guide (maybe in a workshop), but how we would move to the atomic file structure I'm a bit hazy on. It doesn't appear like it would be an iterative, organic process, but more of a one off super-lift project that seems kind of daunting. Maybe you have better idea of how we would get there rob, because if we could, boy-o-boy, i really like the sound of the atom/inuit system.

It also seems like we would have to break up bootstrap into components or lose it all together in moving towards atomic. This alone would be a big lift. Though Foundation.css does seem like an improvement, not being written in LESS and all.
Railscast on Foundation

Though, to use BEM and atomic properly, in a global, holistic way, it looks to me like we would just use foundation for their grid. If we broke up all the little ui pieces that we would want out of foundation(submits, inputs, textareas) and rearranged them in the atomic structure, it would make it impossible to update foundation. We could just use foundation (or bootstrap really) as a starting point for styling these elements, but after we rearrange them, they would be ours to own, develop, and maintain. In my opinion this is fine. As a maturing app, I would expect us to begin to own our UI, while relying on a mobile-first grid is still quite appropriate.

Thanks for all the thinking on this @jessedoud.

I'm not sure how we make atomic file structure and use of a css framework work together... but I'm guessing that we'll find that if we just think of 'styles we created' vs 'styles from the framework' and just expect our own stuff to be in the atomic structure it might work out ok.

Looks great. Thanks for posting this Rob. I'm excited.

presentation by creator of atomic file structure http://15four.com/2013/05/29/atomic-design-some-thoughts-and-one-example/

I've implemented a skeleton atomic file structure. atomic.css is an import directory of all new files. If you haven't reviewed rob's links above, please do - we should all be on the same page to iterate css into this structure ideally using BEM and OOCSS. Let's all hold hands, close our eyes, and jump into a beautiful future.

@johnirving @jonlemmon @robertguthrie @hannahsalmon @richarddbartlett.

Thanks for the support people! As f**ing usual, Rob's way is best so lets do it.

Here is how we migrate to the new file structure:

1. Any new styles that are created should be added into the atomic structure, using OOCSS practices and BEM naming.
2. Any existing styles that you modify should be moved into atomic and refactored using OOCSS and BEM.
3. Create all new files in .sass, not .scss

It's an extra step, I know. And by the time some of us get to styling we want to be done with whatever task we're working on already and move on. But this is how we will get to the other side and if we all do it, it won't be that bad. Eventually everything will be migrated over and we can delete all the controller-specific css files and we'll all be better stylers. There will be some experimenting and we probably won't get it right immediately, especially with BEM, but that's okay, we can iterate. I'm specifically going to be an asshole during code reviews and I hope you will be too. But it's cool because I'm going to be really nice at all other times. Please bellow my name in the style of scott stapp if you're keen for any help.

@johnirving @jonlemmon @richarddbartlett @robertguthrie @hannahsalmon @matthewbartlett @aaronthornton