Colors

Bootstrap Defaults

One of Bootstrap's most convenient features is their color utilities. In the NYC Core Framework, colors are located in scss/_a-global-variables.scss.

The color variables under A. Bootstrap colors, are copied directly from bootstrap/scss/_variables.scss file. Having these variable here allows us to override them before importing Bootstrap's depencencies in scss/_b-bootstrap-imports.scss.

For accessibility, we included a boolean variable $accessible-colors and set it to true. Directly below that variable, you'll find a set accessible colors which override the defaults variables above:

                                
                                    // If $accessible-colors is true, use accessible palette instead

                                    $accessible-colors: true;

                                    @if $accessible-colors {
                                        $gray-600: #777677;
                                        $blue: #0029F7;
                                        $indigo: #8f51f4;
                                        $purple: #8762cd;
                                        $pink: #e8006d;
                                        $red: #ea172b;
                                        $orange: #c45500;
                                        $green: #21883f;
                                        $teal: #0c8763;
                                        $cyan: #008299;
                                    }
                                
                            

Theme Colors

In scss/_a-global-variables.scss, locate B. Theme Colors. This is where you customize your theme's main color pallette. If you're familiar with Bootstrap, the naming convention below will look familar.

The following five color variables are the main colors of your theme. These colors are already included in Bootstrap's $theme-colors map. Change these values to customize your theme colors.

                                
                                   $primary: #181A7B;
                                   $secondary: #3B6CF6;
                                   $info: #A513B6;
                                   $dark: #0A1438;
                                   $light: #e6ecf7;
                                
                            

You are not limited to using only these colors. Bootstrap also includes colors ideal for alerts and validation:

It is possible to add new colors to the $theme-colors map. For example, we've added "white" and "black", allowing you to make buttons white or black with .btn-white and .btn-black. To add a new color to the map, create a variable then add it:

                                
                                    $my-new-color: #A513B6;

                                    $theme-colors: (
                                        "white": $white,
                                        "black": $black,
                                    
                                        // My New Color
                                        "my-new-color" : $my-new-color
                                    );
                                
                            

SASS Tip As with any visual art, a limited palette is best. Every color you add to the map will increase the size of your stylesheet by roughly 3 or 4 k.

Sitewide Grays

We took the liberty of adjusting Bootstrap's sitewide use of their gray palette. Locate C. Sitewide grays in scss/_a-global-variables.scss. These adjustments are strictly opinionated — feel free to make adjustments as needed.