diff options
| author | Mark Otto <[email protected]> | 2017-06-30 08:58:35 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-06-30 08:58:35 -0700 |
| commit | e51749e4a76148cac3c204fc24d14994c45a284e (patch) | |
| tree | 6f96151fe51f2d76cea41cca098545da73784b14 /docs/4.0/getting-started | |
| parent | f83c981d089d1b15159bb6646e15401a42563cd6 (diff) | |
| parent | 7cebaa8bb084bb82479a363415587c648af6c591 (diff) | |
| download | bootstrap-e51749e4a76148cac3c204fc24d14994c45a284e.tar.xz bootstrap-e51749e4a76148cac3c204fc24d14994c45a284e.zip | |
Merge pull request #22836 from twbs/colors-redux
v4: Colors redux
Diffstat (limited to 'docs/4.0/getting-started')
| -rw-r--r-- | docs/4.0/getting-started/options.md | 82 |
1 files changed, 80 insertions, 2 deletions
diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md index 30ef80c0c..4788c847a 100644 --- a/docs/4.0/getting-started/options.md +++ b/docs/4.0/getting-started/options.md @@ -13,8 +13,8 @@ Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following: {% highlight scss %} -$body-bg: $gray-dark; -$body-color: $gray-light; +$body-bg: $gray-900; +$body-color: $gray-600; {% endhighlight %} Do the same for any variable you need to override, including the global options listed below. @@ -35,3 +35,81 @@ You can find and customize these variables for key global options in our `_varia | `$enable-hover-media-query` | `true` or `false` (default) | ... | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). | | `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | + +## Color + +Many of Bootstrap'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. + +### All colors + +All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include. + +<div class="row"> + {% for color in site.data.colors %} + <div class="col-md-4"> + {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %} + <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> + {% endunless %} + </div> + {% endfor %} +</div> + +Here's how you can use these in your Sass: + +{% highlight scss %} +// With variable +.alpha { color: $purple; } + +// From the Sass map with our `color()` function +.beta { color: color("purple"); } +{% endhighlight %} + +[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`. + +{% callout info %} +In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below. +{% endcallout %} + +### Theme colors + +We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file. + +<div class="row"> + {% for color in site.data.theme-colors %} + <div class="col-md-4"> + <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> + </div> + {% endfor %} +</div> + +### Grays + +An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. + +<div class="row mb-3"> + <div class="col-md-4"> + {% for color in site.data.grays %} + <div class="p-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div> + {% endfor %} + </div> +</div> + +Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map: + +{% highlight scss %} +$colors: ( + red: $red, + orange: $orange, + yellow: $yellow, + green: $green, + teal: $teal, + blue: $blue, + pink: $pink, + purple: $purple, + white: $white, + gray: $gray-600, + gray-dark: $gray-900 +) !default; +{% endhighlight %} + +Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. |