Code Standards

This page outlines some basic code formatting conventions used in Indigo.

HTML Guide

  • Set your text editor to use tabs with 4 spaces.
  • Indent nested HTML elements.
  • Use double quotes for attributes.
  • Add a new line at the end of files.
HTML Guide

CSS Guide

  • Set your text editor to use tabs with 4 spaces.
  • Component class names should follow the BEM (Block, Element, Modifier) naming convention.
  • Indigo components class should be prefixed with indi- in order to namespace the library.
  • Do not include vendor prefixes. Autoprefixer automatically adds these when the CSS is compiled.
  • Indigo does not use a global CSS reset or normalize.
  • List mixins before properties.
  • Alphabetize properties within selectors.
  • Add a new line between blocks.
  • Add a new line at the end of files.
  • Watch for console errors during development. SCSS lint settings are defined in .sass-lint.yml.
CSS BEM Example
HTML BEM Example

SCSS Guide

Do
  • Do nest media queries and environmental modifiers in the selector.
Don't
  • Don’t nest elements inside of the block.

Browser Standards

Indigo is built to support features found on modern browsers:

  • Internet Explorer 11+ *
  • Google Chrome 58+
  • Mozilla Firefox 53+
  • Apple Safari 7+

Components are designed to gracefully degrade in older browsers, resulting in limited functionality with a diminished user experience.

* IE browsers lower than Edge 13 do not have native SVG sprite support. To support these browsers add the svg4everybody external-link library to your project.

Older Browsers

Indigo does not support IE versions 10 and prior.

A variety of devices and operating systems will be used to test the supported browsers. Support is not limited to these specific operating systems. The desktop browser versions above are supported regardless of the particular device or operating system on which they run.