From 7a995d17ae9b1e53d32fb7bfce69988583fe6b60 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 21 Aug 2017 20:27:07 -0700 Subject: [PATCH 01/11] Stub out new Theming page --- _data/nav.yml | 1 + docs/4.0/getting-started/theming.md | 114 ++++++++++++++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 docs/4.0/getting-started/theming.md diff --git a/_data/nav.yml b/_data/nav.yml index 784ec9a7334a..1ddd28022c92 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -5,6 +5,7 @@ - title: Contents - title: Browsers & devices - title: JavaScript + - title: Theming - title: Options - title: Build tools # - title: Best practices # TODO: Write this content diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md new file mode 100644 index 000000000000..5861058e90a1 --- /dev/null +++ b/docs/4.0/getting-started/theming.md @@ -0,0 +1,114 @@ +--- +layout: docs +title: Theming Bootstrap +description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. +group: getting-started +toc: true +--- + +## Introduction + +In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our `dist` files. With some effort, one could completely redesign the look of Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different approach. + +Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There's no more dedicated theme stylesheet anymore; instead, you can enable the built-in theme to add gradients, shadows, and more. + +## Sass + +Utilize our source Sass files to take advantage of variables, maps, mixins, and more. + +### File structure + +Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you've downloaded our source files or are using package manager, you'll have a file structure that looks like this: + +{% highlight plaintext %} +your-project/ +├── scss +│ └── custom.scss +└── node_modules/ + └── bootstrap + ├── js + └── scss +{% endhighlight %} + +In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins. + +{% highlight scss %} +// Custom.scss +// Option A: Include all of Bootstrap + +@import "node_modules/bootstrap/scss/bootstrap"; +{% endhighlight %} + +{% highlight scss %} +// Custom.scss +// Option B: Include parts of Bootstrap + +// Required +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins"; + +// Optional +@import "node_modules/bootstrap/scss/reboot"; +@import "node_modules/bootstrap/scss/type"; +@import "node_modules/bootstrap/scss/images"; +@import "node_modules/bootstrap/scss/code"; +@import "node_modules/bootstrap/scss/grid"; +{% endhighlight %} + +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 Bootstrap under the `// Optional` section as needed. + +### Variable defaults + +Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile. + +For example, to change out the `color` and `background-color` for the ``, you'd do the following: + +{% highlight scss %} +$body-color: $gray-600; +$body-bg: $gray-900; +{% endhighlight %} + +Do the same for any variable in `scss/_variables.scss` you need to override. + +### Maps and loops + +Bootstrap 4 includes a handful of Sass maps, key value pairs that make it easier to generate families of related CSS. We use Sass maps for our colors, grid breakpoints, and more. Just like Sass variables, all Sass maps include the `!default` flag and can be overridden and extended. + +For example, to modify an existing color in our `$theme-colors` map, add the following to your custom Sass file: + +{% highlight scss %} +$theme-colors: ( + primary: $red, + danger: $orange +); +{% endhighlight %} + +**TODO:** +- Adding an option +- Removing an option (replacing the map wholesale) + +### Functions + +**TODO:** +- Are these even considered part of the theme-ability of Bootstrap? Should this fall elsewhere? + + +## Sass options + +**TODO:** +- pull in the `options.md` section here +- create a redirect from there + +## Colors + +**TODO:** +- pull in the `options.md` section here +- add a theme-colors customization option +- fallback variables +- mentino component modifiers get changed + +## Components + +**TODO:** +- how to change component mixins? From ede0a9e84c4b138100e62b6ca445605297fd1819 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:16:46 -0700 Subject: [PATCH 02/11] port latest from options for default vars --- docs/4.0/getting-started/theming.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 5861058e90a1..4f201c88da3e 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -60,16 +60,22 @@ With that setup in place, you can begin to modify any of the Sass variables and ### Variable defaults -Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass even after that original variable's been defined. Copy and paste variables as needed, modify the values, remove the `!default` flag, and recompile. +Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap'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 Bootstrap. -For example, to change out the `color` and `background-color` for the ``, you'd do the following: +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 Bootstrap's Sass files. + +Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm: {% highlight scss %} -$body-color: $gray-600; -$body-bg: $gray-900; +// Your variable overrides +$body-bg: #000; +$body-color: #111; + +// Bootstrap and its default variables +@import "node_modules/bootstrap/scss/bootstrap"; {% endhighlight %} -Do the same for any variable in `scss/_variables.scss` you need to override. +Repeat as necessary for any variable in Bootstrap, including the global options below. ### Maps and loops From 3983dddebc909f3d8094b2e239c1156d4c9895ea Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:20:42 -0700 Subject: [PATCH 03/11] port over variable options list --- docs/4.0/getting-started/theming.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 4f201c88da3e..d52f6e260be7 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -102,9 +102,20 @@ $theme-colors: ( ## Sass options -**TODO:** -- pull in the `options.md` section here -- create a redirect from there +Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. + +You can find and customize these variables for key global options in our `_variables.scss` file. + +| Variable | Values | Description | +| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | +| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). | +| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | +| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | +| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | +| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | +| `$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. | ## Colors From f5eec1f6e3d5be39631197baedec7f453e5e05ad Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:20:58 -0700 Subject: [PATCH 04/11] bring over colors section --- docs/4.0/getting-started/theming.md | 78 ++++++++++++++++++++++++++++- 1 file changed, 77 insertions(+), 1 deletion(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index d52f6e260be7..144282e57210 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -117,7 +117,7 @@ You can find and customize these variables for key global options in our `_varia | `$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. | -## Colors +## Color **TODO:** - pull in the `options.md` section here @@ -125,6 +125,82 @@ You can find and customize these variables for key global options in our `_varia - fallback variables - mentino component modifiers get changed +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. + +
+ {% for color in site.data.colors %} + {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %} +
+
{{ color.name | capitalize }}
+
+ {% endunless %} + {% endfor %} +
+ +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. + +
+ {% for color in site.data.theme-colors %} +
+
{{ color.name | capitalize }}
+
+ {% endfor %} +
+ +### Grays + +An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. + +
+
+ {% for color in site.data.grays %} +
{{ color.name | capitalize }}
+ {% endfor %} +
+
+ +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. + ## Components **TODO:** From f62efb135d0378a539698ffe175666f7cf496e4b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:21:32 -0700 Subject: [PATCH 05/11] nuke the options page, add redirect from it to new theming page --- docs/4.0/getting-started/options.md | 121 ---------------------------- docs/4.0/getting-started/theming.md | 1 + 2 files changed, 1 insertion(+), 121 deletions(-) delete mode 100644 docs/4.0/getting-started/options.md diff --git a/docs/4.0/getting-started/options.md b/docs/4.0/getting-started/options.md deleted file mode 100644 index 5095997e3465..000000000000 --- a/docs/4.0/getting-started/options.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -layout: docs -title: Customization options -description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. -group: getting-started -toc: true ---- - -## Customizing variables - -Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap'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 Bootstrap. - -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 Bootstrap's Sass files. - -Here's an example that changes the `background-color` and `color` for the `` when importing and compiling Bootstrap via npm: - -{% highlight scss %} -// Your variable overrides -$body-bg: #000; -$body-color: #111; - -// Bootstrap and its default variables -@import "node_modules/bootstrap/scss/bootstrap"; -{% endhighlight %} - -Repeat as necessary for any variable in Bootstrap, including the global options below. - -## Global options - -Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. - -You can find and customize these variables for key global options in our `_variables.scss` file. - -| Variable | Values | Description | -| --------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | -| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/). | -| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. | -| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. | -| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. | -| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. | -| `$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. - -
- {% for color in site.data.colors %} - {% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %} -
-
{{ color.name | capitalize }}
-
- {% endunless %} - {% endfor %} -
- -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. - -
- {% for color in site.data.theme-colors %} -
-
{{ color.name | capitalize }}
-
- {% endfor %} -
- -### Grays - -An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project. - -
-
- {% for color in site.data.grays %} -
{{ color.name | capitalize }}
- {% endfor %} -
-
- -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. diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 144282e57210..aac906f71ba9 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -4,6 +4,7 @@ title: Theming Bootstrap description: Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and component changes. group: getting-started toc: true +redirect_from: "/docs/4.0/getting-started/options/" --- ## Introduction From 4df1f2260168e592326a99dbffd2390a423b3768 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:26:02 -0700 Subject: [PATCH 06/11] quote those to match source code --- docs/4.0/getting-started/theming.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index aac906f71ba9..f40ae51f47c6 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -86,8 +86,8 @@ For example, to modify an existing color in our `$theme-colors` map, add the fol {% highlight scss %} $theme-colors: ( - primary: $red, - danger: $orange + "primary": $red, + "danger": $orange ); {% endhighlight %} @@ -186,17 +186,17 @@ Within `_variables.scss`, you'll find our color variables and Sass map. Here's a {% 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 + "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 %} From 67f73dc51df057d7c69c3bb9831577c0c9c4f80d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:54:24 -0700 Subject: [PATCH 07/11] add new thing to a map --- docs/4.0/getting-started/theming.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index f40ae51f47c6..cc5bdfe7d389 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -91,9 +91,13 @@ $theme-colors: ( ); {% endhighlight %} -**TODO:** -- Adding an option -- Removing an option (replacing the map wholesale) +To add a new color to `$theme-colors`, add the new key and value: + +{% highlight scss %} +$theme-colors: ( + "custom-color": #900 +); +{% endhighlight %} ### Functions From ecaae86ebbd1b88bc6589432d378f7f246bd2ef1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 12:54:40 -0700 Subject: [PATCH 08/11] functions aww yeah --- docs/4.0/getting-started/theming.md | 47 +++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index cc5bdfe7d389..04ecb7a3c6bc 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -101,9 +101,52 @@ $theme-colors: ( ### Functions -**TODO:** -- Are these even considered part of the theme-ability of Bootstrap? Should this fall elsewhere? +Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We've included three functions for getting values from the color maps: + +{% highlight scss %} +@function color($key: "blue") { + @return map-get($colors, $key); +} + +@function theme-color($key: "primary") { + @return map-get($theme-colors, $key); +} + +@function gray($key: "100") { + @return map-get($grays, $key); +} +{% endhighlight %} + +These allow you to pick one color from a Sass map much like how you'd use a color variable from v3. + +{% highlight scss %} +.custom-element { + color: gray("100"); + background-color: theme-color("dark"); +} +{% endhighlight %} + +We also have another function for getting a particular _level_ of color from the `$theme-colors` map. Negative level values will lighten the color, while higher levels will darken. + +{% highlight scss %} +@function theme-color-level($color-name: "primary", $level: 0) { + $color: theme-color($color-name); + $color-base: if($level > 0, #000, #fff); + $level: abs($level); + + @return mix($color-base, $color, $level * $theme-color-interval); +} +{% endhighlight %} + +In practice, you'd call the function and pass in two parameters: the name of the color from `$theme-colors` (e.g., primary or danger) and a numeric level. + +{% highlight scss %} +.custom-element { + color: theme-color-level(primary, -10); +} +{% endhighlight %} +Additional functions could be added in the future or your own custom Sass to create level functions for additional Sass maps, or even a generic one if you wanted to be more verbose. ## Sass options From 960802bff10fdb854417577f6837c2a58825aab2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 13:58:09 -0700 Subject: [PATCH 09/11] add components section, remove todos --- docs/4.0/getting-started/theming.md | 47 ++++++++++++++++++++++++----- 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index 04ecb7a3c6bc..b74a8b38dfa9 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -167,12 +167,6 @@ You can find and customize these variables for key global options in our `_varia ## Color -**TODO:** -- pull in the `options.md` section here -- add a theme-colors customization option -- fallback variables -- mentino component modifiers get changed - 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 @@ -251,5 +245,42 @@ Add, remove, or modify values within the map to update how they're used in many ## Components -**TODO:** -- how to change component mixins? +Many of Bootstrap'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 `$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 Bootstrap'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., `.btn`) while style variations are confined to modifier classes (e.g., `.btn-danger`). These modifier classes are built from the `$theme-colors` map to make customizing the number and name of our modifier classes. + +Here are two examples of how we loop over the `$theme-colors` map to generate modifiers to the `.alert` component and all our `.bg-*` background utilities. + +{% highlight scss %} +// Generate alert modifier classes +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6)); + } +} + +// Generate `.bg-*` color utilities +@each $color, $value in $theme-colors { + @include bg-variant('.bg-#{$color}', $value); +} +{% endhighlight %} + +### Responsive + +These Sass loops aren't limited to color maps, either. You can also generate responsive variations of your components or utilities. Take for example our responsive text alignment utilities where we mix an `@each` loop for the `$grid-breakpoints` Sass map with a media query include. + +{% highlight scss %} +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + .text#{$infix}-left { text-align: left !important; } + .text#{$infix}-right { text-align: right !important; } + .text#{$infix}-center { text-align: center !important; } + } +} +{% endhighlight %} + +Should you need to modify your `$grid-breakpoints`, your changes will apply to all the loops iterating over that map. From 0071bf52798515877bf1797e4332a11d92f1f7bb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Oct 2017 14:07:38 -0700 Subject: [PATCH 10/11] update nav --- _data/nav.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/_data/nav.yml b/_data/nav.yml index 1ddd28022c92..96eeba2b5d0d 100644 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -6,7 +6,6 @@ - title: Browsers & devices - title: JavaScript - title: Theming - - title: Options - title: Build tools # - title: Best practices # TODO: Write this content - title: Webpack From bb988196ba19b9d1926e09841d3c9ac46c06bb5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Oct 2017 20:43:47 -0700 Subject: [PATCH 11/11] change away from vars --- docs/4.0/getting-started/theming.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/4.0/getting-started/theming.md b/docs/4.0/getting-started/theming.md index b74a8b38dfa9..d03a25422403 100644 --- a/docs/4.0/getting-started/theming.md +++ b/docs/4.0/getting-started/theming.md @@ -86,8 +86,8 @@ For example, to modify an existing color in our `$theme-colors` map, add the fol {% highlight scss %} $theme-colors: ( - "primary": $red, - "danger": $orange + "primary": #0074d9, + "danger": #ff4136 ); {% endhighlight %}