Indigo Design System v1.2.0

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 Example
<ul title="HTML Example">
    <li>Set your text editor to use tabs with 4 spaces.</li>
    <li>Indent nested HTML elements.</li>
    <li>Use double quotes for attributes.</li>
    <li>Add a new line at the end of files.</li>
</ul>

CSS Guide

  • Set your text editor to use tabs with 4 spaces.
  • Component class names should follow the BEM (Block, Element, Modifier) naming convenetion.
  • 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 usa 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

.indi-block {

}

.indi-block--modifier {

}

.indi-block__element {

}

.indi-block__element--modifier {

}
HTML BEM Example
<ul class="indi-block indi-block--modifier">
    <li class="indi-block__element indi-block__element--modifier"></li>
</ul>

SCSS Guide

Elements should NOT be nested inside of the Block.

warning Don't Do This

.indi-block {

    .indi-block__element {
        /*This selector is too specific.*/
        /*Don’t nest elements inside of blocks.*/
    }
}

Media queries and environmental modifiers should be nested in the selector.

success Do This

.indi-block__element {

    @media screen and (min-width: $breakpoint) {

    }

    .indi-block--modifier & {
        /*This keeps element styles all together.*/
    }
}

Javascript

The component javascript used in the Indigo documentation site is meant to demonstrate presentational functionality. JS files are not intended for use in production.

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.