Customize Figuration using Sass variables for global style preferences, easy theming, and component adjustments.
- Customizing Options
- Variable Defaults
- Global Options
- Component Sizes
- Contextual Colors
- Palette Variables
Whenever possible, avoid modifying Figurations’s core files. For Sass, that means creating your own stylesheet that imports Figuration so you can modify and extend it. Assuming you’ve downloaded our source files or are using a package manager, you’ll have a file structure that looks like this:
With that setup in place, you can begin to modify any of the Sass variables and maps in your
custom.scss. You can also start to add parts of Figuration under the
// Optional section as needed.
Every Sass variable, or setting, in Figuration includes the
!default flag allowing you to override the variable’s default value in your own Sass without modifying Figuration’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.
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 Figuration’s Sass files.
Here’s an example that changes the
color for the
<body> when importing and compiling Figuration via grunt:
Repeat as necessary for any variable in Figuration, including the global options below.
You can find and customize these variables for key global options in our
||Specifies the default spacer value used to programmatically generate the Spacing utilities.|
||Enables the generation of CSS classes for the grid system (e.g.
||Enables predefined style overrides used when printing.|
||Enables the generation of CSS classes for the palette color themes (e.g.
||Enables the generation of CSS classes for component sizes, and also for some utilites. (e.g.
||Enables the generation of CSS classes for breakpoint sizes that include the smallest breakpoint designator. (e.g.
The button, button group, pagination, form-control and input-group components all use the same base sizing settings for consitency.
By using a map, we can be sure the components are all the same height when horizontally aligned.
<select> Sizing Caveat
Currently there is a minor issue with vertical sizing and
<select> elements with Internet Explorer. IE will render
<select> elements slightly shorter in vertical height than other browsers.
This has not undergone stringent testing on mobile devices yet.
You can modify, remove, or add additional sizes, beyond the default sizing, by redefining the
$component-sizes variable and
Below is the default additional settings for reference. Try not to confuse the size designations (
lg, etc.) with the grid breakpoints designations.
Extend the default contextual color map with your own custom colors.
Yes, it is a substantial and confusing piece of SCSS, but allows for reasonable flexibility.
control-* keys are used by mainly by control items—specifically—buttons, button groups, pagination, progress bars, badges, and background context.
context-* keys are used for contextual items—specifically—tables, list groups, form validation, and alerts.
Conveying Meaning to Assistive Technologies
Please refer to the Accessiblity notes about conveying meaning with color.
Single Color Addition
You can also add a single color map without all the additional color mixing functions with something a bit simpler.
When enabled, any theme in the
$palette-themes map get CSS generated for each defined level for both text and background variants.
The default setting for the color levels to be generated is defined as the following.