diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index c917e6fc9a..8ae49cee36 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/packages/documentation-framework/templates/mdx.css @@ -68,6 +68,12 @@ table-layout: fixed; width: 100%; } + +.ws-image { + text-align: center; + width: "600px"; +} + .ws-table td > code, .ws-table th > code, .ws-table tr > code { diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/capitalization.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/capitalization.md index 86bbf1b0ab..72817a5cfe 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/capitalization.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/capitalization.md @@ -9,17 +9,15 @@ Consistent capitalization adds clarity and creates unity across product UIs. Pat For example: “When you use PatternFly’s design resources, you get helpful tips and best practices.” -Above all else, your main goal should be consistency. You may need to use different capitalization standards depending on what you're designing, but be sure to keep the capitalization within your product area consistent. +**Above all else, your main goal should be consistency.** You may need to use different capitalization standards depending on what you're designing, but be sure to keep the capitalization within your product area consistent. ## Red Hat product UIs When you write for a product, make sure you adhere to the following capitalization patterns. -- Capitalize proper nouns, acronyms, initialisms, product names, services, and features. +- Default to sentence case across all UI elements, including navigation items, page titles, buttons, and so on. -- Use title case for top-level navigation items and sentence case for secondary or tertiary items. Corresponding page titles should also follow this capitalization style. For example: - -

> A side navigation menu, expanded to show capitalization styles.

+
A side navigation menu, expanded to show capitalization styles.
- Keep capitalization for custom resources the same as the capitalization style used during creation. - For example, if a custom resource name was created with all lowercase letters, don't change any of the letters to uppercase when referencing this resource. @@ -37,11 +35,11 @@ When you write for a product, make sure you adhere to the following capitalizati It is common for page titles to appear as an item in a breadcrumb trail. Match the capitalization of the original page title in the corresponding breadcrumb item even when the item does not use sentence case, or when a breadcrumb trail contains mixed capitalization standards. -

> A breadcrumb trail with mixed capitalization styles due to page title formatting.

+
A breadcrumb trail with mixed capitalization styles due to page title formatting.
Sometimes, user-named items will appear in a breadcrumb trail. If a custom resource name (for example, "customResource-name") is included in the breadcrumb trail, you should match the capitalization of the users' original entry. -

> A breadcrumb trail with mixed capitalization styles due to custom resource naming.

+

A breadcrumb trail with mixed capitalization styles due to custom resource naming.

### Tools outside your product portfolio @@ -59,8 +57,8 @@ There are additional capitalization guidelines that you should follow if you con Take the PatternFly website as an example, where all navigation items, button text, and headings are written in sentence case and all proper nouns are in title case: -

A PatternFly website screenshot showing sentence case copy. -

+
A PatternFly website screenshot showing sentence case copy. +
- Write all components in lowercase unless they start a sentence. @@ -68,6 +66,6 @@ Take the PatternFly website as an example, where all navigation items, button te For example, the following image from our component documentation uses lowercase for the component name ("card") and capitalizes code appropriately ("isCompact" and "isLarge"). -

Component documentation showing sentence case copy and capitalization styling for code. -

+
Component documentation showing sentence case copy and capitalization styling for code. +
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/img/navigation-capitalization.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/img/navigation-capitalization.png index 80dc4436a5..9974ee85da 100644 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/content/img/navigation-capitalization.png and b/packages/documentation-site/patternfly-docs/content/design-guidelines/content/img/navigation-capitalization.png differ diff --git a/packages/documentation-site/patternfly-docs/content/get-started/get-started.css b/packages/documentation-site/patternfly-docs/content/get-started/get-started.css index f939ef2b87..046673dbd0 100644 --- a/packages/documentation-site/patternfly-docs/content/get-started/get-started.css +++ b/packages/documentation-site/patternfly-docs/content/get-started/get-started.css @@ -2,11 +2,6 @@ color: #0066CC; } -.ws-image { - margin: 50%; - width: "600px"; -} - #supported-browsers.ws-title + table { margin-bottom: 16px; }