CSS Guidelines

Notes

• Don't use the asset pipeline. Use sass @import (see app/assets/stylesheets/application.scss).

• New files should prefixed with an underscore.

• Every selector should have a home. See File Structure below.

File Structure

stylesheets/
  animations/
  components/
  overlays/
  screens/
  ui/

Each of these sub-directories have a _base.scss file. Base should @import all files in that directory. application.scss @imports all the Base files.

animations/ For CSS keyframes and the classes that implement them.

components/ Styles for the Ember components.

overlays/ Styles specific to each overlay.

screens/ Styles for individual screens. Dashboard screen, Profile screen, etc.

ui/ Styles for UI bits that are common but not actual Ember components.

z-index

All z-index management is done in stylesheets/_z-index.scss

To specify a z-index:

1. Add a key and value to the $z-layers sass variable in _z-index.scss.
2. use the z() function.

.important-thing {
  z-index: z('important-thing');
}

Thoughts behind the way the CSS was written

Think about independent components and use the name of that component as a prefix for all your classes. For example, the "comment board" widget.

.comment-board {}
.comment-board--hidden {}
.comment-board-heading {}
.comment-board-form {}
.comment-board-form--editing {}
.comment-board-action-buttons {}

-- is taken from BEM CSS. Dash dash means that class is a modifier.