1.2. Colors

Bootstrap UI uses Bootstrap’s @brand-primary variable to color the entire UI. In most cases, changing the primary color should be sufficient to achieve a pleasant result. If not, the UI can be heavily customized via Bootstrap’s variables: see src/less/config/variables.less and bower_components/bootstrap/less/variables.less for more.

Example

@brand-primary
@brand-accent
@brand-success
@brand-info
@brand-warning
@brand-danger
@gray-base
@gray-darker
@gray-dark
@gray
@gray-light
@gray-lighter
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-primary"></div> @brand-primary</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-accent"></div> @brand-accent</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-success"></div> @brand-success</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-info"></div> @brand-info</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-warning"></div> @brand-warning</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--brand-danger"></div> @brand-danger</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-base"></div> @gray-base</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-darker"></div> @gray-darker</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-dark"></div> @gray-dark</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray"></div> @gray</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-light"></div> @gray-light</div>
<div class="kss__color-swatch"><div class="kss__color-swatch__color kss__color-swatch--gray-lighter"></div> @gray-lighter</div>