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

Document layout in Storybook #67628

Merged
merged 2 commits into from
Dec 10, 2024
+387 −0
Merged

Document layout in Storybook #67628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03eef73
Document layout in Storybook
jameskoster Dec 5, 2024
da77ce8
Remove acronym
jameskoster Dec 6, 2024
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
58 changes: 58 additions & 0 deletions storybook/stories/foundations/layout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { Meta } from '@storybook/addon-docs/blocks';
import areas from './static/areas.svg';
import pageLayoutExample1 from './static/page-layout-example-1.svg';
import pageLayoutExample2 from './static/page-layout-example-2.svg';
import pageLayoutExample3 from './static/page-layout-example-3.svg';
import pageLayoutExample4 from './static/page-layout-example-4.svg';


<Meta title="Foundations/Layout" name="page" />

# Layout

Layout defines the arrangement and structure of admin pages, content sections, and other visual elements.

## Page areas

At the highest level admin pages are comprised of _areas_, that can be arranged in different ways.

<img src={ areas } alt="Area definition diagram" width="100%" />

1. **Sidebar** – Primary admin navigation UI including notifications and access to Command Palette. Always positioned on the left of the page (assuming left-to-right language).
2. **Content Frame** – A container for admin page content e.g. data views, settings forms, etc.
3. **Preview Frame** – Displays a preview of the site homepage, a post or page in focus, or something more abstract like a template or Style Book. In many cases it can be clicked to open the editor.

### Area compositions

Areas can be combined in different ways depending on the use case. Here are some examples.

<table>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar, Content Frame and Preview Frame
<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Preview Frame
<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Design section.
</td>
</tr>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Content Frame
<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and multiple Content Frames
<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />

Multiple content frames can be utilised as required.
</td>
</tr>
</table>
Loading
Loading