Skip to content

Layouts

Jump to bottom
Philip Levy edited this page Jan 24, 2022 · 2 revisions

Default

  • This is the master layout that all other layouts feed into. It contains the main HTML "shell" that is used for all pages.
  • There is no styling included in this layout, but you can add design tokens and utility classes to the body element by including the body-style element on your content page. It would look something like this:
---
layout: default
body-style: bg-base-light
---

Grid container

  • This layout places the page content in a container using the grid-container class before including it in the Default template.
  • It provides a simple, centered column with a maximum width and some built-in padding.
  • This is a good option for most single-column content.

Centered column

  • If you need a single, centered column with more control use this template.
  • You can add design tokens and utility classes to the content container using the layout-style setting on your content page.
  • The width of the column is based on the content. Consider adding a width utility class that sets a maximum width at larger screen sizes, like this:
---
layout: centered-column
layout-style: tablet:width-tablet
---

In this example, the content will adapt to the screen size at smaller sizes, but at the tablet width, it will have a maximum width based on the tablet width breakpoint defined in the Design System.

Sidebar

  • This is a two-column layout to add content or components to the side of the main content.
  • The sidebar will automatically resize to fit the content.
  • The main content area will fill the rest of the available space.
  • The sidebar setting looks for Markdown files in the includes/content folder.

To use this, set the layout to sidebar and use the sidebar setting to determine which content you want to include, for example:

---
layout: sidebar
sidebar: page-nav.md
sidebar-reverse: true
---
  • You can also reverse the order of the sidebar and main content using the sidebar-reverse setting, also included in the snippet above.

Three column

  • This layout is like having a double sidebar, one "before" and one "after" the main content.
  • Like the Sidebar template, the left-column and right-column settings look for Markdown files in the includes/content folder.
  • The settings look like this:
---
layout: three-column
left-column: page-nav.md
right-column: signup.md
---

Clone this wiki locally