CSS LESS Guidelines

This project utilizes LESS, which is a dynamic stylesheet language that extends and compiles to CSS. It has a lot of benefits such as variable support and the ability to nest styles. Take advantage of these patterns. Checkout lesscss.org for more information about what LESS can do.

Structure of Stylesheets Directory

• application.css.less imports all the other less files in the correct order for it to compile without errors.
  • External dependencies come first, followed by files holding styles that are site-wide. Files holding page specific styles come last.
• bootstrap3.less holds all the twitter Bootstrap classes that are overridden to fit the theme of Bonnie.
  • Place a comment above your styles to denote the view to which they apply.
  • The order of the styles should reflect the order of the imports in application.css.less.
• variables.less contains LESS variables specific to Bonnie used in the other less files.
  • Place a comment above your variables to denote the view to which they apply.
  • The order of the variable sections should reflect the order of the imports in application.css.less.
• mixins.less contains mix-ins that can be used across the application to get repeatable effects.
  • This includes classes that are used on multiple pages.
• The remaining files are page specific styles.

Class Names

• Use dashed names (e.g. .dashboard-data)
• Try to use semantic names that describe the element on the page that is being styled (e.g. .measure-col) or the role the class is playing (e.g. .btn-default)
• We are using Twitter Bootstrap, so our naming conventions should follow theirs whenever possible.
  • For example, use the form .[name] .[name]-[status], where [name] is the name of the element (btn, text, etc.) and [status] is a descriptor indicating something what changed by the second class (e.g. .btn .btn-success).

Id Names

• Use camel case (e.g. #thisIsAnId)
• Only use ids when absolutely necessary.

LESS Variables

• If Twitter Bootstrap defines a variable for something, use or override their variable over creating your own.
  • @brand-primary for the standard color
  • @brand-success for success color (usually green)
• Use dashed names prefixed by an @ (e.g. @gray-lighter)
• Always define them at the top of the file
• Name them to describe what the variable is controlling
• Use them for any value that will be commonly reused (e.g. color)
• Use LESS functions, when appropriate. For example, use darken() or lighten() when transforming a color to a different shade.

Bootstrap

The Bootstrap classes .row, .pull-right, and .pull-left should be placed directly in the markup, while other classes such as .col-sm-2 should be used only in page specific files, hidden behind a semantic class. The goal of this is to make the markup easily readable by everyone

Other Notes

• Remove deprecated styles as you discover it or as you remove old HTML.
• Do not put styles in the HTML using the style attribute. All styles should be in .less file.