Guidelines for Ignite

Ignite is based on modern coding styles and syntax. You can see a summary of these below.

This Guideline is a summary of different detailed Guidelines like CSS and Primer CSS Guidelines

CSS/LESS Guidelines


  • two space indent
  • max. 80 characters per line


[selector] {
  [property]: [value];
  • related selectors on the same line; unrelated selectors on new lines;
  • a space before our opening brace ({);
  • properties and values on the same line;
  • a space after our property–value delimiting colon (:);
  • each declaration on its own new line;
  • the opening brace ({) on the same line as our last selector;
  • our first declaration on a new line after our opening brace ({);
  • our closing brace (}) on its own new line;
  • each declaration indented by two (2) spaces;
  • a trailing semi-colon (;) on our last declaration.

HTML Guidelines


  • four tab indent
  • Avoid writing closing tag comments, like <!-- /.element -->. This just adds to page load time.
    Plus, most editors have indentation guides and open-close tag highlighting.
  • Avoid trailing slashes in self-closing elements. For example: <br>, <hr>, <input>, <img>.
  • Avoid values in boolean attributes. For example: disabled, checked, required.

Don't mix HTML and CSS

HTML and CSS should be treated as two independent things: HTML structures the Website and CSS adds the styling. Therefore separate them consistently.

Avoid style="..." and <style>-tags in your HTML.

Write Smart

Avoid unnecessary elements. It has a positive effect on the readability and page load time.

<!-- Bad --> <span class="avatar"> <img src="..."> </span> <!-- Good --> <img class="avatar" src="...">