Application Layout
The application layout component, while not visible in the user interface, is used to provide common ways to arrange the content of a screen. The application layout wraps the main page content and houses the primary navigation for the application.
Structure of a screen
A screen is the entire user interface of an application.
A typical screen in Recipe consists of several layers. The application layout is the outermost layer. Typically, the application layout will contain a navigation component, and inside that a page header component followed by a page component.
The application layout component ensures that content containers are arranged in an appropriate way across all screen sizes.
Application layout
The application layout:
- Controls the horizontal margins of the content area
-
Offers two variations
- Full width. This is the default and should be used for pages where the user benefits from the content taking up the available screen width, like on a page with a Table.
- Centered. Use this narrower variant to focus user attention on the page content, or constrain the max-width to improve readability. Pages with text-heavy cards or forms typically benefit from being constrained to a max-width.
| Full width layout, narrow screen | Full width layout, wide screen |
|---|---|
 |  |
| Centered layout, narrow screen | Centered layout, wide screen |
|---|---|
 |  |
Best Practices
Application layouts should:
- Only appear once per screen
- Host the page content.
- Optionally wrap the page content with a navigation component, where multiple top-level pages are needed.
Examples
Full width layout
Use the full width layout for wide list or table content that may benefit from more horizontal space.
Reviews
Card (in aside)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Card (in main)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Centered layout
Use the centered layout to constrain page width to improve readability or focus use attention the primary page content.
Note: The centered layout will only take effect on wide screen sizes.
Reviews
Card (in aside)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.
Card (in main)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.