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 Guidelin.es and Primer CSS Guidelines

CSS/LESS Guidelines

Syntax

• two space indent
• max. 80 characters per line

Selector

[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

Syntax

• 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.