The documentation layout is built using Vanilla grid classes and common components. It consists of 3 horizontal areas that span the entire fixed width of the grid: header, content, footer.
At the large breakpoint, the content area is further divided into an aside (3 columns) and a main content area (9 columns).
At smaller breakpoints, the aside is moved off-screen and shown / hidden using a toggle.
Place the navigation component and any other full width elements in the header. This could include a strip with a search, a hero element, etc.
Style and contents of the documentation main navigation should be consistent with rest of the site.
Documentation pages may have an optional search box in the main navigation.
Alternatively, a search can be added in a full-width area under the top navigation, but above the aside and main content in a strip component with grid row inside. The specific styling of the strip can be customised to match the site branding or other design requirements.
The content area is implemented as a regular strip (.p-strip) with a grid row (.row) inside. Within the standard Vanilla 12 column grid, 3 of the columns are reserved for the side navigation (.col-3) with the rest of the row width (9 columns, .col-9) is dedicated to the main documentation content.
The aside area should contain the side navigation component with a list of all documentation pages. Grouping and nesting of navigation items should be used to build the logical structure of the documentation navigation. The side navigation component has built-in responsive functionality which makes it appear / go off-screen using a toggle.
If the contents of the side navigation are generated in a way that doesn't provide the specific class names required by Vanilla, use a raw HTML variant of the pattern to style the basic HTML lists of links.
The main content area is placed in a col-9 grid container. Note that the number of columns available to use by content inside this container is equal to the number of columns the container spans. For the main content this means 9 available columns.
A visualisation of the grid, and how to nest different layouts inside the main content container:
To split the main content area into 3 parts, use col-3:
To split the main content into 2 parts, use col-4:
The footer is built using a strip component.
