Update theme file structure in documentation
This update supports a refactor of the SCSS architecture. The Bootstrap
files are imported individually to exclude the reboot.scss and
type.scss files. These styles conflict with the Vuepress styles and are
not needed for documentation.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ida304ecc1fdd1e518f29115ce10752125265330c
diff --git a/docs/.vuepress/styles/_index.scss b/docs/.vuepress/styles/_index.scss
index 157898e..700c14e 100644
--- a/docs/.vuepress/styles/_index.scss
+++ b/docs/.vuepress/styles/_index.scss
@@ -3,7 +3,39 @@
@import "src/assets/styles/bootstrap/helpers";
// Vendor styles
-@import "src/assets/styles/bootstrap/index";
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/transitions";
+
+// Components
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/tooltip";
+
+// Utils
+@import "~bootstrap/scss/utilities";
@import "~bootstrap-vue/src/index";
// Custom BMC styles
diff --git a/docs/themes/readme.md b/docs/themes/readme.md
index 5e23877..7dd177a 100644
--- a/docs/themes/readme.md
+++ b/docs/themes/readme.md
@@ -13,12 +13,9 @@
├─ assets
├─ styles
├─ bmc
+ ├─ custom
└─ helpers
- ├─ vendor
- ├─ bootstrap
- └─ bootstrap-vue
- ├─ vendor-overrides
- └─ bootstrap
+ ├─ bootstrap
├─ _helpers.scss
└─ _obmc-custom.scss
```
@@ -32,13 +29,28 @@
├─ assets
├─ styles
├─ bmc
- ├─ helpers
+ ├─ custom
+ ├─ alert.scss
+ ├─ _badge.scss
+ ├─ _base.scss
+ ├─ _bootstrap-grid.scss
+ ├─ _buttons.scss
+ ├─ _calendar.scss
+ ├─ _dropdown.scss
+ ├─ _forms.scss
+ ├─ _index.scss
+ ├─ _modal.scss
+ ├─ _pagination.scss
+ ├─ _tables.scss
+ └─ _toasts.scss
+ └─ helpers
├─ _colors.scss
+ ├─ _index.scss
├─ _motion.scss
└─ _variables.scss
- ├─ _helpers.scss
- └─ _base.scss
```
+### custom
+The `custom` directory imports all the styles needed to customize the UI. These are small changes used to reach parity with the OpenBMC Design Workgroup's agreed-upon design. The file naming convention closely follows the Bootstrap or Boostrap-vue library file naming since most of the ruleset selectors in these files are based on these two libraries.
### helpers
The helper's folder contains a set of Sass helper files containing Sass variables that establish the custom theme of the application.
@@ -175,47 +187,43 @@
#### _variables.scss
This file contains all the global Sass options. There are Bootstrap option overrides, Bootstrap global variable overrides, and custom BMC global variables. Read more about these in the [theme customization section](/themes/customize).
-## vendor
-The `vendor` directory imports all third-party styles needed to support the OpenBMC Web UI. These imports are split into separate directories to import the files based on their dependency order.
+### bootstrap
+The `bootstrap` directory contains all the import references. The references are split into multiple files to support import order based on dependency. Helper styles need to be imported before all other styles.
```
.
├─ src
├─ assets
├─ styles
- ├─ vendor
- ├─ bootstrap
- ├─ _base.scss
- ├─ _components.scss
- ├─ _helpers.scss
- └─ _index.scss
- └─ bootstrap-vue
- └─ _index.scss
+ ├─ bootstrap
+ ├─ _helpers.scss
+ └─ _index.scss
```
-## vendor-override
-The `vendor-override` directory imports all third-party style overrides. These are small changes used to reach parity with the OpenBMC Design Workgroup's agreed-upon design. Each of these files uses the same file naming as the Bootstrap Sass files the override. One exception to this rule is the `index` Sass file used to simplify the file import structure of the `obmc-custom` Sass file.
-```
-.
-├─ src
- ├─ assets
- ├─ styles
- ├─ vendor-overrides
- ├─ bootstrap
- ├─ _alert.scss
- ├─ _badge.scss
- ├─ _buttons.scss
- ├─ _forms.scss
- ├─ _index.scss
- ├─ _modal.scss
- ├─ _tables.scss
- └─ _toasts.scss
-```
+#### _helpers.scss
+This file contains all the helper import references for Bootstrap.
+
+#### _index.scss
+This file contains all the import references needed to support the base, components, and utility styles.
### _helpers.scss
+```
+.
+├─ src
+ ├─ assets
+ ├─ styles
+ ├─ _helpers.scss
+```
The `_helpers.scss` file is an import file needed when building single-file components that require the use of BMC or Bootstrap Sass variables and functions. This file needs to be imported as part of the `<style>` block to support Sass compilation. Although it is possible to prepend these helpers in webpack, it will break any use of imported single-file components used in the Vuepress documentation.
-### _obmc-custom.scss
+### _obmc-custom.scss```
+```
+.
+├─ src
+ ├─ assets
+ ├─ styles
+ └─ _obmc-custom.scss
+```
The `obmc-custom.scss` file defines all of the presentational layer dependencies.
- [Read more about Bootstrap options](https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options)