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