Skip to content

chore(docs): minor updates to the theming reference section #4224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 8, 2019
Merged

chore(docs): minor updates to the theming reference section #4224

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
33d1f39
chore(docs): minor updates to the theming reference section
tmorehouse Oct 8, 2019
87ecc73
Update README.md
tmorehouse Oct 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 28 additions & 12 deletions docs/markdown/reference/theming/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ colors, etc) adjust the custom BootstrapVue css generation.

## SASS variable defaults

Every Sass variable in Bootstrap v4 includes the `!default` flag allowing you to override the
variable’s default value in your own Sass without modifying Bootstrap and BootstrapVue's source SCSS
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
and BootstrapVue.
Every Sass variable in Bootstrap v4 and BootstrapVue includes the `!default` flag allowing you to
override the variable’s default value in your own Sass without modifying Bootstrap and
BootstrapVue's source SCSS 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 and BootstrapVue.

You will find the complete list of Bootstrap’s variables in `bootstrap/scss/_variables.scss`. Some
variables are set to `null`, these variables don’t output the property unless they are overridden in
Expand Down Expand Up @@ -82,6 +82,8 @@ docs for more details. All theme colors automatically become available as
Customize Bootstrap 4 with the built-in custom variables file and easily toggle global CSS
preferences with Bootstrap's `$enable-*` Sass variables.

### Bootstrap SASS variables

Some commonly used Bootstrap v4 variables are:

| Variable | Type | Default | Description |
Expand All @@ -96,6 +98,8 @@ Some commonly used Bootstrap v4 variables are:
Refer to [Bootstrap's theming](https://getbootstrap.com/docs/4.3/getting-started/theming/) docs for
additional Bootstrap v4 variable information.

### BootstrapVue SASS variables

BootstrapVue also defines several Sass variables for controlling BootstrapVue's custom CSS
generation. If you are not using these features in your project, you can disable the feature's CSS
generation to reduce the size of BootstrapVue's custom CSS bundle:
Expand All @@ -114,14 +118,16 @@ Note that BootstrapVue's custom SCSS relies on Bootstrap's SASS variables, funct
## Generating custom themes

To use your own theme and colors in BootstrapVue, you will need to create a `custom.scss` file in
your project, which you can include in your main app:
your project, which you can include in your main app `app.vue` file:

**Via template:**

```html
<style lang="scss">
// Import custom SASS variable overrides
@import 'assets/custom.scss';
// Import custom SASS variable overrides, or alternatively
// define your variable overrides here instead
@import 'assets/custom-vars.scss';

// Import Bootstrap and BootstrapVue source SCSS files
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';
Expand All @@ -130,17 +136,22 @@ your project, which you can include in your main app:
body {
margin: 0;
}

.my-widget {
color: var(--danger);
}
// ...
</style>
```

The `custom.scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's SCSS,
The `custom-vars.scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's SCSS,
will include your Bootstrap v4 variable overrides (i.e. colors, shadows, font sizes, breakpoints,
etc).

**Via app main entry point:**

Create an SCSS file with your custom theme variables:
Create an SCSS file with your custom theme variables which also impoerts Bootstrap and BootstrapVue's
SCSS:

```scss
// File: custom.scss
Expand All @@ -165,10 +176,14 @@ $bv-enable-table-stacked: false;
body {
margin: 0;
}

.my-widget {
color: var(--danger);
}
// ...
```

Then import that single SCSS file into your app code entry point:
Then import that single SCSS file into your main app code entry point:

```js
// app.js
Expand Down Expand Up @@ -199,7 +214,8 @@ general prototyping.

### Available Bootstrap CSS variables

Here are the variables that are generated. The values shown are based on the Bootstrap v4 defaults:
Here are the CSS variables that are generated. The values shown are based on the Bootstrap v4
_defaults_:

```scss
:root {
Expand Down