Colors

Many of Front's various components and utilities are built through a series of colors defined in a SASS map. This map can be looped over in SASS to quickly generate a series of rulesets.

Variable defaults

Every SASS variable in Front includes the !default flag allowing you to override the variable's default value in your own SASS without modifying Front's source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Front.

Variable overrides within the same SASS file can come before or after the default variables. However, when overriding across SASS files, your overrides must come before you import Front's SASS files.

Modify map

To modify an existing color in our $g-theme-colors map, add the following to your custom SASS file:

            
              $g-theme-colors: (
                "primary": #377dff,
                "danger": #de4437
              );
            
          

Add to map

To add a new color to $g-theme-colors, add the new key and value:

            
              $g-theme-colors: (
                "custom-color": #900
              );
            
          

Required keys

Front assumes the presence of some specific keys within SASS maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific SASS map's key is being used.

For example, we use the primary, success, and danger keys from $g-theme-colors for links, buttons, and form states. Replacing the values of these keys should present no issues, but removing them may cause SASS compilation issues. In these instances, you'll need to modify the SASS code that makes use of those values.

Functions

Front utilizes several SASS functions, but only a subset are applicable to general theming. We've included two functions for getting values from the color maps:

            
              @function color($hs-key: "primary") {
                @return map-get($g-theme-colors, $hs-key);
              }

              @function theme-color($hs-key: "accent") {
                @return map-get($g-theme-colors, $hs-key);
              }
            
          

These allow you to pick one color from a SASS map.

            
              .custom-element {
                background-color: theme-color("dark");
              }
            
          

We also have another function for getting a particular level of color from the $g-theme-colors map. Negative level values will lighten the color, while higher levels will darken.

Color contrast

One additional function we include in Front is the color contrast function, color-yiq. It utilizes the YIQ color space to automatically return a light (#fff) or dark (#111) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.

For example, to generate color swatches from our $g-theme-colors map:

            
              @each $color, $value in $g-theme-colors {
                .swatch-#{$color} {
                  color: color-yiq($value);
                }
              }
            
          

It can also be used for one-off contrast needs:

            
              .custom-element {
                color: color-yiq(#000); // returns `color: #fff`
              }
            
          

You can also specify a base color with our color map functions:

            
              .custom-element {
                color: color-yiq(theme-color("dark")); // returns `color: #fff`
              }
            
          

Colors

Front inherits the Bootstrap's $g-theme-colors colors map and modifies them with our alternatively picked colors. Front also includes several other colors which are located and can be modified in _variables.scss.

All colors

All colors available in Front, are available as SASS variables in our _variables.scss file.

Here's how you can use these in your SASS:

Here's how you can use these in your SASS:

            
              .alpha {
                color: $g-primary;
              }

              // From the SASS map with Bootstrap `color()` function {
              .beta {
                color: color("purple");
              }
            
          

Color utility classes are also available for setting color and background-color.

Theme colors

We use a subset of all colors (Bootstrap's method) to create a smaller color palette for generating color schemes, also available as SASS variables scss/_variables.scss file.

Add, remove, or modify values within the map to update how they're used in many other components.

Gray and light blue colors

An expansive set of gray and light blue variables and a SASS map in _variables.scss for consistent shades of gray and light blue across your project.

Add, remove, or modify values within the map to update how they're used in many other components.

Components

Many of Front's components and utilities are built with @each loops that iterate over a SASS map. This is especially helpful for generating variants of a component by our $g-theme-colors and creating responsive variants for each breakpoint. As you customize these SASS maps and recompile, you'll automatically see your changes reflected in these loops.

Modifiers

Many of Front's components are built with a base-modifier class approach. This means the bulk of the styling is contained to a base class (e.g., .u-badge) while style variations are confined to modifier classes (e.g., .u-badge-primary). These modifier classes are built from the $g-theme-colors map to make customizing the number and name of our modifier classes.

Here's an example of how we loop over the $g-theme-colors map to generate modifiers to the .u-badge component.

            
              // Generate alert modifier classes
              @each $color, $value in $g-theme-colors {
                .u-badge-#{$color} {
                  @include badge($value, $value);
                }
              }