Topic

Layouts

A layout can describe how various components are arranged on various levels--from an entire page from the header to the footer, to just the "middle" where the dynamic content goes, to individual components. It can apply to templates for managed content or one-off designs for landing pages.

The challenges with layouts include:

  • How can I implement a certain design in Drupal?
  • How can content editors manage the content and layout on a given page, especially for one-off pages with distinct layouts (e.g., landing pages)?
  • What tools are available? What are the use cases for each solution and the advantages and disadvantages to each tool?

In Drupal core, tools include:

  • Themes and regions
  • Twig templates
  • Blocks
  • Views
  • Display modes
  • WYSIWYG/CKEditor
  • Layout API (>=8.3.x)

Contributed modules and themes that extend Drupal core:

  • Panels, Page Manager, Panelizer
  • Paragraphs
  • Display Suite
  • Context
  • Block Visibility Groups
  • Themes (Zen, Omega, Bootstrap) or other Grid Systems

Pure CSS-based solutions can be implemented via libraries and/or themes:

  • Susy, Singularity, Neat
  • CSS flexbox and grid

Example tasks

  • Implement a design for a landing page
  • Implement a design for a content type template
  • Provide a way for content editors to assemble or edit complex pages that fit a design

Confidence

As of Drupal 8.4.x, the Layout API or Layout Discovery module is a stable core module. (It was introduced in Drupal 8.3.x as an experimental module.) It replaces and is incompatible with the Layout Plugin module. Be sure to check that the minor version of Drupal core you are using is compatible with the contributed module(s) you want to use for layout solutions. Expect that many contributed modules will eventually use Layout Discovery (and some already do). There are many robust solutions already available and many more are emerging.

Here is the state of various layout modules in Drupal 8, summarized from the DrupalCon sessions referenced below in the External Resources section:

  • Block (core module)
    • Can place any block into any number of regions, per theme (in Drupal 8)
    • Regions defined by theme
    • No Layout API integration
    • Single layout for entire theme
  • Panels, Page Manager, Panelizer, Panels Everywhere (contributed modules)
    • Panels "ecosystem" modules being developed in tandem for Drupal 8
    • Straight ports of functionality from Drupal 7
    • Use the Layout API
    • Give site builder control over "Content" region (ignoring regions outside of "Content" except in the case of Panels Everywhere). Adds layouts, variants (akin to Block visibility control), and ability to place widgets (i.e. Views displays, blocks, Panel panes) in custom panels layout regions.
  • Context (contributed module)
    • Regions defined by theme
    • No Layout API integration
    • Depends on Block module. If Block module started using Layout API, it's reasonable to assume that Context would start using Layout API.
    • Completely overrides Block configuration visibility settings
  • Display Suite (contributed module)
    • First "layout module" to become stable
    • Uses the Layout API
    • Leverages the Field UI enabling you to place fields in layout regions
  • Field Layout (core module)
    • New Drupal 8 core module
    • Adds Layout API integration for the Field UI
    • Slimmed down version of Display Suite -- purpose is to bring the layout features of Display Suite into core
    • Roadmap includes plans to bring the features of Panelizer ("Panels for Content Types") into core
    • Available in Drupal 8.3.0 as an experimental module
  • Paragraphs (contributed module)
    • Straight port of functionality from Drupal 7
    • Stable Drupal 8 module
  • Twig templates
    • Twig templates are ultimately where you control the HTML wrapper markup, including any attributes such as CSS classes, for a layout. Many layout solutions in Drupal will include one or more Twig templates. (The exception would be purely CSS-based layout solutions such as Susy, Singularity, Neat, or using CSS flexbox or grid properties.)
  • WYSIWYG / CKEditor templates
    • Custom CKEditor templates -- you can provide custom CKEditor template for content editors to use.
    • The Layouter module can be used in Drupal 7 or 8 to allow editors to layout content within the body field of another piece of content. When you choose the layout, a content editing form pops up, allowing you to fill in content for each layout region. The Layouter module allows you to configure which text formats, roles, image styles, and content types are allowed to use the Layouter. This module also includes an example module for developers to use to add custom layouts.
  • Grid systems and extensions (Layout markup + CSS)
    • Bootstrap, Zurb Foundation, Zen, Omega (and many others)
    • Check project pages for release status.
  • CSS-based solutions
    • Susy, Singularity, Neat
    • CSS flexbox and grid
    • Check browser-compatibility resources such as http://caniuse.com/ for browser support of CSS grid and flexbox.

Drupalize.Me resources

We are still filling out our Drupal 8 library and this page will be updated with new tutorials as they are created.

More Guides

We have guides on many Drupal skills and topics.

Explore guides

External resources