Layout Builder Layouts

Overview

This module create a css grid based on the defined variants. Generated css is injected as inline css to page head. You can define different displays variants per Layout and configure each breakpoint with a different display.

Installation

Install as usual.

Configuration

Define the breakpoints in your frontend theme. This module has its own breakpoints copied from the Bootstrap module. These breakpoints are used as fallback.

To define your own variants, have a look at this.

You can override the default gap with a css variable.

:root {
  --lbl-gap: 30px;
}

Example

my_two_column:
  ..
  class: '\Drupal\lbl\BaseLayout'
  ..
  icon_map:
    - [left, right]
  variants:
    default:
      title: "Default"
      map:
        - [left, right]
    left:
      title: "Big left side"
      map:
        - [left, left, right]
    right:
      title: "Big right side"
      map:
        - [left, right, right]
    below:
      title: "Below"
      map:
        - [left]
        - [right]
  ...