Styling layout blocks #

This page is for designers who write the CSS of layouts pages. It answers: which classes the templates give you, how to space and size blocks, and how to make one block look right in a wide and a narrow zone.

Contents #

1. The classes you get
2. The grid stylesheet
3. Spacing between blocks
4. Blocks in narrow zones
5. Light, dark and right to left

The classes you get #

The shipped templates of extension/explayouts/design/standard/templates/explayouts/ emit:

Designs that override the templates choose their own classes; the media and starter designs keep the class names of the theme they were ported from. Look at the template path comments of a page to see which template drew a block (Debugging a design).

The grid stylesheet #

The media design loads explayouts_standard/grid.css (from the layouts extension's design/standard/stylesheets/) before its own CSS, for the container, row and col-* classes. If your design draws containers with its own grid (CSS grid or flex), you do not need it.

Spacing between blocks #

Give blocks vertical rhythm in one place:

.slb-zone > * + * { margin-block-start: var(--site-space-5); }

instead of margins inside each block template. Editors then can stack any blocks without odd gaps.

Blocks in narrow zones #

The same list block may sit in a wide main zone and in a narrow sidebar. Use container queries on the zone:

.slb-zone { container-type: inline-size; }
.slb-list .block-list { display: grid; gap: var(--site-space-3); }
@container (min-width: 40rem) {
  .slb-list .block-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

Light, dark and right to left #

• Colors from tokens only, so blocks follow dark mode (Design tokens).
• Logical properties, so two-column and image-with-text blocks mirror in right-to-left languages (Logical CSS properties).
• Hero blocks with text on images: check contrast in both themes (Color contrast).

Related pages #

• Block view templates
• Breakpoints and container widths
• Tutorial: build a landing page with layouts
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.