Page Structure
Standard Page Layout
Fabric's components and guidelines were designed specifically with Alation's data catalog structure in mind. These page layout guidelines may not be applicable outside of Alation's product suite.
Pages in Alation's data catalog share a common basic layout, with minor differences between them depending on the content.
All pages must have:
- Page Header in the top-left
- Page content area, in a one or two-column layout
Many pages also have:
- Page actions in the top-right
- Tabs (horizontal and/or vertical)
- Breadcrumbs above the page header
Column Layouts
The content area of every page should conform to a one-column or two-column layout.
When present, the right column is a fixed width (180px) and the main column scales to fit the available space within the window. As a result, only components with very predictable structures and content should ever be placed within the right column in a two-column layout.
Sections
All information within the page content area is organized into sections (and sub-sections), each with a UIHeader at the top of the section.
Sections are almost always full-width within the column layout of the page. However, when displaying narrow content within the main column, the main column can be horizontally split into two equal columns. Subsequent sections resume the full-width sizing.
Custom Fields & Page Template Customization
Sections on a page can be arranged either standard out-of-the-box layout determined by Alation, or through end user admin customization of page templates and custom fields. Not all pages can be customized, but many object pages can be. This should be considered when designing for customizable pages, as the order and layout of content can't always be known by Alation.
Spacing
Fabric has informal "space units" of 8px.
All layouts should be designed with integer multiples of space units, except in special circumstances.
Exceptions:
- Spacing of .5 space units (4px) may be used within Fabric components.
- Fine-tuned spacing and layout adjustments may be done by single pixels when doing detailed layout adjustments, such as text baseline alignment.