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... -->