Marcus Thornton Marcus Thornton - 2 months ago 6
CSS Question

Where is the bootstrap-sass color codes?

I'm using bootstrap-sass (3.2.0.0). I was following a tutorial and I used the following code in

app/assets/stylesheets/scaffolds.css.scss
.

.timestamp {
color: $grayLight;
}


The result was an error indicating that undefied valuable $grayLight. And I found a link says the naming has changed from $grayLight to $gray-light.

I sought on the internet for the documentation regarding to the defined colors but I failed to found it. I think this kind of documentation should exist. Totally no idea which color code can be used.

Even I used
find . -type f -exec grep -H "gray-light" {} \;
there is no such file defines the color code.

Answer

First of all, make sure you're browsing the gem source... bundle open bootstrap-sass. Then browse to: vendor/assets/stylesheets/bootstrap/_variables.scss

Reproducing the relevant section here for your convenience:

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-darker:            lighten(#000, 13.5%) !default; // #222
$gray-dark:              lighten(#000, 20%) !default;   // #333
$gray:                   lighten(#000, 33.5%) !default; // #555
$gray-light:             lighten(#000, 60%) !default;   // #999
$gray-lighter:           lighten(#000, 93.5%) !default; // #eee

Note: this is from bootstrap-sass v3.1.0.2 so may have changed in 3.2.0.0 somewhat.

I find the bootstrap-sass gem's SCSS files very easy to read so I jump into the source on this one quite often. Good luck!

Comments