Extending Bootstrap

Boomstrap contains an incredible collection of additions to Bootstrap. Among this collection are reusable user interface components designed specifically to work within the Boomtown CRM platform.

Javascript / Angular

We developed Boomstrap to work with jQuery / Bootstrap.js or with Angular.

LESS Syntax

• Use soft-tabs with a two space indent.
• Put spaces after : in property declarations.
• Put spaces before { in rule declarations.
• Order properties in alphabetical order.

Here is an example of good syntax:

.dog-brutus {
  &:extend(.dog);
  background: @gray;
  color: @danger;
  padding: 12px;
  .text-overflow();
}
      

Pixels vs. Ems

Use px for font-size, because it offers absolute control over text. Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

Class Naming + JS

Never reference js- prefixed class names from CSS files. js- are used exclusively from JS files.
Use the is- prefix for state rules that are shared between CSS and JS.

Specificity (classes vs. ids)

Elements that occur exactly once inside a page should use IDs, otherwise, use classes. When in doubt, use a class name.

• Good candidates for ids: header, footer, modal popups.
• Bad candidates for ids: navigation, item listings, item view pages (ex: issue view).

When styling a component, start with an element + class namespace (prefer class names over ids), prefer direct descendant selectors by default, and use as little specificity as possible. Here is a good example:

Javascript Style Guide

BoomTown uses the 'Airbnb Javascript Style Guide'. You can find our forked copy here.