Skip to content
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

update style model page #1652

Merged
merged 5 commits into from
Jul 27, 2023
Merged

update style model page #1652

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1d3643a
update style model page
oliviaflory Jul 25, 2023
030a808
update high density model section
oliviaflory Jul 25, 2023
57c39a3
fix rogue masthead
oliviaflory Jul 25, 2023
4c4f440
Merge branch 'main' into style-model-updates
oliviaflory Jul 26, 2023
9a04e30
Merge branch 'main' into style-model-updates
kodiakhq[bot] Jul 27, 2023
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
35 changes: 13 additions & 22 deletions src/pages/guidelines/style-models.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ In our models, the design elements included are:

- Grid
- Screen regions
- Key components (Masthead, Footer)
- Key components (masthead, footer)

Here is a list of recurring style models we have identified so far.

Expand All @@ -39,7 +39,7 @@ Here is a list of recurring style models we have identified so far.

#### 　

The biggest differentiator between the models is the grid. Specifically in how grid behaves above max breakpoint. Below is the 2x Grid at max breakpoint (1584px or 99rem).
The biggest differentiator between the models is the grid. Specifically in how the grid behaves above max breakpoint. Below is the 2x Grid at max breakpoint (1584px or 99rem).

<br />

Expand Down Expand Up @@ -101,7 +101,7 @@ Once the screen is wider than the max breakpoint, the margins (highlighted in da

<br />

This difference in grid ripples through everything on page. Here is an overview of how the Masthead and Footer will behave above max breakpoints:
This difference in grid ripples through everything on page. Below is a visual overview of how the masthead and footer will behave above max breakpoints in the editorial and documentation models, and the Carbon UI shell in the high density interface model above max breakpoint:

<Row>
<Column colMd={4} colLg={4} >
Expand All @@ -128,11 +128,11 @@ The **documentation model** has left-aligned content in the footer, while the ba
</Column>
<Column colMd={4} colLg={4} >

![Dotcom shell on high density interface model](../../images/guidelines/style-models/style-models-dotcom-shell-3.png)
![Carbon shell on High density interface model](../../images/guidelines/style-models/style-models-dotcom-shell-4.png)

<Caption>

The **high density interface model** shows both masthead and footer obeying the grid as expected, stretching to full width of screen.
The **high density interface model** shows the Carbon UI shell obeying the grid as expected, stretching to full width of the screen.

</Caption>

Expand Down Expand Up @@ -198,7 +198,7 @@ Refer to the Layout page in our Guidelines section for more guidance on [Content
</Column>
</Row>

Masthead and footer together make up the shell of the page, also known as [Dotcom shell](/components/dotcom-shell). How they are positioned on the grid helps to define the expectations for the rest of the page. In the Editorial model, Dotcom shell stays on the grid. This means the content elements are aligned to columns, and background colors and their dividers are full width extending into margins.
The masthead and footer together make up the shell of the page, also known as [Dotcom shell](/components/dotcom-shell). How they are positioned on the grid helps to define the expectations for the rest of the page. In the Editorial model, Dotcom shell stays on the grid. This means the content elements are aligned to columns, and background colors and their dividers are full width extending into margins.

<Row>
<Column colMd={4} colLg={4} >
Expand Down Expand Up @@ -281,26 +281,26 @@ The left hand navigation panel is similar to a table of contents, which hides on
![Lorem ipsum](../../images/guidelines/style-models/style-models-docu-screen-regions.png)

<Caption>
1. Global element: Masthead <br />
1. Global element: masthead <br />
2. Overarching content: page navigation <br />
3. Main content: details of the subject matter <br />
4. Related content: helpful links, related topics <br />
5. Global element: Footer <br />
5. Global element: footer <br />
</Caption>

</Column>
</Row>

With the documentation model, the Dotcom shell breaks out of the grid and is full width. This keeps the right side of the Masthead elements (Search and Account functions) anchored to the screen edge.
With the documentation model, the Dotcom shell breaks out of the grid and is full width. This keeps the right side of the masthead elements (Search and Account functions) anchored to the screen edge.

<Row>
<Column colMd={4} colLg={4} >

![Dotcom shell usage on Documentation model](../../images/guidelines/style-models/style-models-dotcom-shell-2.png)

<Caption>
In Documentation model, Masthead breaks from the grid and is full width, while
Footer sticks to grid.
In Documentation model, masthead breaks from the grid and is full width, while
footer sticks to grid.
</Caption>

</Column>
Expand Down Expand Up @@ -351,8 +351,7 @@ If you are using Carbon Design System, refer to their existing guidance on <a hr

In place of Dotcom shell, Carbon Design System offers the <a href="https://carbondesignsystem.com/components/UI-shell-header/usage/" target="_blank">UI shell</a> as the default header.

If you have to use Carbon for IBM.com &mdash; perhaps because your application is external facing, and integrated with marketing content &mdash; you can use the Dotcom shell as well. In this this case, Dotcom shell follows the grid and stretches to full width.

If you have to use Carbon for IBM.com &mdash; perhaps because your application is external facing, and integrated with marketing content &mdash; and you believe your experience could benefit from a high density interface model, please open a [feature request](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/new/choose) on our Github.
<Row>
<Column colMd={4} colLg={4} >

Expand All @@ -361,15 +360,7 @@ If you have to use Carbon for IBM.com &mdash; perhaps because your application i
<Caption>Carbon shell is more typical on High density interface model</Caption>

</Column>
<Column colMd={4} colLg={4} >

![Dotcom shell usage on High density interface model](../../images/guidelines/style-models/style-models-dotcom-shell-3.png)

<Caption>
Dotcom shell on High density interface model stretches to full screen width
</Caption>

</Column>
</Row>

### Examples
Expand All @@ -386,4 +377,4 @@ If you have to use Carbon for IBM.com &mdash; perhaps because your application i

## Feedback

These user intents and style models are not set in stone—they and are intended to evolve over time. If for any reason, the existing user intents or style models do not meet the user needs, please contact the Digital Design System team via the <a href="https://cognitive-app.slack.com/archives/C2PLX8GQ6" target="_blank">#carbon-for-ibm-dotcom</a> slack channel.
These user intents and style models are not set in stone—they and are intended to evolve over time. If for any reason, the existing user intents or style models do not meet the user needs, please contact the Carbon for IBM.com team via the <a href="https://cognitive-app.slack.com/archives/C2PLX8GQ6" target="_blank">#carbon-for-ibm-dotcom</a> slack channel.