Spectre CSS

Customisation ​

Spectre CSS is designed with consistent design language, and is supported by a core list of SCSS variables:

Colors:

  • primary and secondary
  • grays
  • borders
  • background
  • controls
  • formatting

Units:

  • breakpoints
  • layout spacing
  • border radius
  • control sizes
  • control-padding
  • control icon size
  • control width
  • z-index

Fonts:

  • base
  • mono
  • fallback
  • asian
  • size

All variables include the !default flag, allowing you to override as needed.

Colors ​

#5755d9
Primary
#f1f1fc
Secondary
#32b643
Success
#ffb700
Warning
#e85600
Error
#303742
Dark
#66758c
Gray dark
#bcc3ce
Gray
#f7f8f9
Gray light
#fff
Light

Sizes ​

The default REM (root em) size in Spectre CSS is 20px.

Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to 20px, which is relatively easy to calculate.

Spectre uses 4px as the unit size. Sizes of components are based on the unit size.

Button mixins ​

There are 2 button variant mixins in _mixins.scss to generate different color variants.

scss
@mixin button-variant($color: $primary-color)
@mixin button-outline-variant($color: $primary-color)
scss
// filled button with the success color
.btn-success {
  @include button-variant($success-color);
}

// outlined button with the success color
.btn-outline-success {
  @include button-outline-variant($success-color);
}