Theme Conventions

• @import all dependencies and their configuration in locations that reflect their scope of influence.

  • If an imported dependency only influences a single stylesheet, import and configure it in that stylesheet alone.

  • If an imported dependency influences a directory of sheets, import and configure it in that directory's _index.scss

  • If an imported dependency influences a directory and subdirectories, import and configure it in the most immediate parent's directory's _index.scss before importing subdirectory _index.scss files.

  • If an imported dependency influences more than one TLD, import the dependency in _import.scss and configure it in _config.scss.

• Do not rename or add directories without a strong, pragmatic reason.

• Variable names are semantic, and use all lowercase alphanumeric words separated by exactly one dash. (i.e. $width-tablet-max)

• Variables that represent common properties must have those properties as the first words.

    $width-sidebar;
    $width-image;
    $width-span;
  
    $height-footer;
    $height-navbar;
  
    $font-size-large;
    $font-size-mid;
  

  This convention may be ignored when setting variables declared by third party components.

• Comply with SMACSS, but prefer these conventions in the event the two sets of conventions conflict.

• Use the SCSS syntax, where all SCSS files end with the .scss extension

• Deploy with compass only.

• Make a new file in the appropriate location when a new set of styles pertaining to a particular module or concept is needed. e.g, if you are making a new module, make a new file just for it in module/. Grouped collections of modules may need a subdirectory.

• @import all files in any directory inside the _index.scss file in that same directory. Order the imports according to CSS declarations. But if you are really good with CSS, order should not matter. Always @import "<subdir>/_index.scss" in a parent directory's _index.scss