Color Library

Below are general background color classes you can add to any element. —

Important Remember that the color library is not compiled with the core Front Street framework. So if you'd like to use the color library, remember to include frontstreet-colors.css in your project (see Installation). And if you'd like to create a few custom color classes of your own, see Customizations.

  • .bg-light #f2f2f2
  • .bg-dark #1b1b1b
  • .asphalt #34495e
  • .black #000000
  • .blue #00437f
  • .brown #825a2c
  • .concrete #95a5a6
  • .cream #f5d76e
  • .crimson #c3272b
  • .dark-blue #153f5a
  • .dark-brown #572f05
  • .dark-green #485a21
  • .dark-purple #5d3f6A
  • .forest #006442
  • .green #26a65b
  • .jungle #36b3a8
  • .mauve #7b726c
  • .orange #ff9624
  • .peach #f47983
  • .pearl #bca89d
  • .pink #de2e81
  • .pomegranate #e74c3c
  • .purple #78498e
  • .red #8f1d21
  • .royal #428bca
  • .slate-grey #7f8d9c
  • .silver #bdc3c7
  • .steel-blue #4b77Be
  • .teal #008080
  • .turquoise #36d7b7
  • .yellow #ecc11B
  • .wheat #b4ad8b
  • .white #ffffff

These colors can also be applied to text with the text-{color} classes.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero.