Best practices

##Best practices

####Using your market colors

• If your project is publishing on only one site, it's more efficient to add Hex codes directly to your properties in CSS. Check out sass/_site-colors.css to find your primary and accent Hex codes.
• If your project is publishing on more than one site, use the following classes to color an element. scripts/base.js will look for the publication URL and pre-defined classes to apply the correct market color or background-color to that element.
  • .hc-primary-color
  • .hc-accent-color
  • .hc-primary-background
  • .hc-accent-background Note: Changing publicationUrl: 'http://www.mcclatchydc.com/ to a market URL of interest will allow you to test other market colros locally.

####Writing Newsgate-safe classes One challenge in Newsgate is the possibility that its stylesheets could change significantly with updates. Below are a few tips to prevent updates from breaking your project:

• Use classes to style common tags like <p>, <h1>, <h2>, <h3>, <h4>, <h5> instead of styling the tag itself.
• Use hc- or another prefix for classes to ensure they never override classes established in Newsgate.
• Use the .reset class
  • CSS: Add your class to the .reset list at the top of your stylesheet.
  • Sass: Add @extend .reset to the top of your class's properties.