Hummingbird SCSS conventions

hbscssconventions.md

Since we needed to clean up our scss files anyways, here are a few conventions that all style files should follow. This appends to any file stored in app/assets/stylesheets

ToDo-List

[] Split up layout into multiple sections (maybe)

Structure

/base Core style files
/modules Variable declarations and globally used modules
/partials Styles used on a specific part of the site
/rails_admin Well... Rails Admin stuff

Conventions

• Leave an empty line above every selector, unless it is directly nested under a parent selector.
• Leave one empty line between the extend declarations and the actual style declarations of a selector.
• No empty line between style declararions and media queries.
• These conventions are ment to make the file more readable. Empty lines may be omitted if there's hardly anything in a selector and they'd just bloat the code.

Example

.library-container {
  @extend .container; // No new line under extend here because there's hardly any content
  padding: 10px;

  .panel { // New line above the nested selector
    @media (max-width: 500px) { // No new line if directly nested or media query
      margin-bottom: -60px;
    }
  }
} // Empty line between multiple selectors

.episode-increment {
  @extend .fa;
  @extend .fa-angle-up; // Empty line between extends and style declarations

  position: absolute;
  left: 0;
  padding: 10px;
  top: -9px;
  font-size: 20px;
  transition: opacity .20s ease-in-out;
  opacity: 0;
  
  &:hover { // Empty line between declarations and child selector
    color: $orange;
  }
}
...