README.md

Layout

This component provides some global utility variables for consistent layout.

Side padding

In the simplest case, you may just need the --layout-side-padding variable. This keeps full width content in line with the padding in the navigation and footer, which provides a small padding on small screens, and centers content on very large screens:

.example {
  padding-inline: var(--layout-side-padding);
}

Content and sidebar layouts

If the page has "content" - some kind of prose - and optionally sidebars, you'll likely want one of the following layouts. The columns are sized to ensure that the content column doesn't become too wide (and have unreadably long lines of text), and that the sidebar columns don't become too narrow.

If you're not using sidebars, you probably want to jump straight to the "no sidebar" layouts, to ensure you don't get empty space on narrower screens.

If you're using sidebars, you'll probably want to use the custom media queries associated with each layout to switch between them:

.example-wrapper {
  display: grid;
  grid-template-columns: var(--layout-2-sidebars);
  padding-inline: var(--layout-side-padding);

  .example-content {
    grid-column: content;
  }

  .example-left-sidebar {
    grid-column: left-sidebar;
  }

  .example-right-sidebar {
    grid-column: right-sidebar;
  }

  @media (--screen-layout-1-sidebar-or-less) {
    grid-template-columns: var(--layout-1-sidebar-left);

    .example-right-sidebar {
      display: none;
    }
  }

  @media (--screen-layout-no-sidebar) {
    grid-template-columns: var(--layout-no-sidebar);

    .example-left-sidebar {
      display: none;
    }
  }
}

2 sidebars: --layout-2-sidebars

A column for content, two columns for sidebars, and two columns for a gap between the content and sidebars. The columns are named as follows:

1	(2)	3	(4)	5
full	full	full	full	full
		content
left-sidebar				right-sidebar

Use the --screen-layout-1-sidebar-or-less custom media query to change to a different layout when the viewport becomes too narrow.

1 sidebar

Two variants, which are identical apart from one having a left sidebar and the other a right sidebar. They have a column for content, a column for the sidebar, and a column for a gap between the content and sidebar.

Use the --screen-layout-no-sidebar custom media query to change to a different layout when the viewport becomes too narrow.

Left sidebar --layout-1-sidebar-left

The columns are named as follows:

1	(2)	3
full	full	full
		content
left-sidebar
sidebar

Right sidebar --layout-1-sidebar-right

The columns are named as follows:

1	(2)	3
full	full	full
content
		right-sidebar
		sidebar

No sidebar

Two variants, one if you're using --layout-side-padding, the other if you'd like to place things within that padding (e.g. a full width banner):

Using padding: --layout-no-sidebar

The columns are named as follows:

1	2	3
full	full	full
	content

.example-wrapper {
  display: grid;
  grid-template-columns: var(--layout-no-sidebar);
  padding-inline: var(--layout-side-padding);

  .example-content {
    grid-column: content;
  }
}

Not using padding: --layout-no-sidebar-extended

The columns are named as follows:

(0)	1	2	3	(4)
extended-full	extended-full	extended-full	extended-full	extended-full
	full	full	full
		content

.example-wrapper {
  display: grid;
  grid-template-columns: var(--layout-no-sidebar-extended);

  .example-banner {
    grid-column: extended-full;
  }

  .example-content {
    grid-column: content;
  }
}