CSS.

1. if you are not yet familiar with the CSS structure, please do one of two things: 
--put the CSS you think you need into the wip.scss file and tag @MelSumner in your commit (I'll put it in the correct place)
--get to know the awesome organized awesomeness of the CSS. It might feel tight at first, like a new pair of shoes, but they will be awesome shoes after a while. 

2. Writing CSS Rules because I love you but I've chosen process. 
# keep specificity low. If you're getting really specific, I'm so sorry to have to be the one to tell you this, but you're wrong. 
# don't use IDs
# lowercase class names, please. 
# put classes in alphabetical order if you can. 
# put the properties in alpha-order. It's *usually* as easy as highlighting the properties and hitting F9. 
# give the component its name as a class and then scope the css to that component. don't give it IDs, stop ruining the world.
-- example: my-button component gets the class name .my-button and then the classes can be scoped in the scss. 
# write the CSS in a mobile-first way, and scope the media query/queries inside the class.  
-- example: 
  .my-button {
    width: 100%;
    padding: 0.1em;
    border: 1px solid $blue;
    @media screen and (min-width: 768px) {
      width: 50%;
    }
    @media screen and (min-width: 992px) {
      width: 25%;
    }
   }

3. Variables
# colors only go in the global/variables file. 
# how to name color variables: color first, then shade superlative
-- example: 
  $blue
  $blue-light
  $blue-lighter
  $blue-lightest
  $blue-dark 
  $blue-darker
  $blue-darkest

4. Typography
How to do vertical height: 
to calculate vertical height properly, the margin-top and margin-bottom should each be equal to the line-height.
for example, if the line-height is 1.2, then the margin-top and margin-bottom should be each set to 1.2. 
however, if you want more space above the heading than below it, then the margin-top should get 1.8em and margin-bottom should be 0.6em. 
since this extra vertical margin is typically desired for h1 & h2, we will use those here by default. 

To calculate font sizes, we will use Perfect Fourth. 
If you were to later decide to use a bigger body(base) font size, these will still scale perfectly. 
All you have to do is change the body(base) font size (and keep it in px, please). 

# put your base font size and line height in your body CSS and then LEAVE IT ALONE.  
-- example: 
body {
  font-size: 16px; //I'm happy to explain why this is okay to do now (in 2017)
  line-height: 1.2; //yes unitless line heights. and yes 1.2 by default. 
}

@locks
Here's my plan to get through this:

1. immediate freeze on all CSS changes
2. get these guidelines in a place where we can proper repo/share them
3. get our current CSS fixed in a spike over the next week
4. we need a proper chat about how all of these pieces fit together, I really need to know what they are if I am going to organize this in a way that will have any meaningful effect.
5. iterate.

There will be a lot of comments right now but it's the only way to communicate in code across time zones in a way that isn't forgotten.

Sitemap:

1. / -> website in middleman
2. /api/* -> ember-api-docs in ember
3. /builds/* -> builds in ember
4. guides.emberjs.com -> guides in middleman