summaryrefslogtreecommitdiff
path: root/docs/guide/guidelines
diff options
context:
space:
mode:
authorDerick Montague <derick.montague@ibm.com>2021-03-17 03:52:33 +0300
committerDerick Montague <derick.montague@ibm.com>2021-03-22 16:27:10 +0300
commit492875622b39cb2cf04bbb9248b6ed0c52ced2df (patch)
tree665449e11841591a8aae5f4f347a3a88936a2d7a /docs/guide/guidelines
parentb0fadef1f96df99ff5eb0637527f04bc793c8d6e (diff)
downloadwebui-vue-492875622b39cb2cf04bbb9248b6ed0c52ced2df.tar.xz
Update text wrapping in documentation
To meet best practices and standards for markdown, this commit updates all markdown files used for the VuePress documentation so that each line is limited to 80 characters. Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I0cadb33343ce1bc331dfefd096d8137a04c33604
Diffstat (limited to 'docs/guide/guidelines')
-rw-r--r--docs/guide/guidelines/colors.md27
-rw-r--r--docs/guide/guidelines/motion.md21
2 files changed, 37 insertions, 11 deletions
diff --git a/docs/guide/guidelines/colors.md b/docs/guide/guidelines/colors.md
index 7ef6c153..d73a0373 100644
--- a/docs/guide/guidelines/colors.md
+++ b/docs/guide/guidelines/colors.md
@@ -1,9 +1,16 @@
# Colors
-This color palette has been agreed upon by the OpenBMC community and differs from the Bootstrap color patterns. The OpenBMC palette includes custom hex values, along with additional blue, green, red, and yellow color variables used as accent colors for components. The `.scss` component files use these accent colors to override default styles set by the Bootstrap library.
+This color palette has been agreed upon by the OpenBMC community and differs
+from the Bootstrap color patterns. The OpenBMC palette includes custom hex
+values, along with additional blue, green, red, and yellow color variables used
+as accent colors for components. The `.scss` component files use these accent
+colors to override default styles set by the Bootstrap library.
- [Learn more about theme customization](/themes/)
-- [Open an issue in the OpenBMC webui-vue repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a change
-- [Learn more about Bootstrap colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
+- [Open an issue in the OpenBMC webui-vue
+ repo](https://github.com/openbmc/webui-vue/issues/new/choose) to request a
+ change
+- [Learn more about Bootstrap
+ colors](https://getbootstrap.com/docs/4.4/getting-started/theming/#theme-colors)
## Grays
<colors-grays/>
@@ -21,15 +28,21 @@ This color palette has been agreed upon by the OpenBMC community and differs fro
<colors-yellows/>
## All Colors
-`All Colors` is the term Bootstrap uses to describe the colors that make up the `colors` map. These colors and the Grays color variables define the `theme-colors` map colors.
+`All Colors` is the term Bootstrap uses to describe the colors that make up the
+`colors` map. These colors and the Grays color variables define the
+`theme-colors` map colors.
-[Learn more about the Bootstrap color maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
+[Learn more about the Bootstrap color
+maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#all-colors).
<colors-all/>
## Theme Colors
-The theme colors are keys in the `theme-colors` map. Bootstrap-Vue has a variant prop that accepts any of the `theme-colors` keys to set the theme of a component.
+The theme colors are keys in the `theme-colors` map. Bootstrap-Vue has a variant
+prop that accepts any of the `theme-colors` keys to set the theme of a
+component.
-[Learn more about the Bootstrap theme-colors maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors).
+[Learn more about the Bootstrap theme-colors
+maps](https://getbootstrap.com/docs/4.0/getting-started/theming/#theme-colors).
<colors-theme/>
diff --git a/docs/guide/guidelines/motion.md b/docs/guide/guidelines/motion.md
index 22450f1d..4e176293 100644
--- a/docs/guide/guidelines/motion.md
+++ b/docs/guide/guidelines/motion.md
@@ -1,14 +1,23 @@
# Motion
-The motion guidelines are based on Carbon Design System guidelines. These guidelines avoid easing curves that are unnatural, distracting, or purely decorative. [The documentation below is attributed to Carbon's animation documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
+The motion guidelines are based on Carbon Design System guidelines. These
+guidelines avoid easing curves that are unnatural, distracting, or purely
+decorative. [The documentation below is attributed to Carbon's animation
+documentation](https://www.carbondesignsystem.com/guidelines/motion/basics/).
## Easing
### Productive motion
-Productive motion creates a sense of efficiency and responsiveness, while remaining subtle and out of the way. Productive motion is appropriate for moments when the user needs to focus on completing tasks.
+Productive motion creates a sense of efficiency and responsiveness, while
+remaining subtle and out of the way. Productive motion is appropriate for
+moments when the user needs to focus on completing tasks.
### Expressive motion
-Expressive motion delivers enthusiastic, vibrant, and highly visible movement. Use expressive motion for significant moments such as opening a new page, clicking the primary action button, or when the movement itself conveys a meaning. System alerts and the appearance of notification boxes are great cases for expressive motion.
+Expressive motion delivers enthusiastic, vibrant, and highly visible movement.
+Use expressive motion for significant moments such as opening a new page,
+clicking the primary action button, or when the movement itself conveys a
+meaning. System alerts and the appearance of notification boxes are great cases
+for expressive motion.
### Easing tokens
```
@@ -21,7 +30,11 @@ $exit-easing--expressive: cubic-bezier(0.4, 0.14, 1, 1);
```
## Duration
-Duration is calculated based on the style and size of the motion. Among the two motion styles, productive motion is significantly faster than expressive motion. Motion’s duration should be dynamic based on the size of the animation; the larger the change in distance (traveled) or size (scaling) of the element, the longer the animation takes.
+Duration is calculated based on the style and size of the motion. Among the two
+motion styles, productive motion is significantly faster than expressive motion.
+Motion’s duration should be dynamic based on the size of the animation; the
+larger the change in distance (traveled) or size (scaling) of the element, the
+longer the animation takes.
### Duration tokens
```