readme.md (c2f8f34e19ef7b9987538e8c2624e629b5203c17) readme.md (7385e139b0c9efca7430458cee982e63e282f4ae)
1# Presentation Layer Architecture
2
3This section discusses the structure and purpose of the SCSS files and how to
4customize the application using Bootstrap theming.
5
1# Presentation Layer Architecture
2
3This section discusses the structure and purpose of the SCSS files and how to
4customize the application using Bootstrap theming.
5
6[Read more about Bootstrap
7Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
6[Read more about Bootstrap Theming](https://getbootstrap.com/docs/4.0/getting-started/theming)
8
9## SCSS Directory Structure
10
11### `bmc` Directory
12
7
8## SCSS Directory Structure
9
10### `bmc` Directory
11
13The `bmc` directory contains Sass helpers and default styles for customizing the OpenBMC
14Web UI.
12The `bmc` directory contains Sass helpers and default styles for customizing the
13OpenBMC Web UI.
15
16```{5}
17.
18├─ src
19 ├─ assets
20 ├─ styles
21 ├─ bmc
22 ├─ custom

--- 56 unchanged lines hidden (view full) ---

79 ├─ _motion.scss
80 └─ _variables.scss
81 ├─ bootstrap
82 └─ _obmc-custom.scss
83```
84
85#### `_colors.scss`
86
14
15```{5}
16.
17├─ src
18 ├─ assets
19 ├─ styles
20 ├─ bmc
21 ├─ custom

--- 56 unchanged lines hidden (view full) ---

78 ├─ _motion.scss
79 └─ _variables.scss
80 ├─ bootstrap
81 └─ _obmc-custom.scss
82```
83
84#### `_colors.scss`
85
87The `_colors.scss` file sets all the SASS variables and color maps for the OpenBMC
88Web UI. Any color settings needed to meet company brand guidelines will happen
89in this file.
86The `_colors.scss` file sets all the SASS variables and color maps for the
87OpenBMC Web UI. Any color settings needed to meet company brand guidelines will
88happen in this file.
90
91##### Sass Color Variables
92
93```scss
94$black: #000;
95$white: #fff;
96
97$blue-500: #2d60e5;

--- 58 unchanged lines hidden (view full) ---

156 "light": $light,
157 "danger": $danger,
158 "info": $info "success": $success "warning": $warning,
159);
160```
161
162##### Color Resources
163
89
90##### Sass Color Variables
91
92```scss
93$black: #000;
94$white: #fff;
95
96$blue-500: #2d60e5;

--- 58 unchanged lines hidden (view full) ---

155 "light": $light,
156 "danger": $danger,
157 "info": $info "success": $success "warning": $warning,
158);
159```
160
161##### Color Resources
162
164- [Learn more about Bootstrap
165 colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
166- [Learn more about Bootstrap
167 variables](https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables)
168- [View the color palette and hex values in the color
169 guidelines](/guide/guidelines/colors)
163- [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
164- [Learn more about Bootstrap variables](https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables)
165- [View the color palette and hex values in the color guidelines](/guide/guidelines/colors)
170
171#### `_functions.scss`
172
173Two functions provide a customized way to set color highlights. The
174`theme-color-light` and `theme-color-dark` are custom functions used to create
175colors for the `alert`, `badge`, `card`, and `toast` components. They have also
176set color highlights for some pseudo-elements like `: hover`.
177

--- 71 unchanged lines hidden (view full) ---

249 top: 0.5rem;
250 transition-timing-function: $entrance-easing--expressive;
251 }
252}
253```
254
255##### Motion Resources
256
166
167#### `_functions.scss`
168
169Two functions provide a customized way to set color highlights. The
170`theme-color-light` and `theme-color-dark` are custom functions used to create
171colors for the `alert`, `badge`, `card`, and `toast` components. They have also
172set color highlights for some pseudo-elements like `: hover`.
173

--- 71 unchanged lines hidden (view full) ---

245 top: 0.5rem;
246 transition-timing-function: $entrance-easing--expressive;
247 }
248}
249```
250
251##### Motion Resources
252
257- [Including Animation In Your Design
258 System](https://www.smashingmagazine.com/2019/02/animation-design-system/)
259- [Carbon Design System motion
260 guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/)
253- [Including Animation In Your Design System](https://www.smashingmagazine.com/2019/02/animation-design-system/)
254- [Carbon Design System motion guidelines](https://www.carbondesignsystem.com/guidelines/motion/basics/)
261
262#### `_variables.scss`
263
264This file contains all the global Sass options. There are Bootstrap option
265overrides, Bootstrap global variable overrides, and custom BMC global variables.
266Read more about these in the [Customization section](/customize/theme).
267
268### `bootstrap` Directory

--- 33 unchanged lines hidden (view full) ---

302 ├─ bmc
303 ├─ bootstrap
304 └─ _obmc-custom.scss
305```
306
307The `obmc-custom.scss` file defines all of the presentational layer
308dependencies.
309
255
256#### `_variables.scss`
257
258This file contains all the global Sass options. There are Bootstrap option
259overrides, Bootstrap global variable overrides, and custom BMC global variables.
260Read more about these in the [Customization section](/customize/theme).
261
262### `bootstrap` Directory

--- 33 unchanged lines hidden (view full) ---

296 ├─ bmc
297 ├─ bootstrap
298 └─ _obmc-custom.scss
299```
300
301The `obmc-custom.scss` file defines all of the presentational layer
302dependencies.
303
310- [Read more about Bootstrap
311 options](https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options)
312- [Read more about
313 Importing](https://getbootstrap.com/docs/4.0/getting-started/theming/#importing)
304- [Read more about Bootstrap options](https://getbootstrap.com/docs/4.0/getting-started/theming/#sass-options)
305- [Read more about Importing](https://getbootstrap.com/docs/4.0/getting-started/theming/#importing)
314
315## Component / View Styles
316
317Some stylistic changes only apply to a single-file component or view instance.
318In this case, rather than adding a Sass file, the scoped styles include the
319styles in the component's `<style>` block. It is required to import the
320`_helpers` Sass file when using a BMC or Bootstrap variable in the component's
321`<style>` block. Without this import, webpack cannot compile the OpenBMC Web UI

--- 32 unchanged lines hidden (view full) ---

354 width: 100px;
355 border: 1px solid $gray-300;
356 margin-top: 10px;
357 }
358 }
359</style>
360```
361
306
307## Component / View Styles
308
309Some stylistic changes only apply to a single-file component or view instance.
310In this case, rather than adding a Sass file, the scoped styles include the
311styles in the component's `<style>` block. It is required to import the
312`_helpers` Sass file when using a BMC or Bootstrap variable in the component's
313`<style>` block. Without this import, webpack cannot compile the OpenBMC Web UI

--- 32 unchanged lines hidden (view full) ---

346 width: 100px;
347 border: 1px solid $gray-300;
348 margin-top: 10px;
349 }
350 }
351</style>
352```
353
362:::tip
363You might notice that there is an HTML element, `<h2>`, used in the example. This is an anti-pattern in global `.scss` files. However, in a single file component that generates the markup it is acceptable.
364:::
354:::tip You might notice that there is an HTML element, `<h2>`, used in the
355example. This is an anti-pattern in global `.scss` files. However, in a single
356file component that generates the markup it is acceptable. :::
365
366[Learn more about single file components](https://vuejs.org/v2/guide/single-file-components.html)
367
368Customization of the application requires knowledge of Sass and CSS. It also
369will require becoming familiar with the Bootstrap and Bootstrap-Vue component
370libraries. This section outlines the global options and variables that can be
371removed or updated to meet organizational brand guidelines.
357
358[Learn more about single file components](https://vuejs.org/v2/guide/single-file-components.html)
359
360Customization of the application requires knowledge of Sass and CSS. It also
361will require becoming familiar with the Bootstrap and Bootstrap-Vue component
362libraries. This section outlines the global options and variables that can be
363removed or updated to meet organizational brand guidelines.