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.

<p class="text-crimson">Donec rutrum, est vel posuere congue, arcu mauris euismod libero.</p>
<p class="text-blue">Donec rutrum, est vel posuere congue, arcu mauris euismod libero.</p>
<p class="text-forest">Donec rutrum, est vel posuere congue, arcu mauris euismod libero.</p>

<!-- And so on... -->