first commit

core/modules/layout_discovery/layouts/onecol/layout--onecol.html.twig

@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a one-column layout.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--onecol',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content') }}>
+      {{ content.content }}
+    </div>
+  </div>
+{% endif %}

core/modules/layout_discovery/layouts/onecol/onecol.css

@@ -0,0 +1,7 @@
+/*
+ * @file
+ * Provides the layout styles for layout_onecol.
+ */
+.layout--onecol .layout__region {
+  width: 100%;
+}

core/modules/layout_discovery/layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a three column layout.
+ *
+ * This template provides a three column 25%-50%-25% display layout, with
+ * additional areas for the top and the bottom.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--threecol-25-50-25',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

core/modules/layout_discovery/layouts/threecol_25_50_25/threecol_25_50_25.css

@@ -0,0 +1,23 @@
+/*
+ * @file
+ * Provides the layout styles for layout_threecol_25_50_25.
+ */
+.layout--threecol-25-50-25 {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--threecol-25-50-25 > .layout__region,
+.layout--threecol-25-50-25 > .layout__region--second {
+  flex: 0 1 100%;
+}
+
+@media screen and (min-width: 40em) {
+  .layout--threecol-25-50-25 > .layout__region--first,
+  .layout--threecol-25-50-25 > .layout__region--third {
+    flex: 0 1 25%;
+  }
+  .layout--threecol-25-50-25 > .layout__region--second {
+    flex: 0 1 50%;
+  }
+}

core/modules/layout_discovery/layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig

@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a three column layout.
+ *
+ * This template provides a three column 33%-34%-33% display layout, with
+ * additional areas for the top and the bottom.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--threecol-33-34-33',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

core/modules/layout_discovery/layouts/threecol_33_34_33/threecol_33_34_33.css

@@ -0,0 +1,23 @@
+/*
+ * @file
+ * Provides the layout styles for layout_threecol_33_34_33.
+ */
+
+.layout--threecol-33-34-33 {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--threecol-33-34-33 > .layout__region {
+  flex: 0 1 100%;
+}
+
+@media screen and (min-width: 40em) {
+  .layout--threecol-33-34-33 > .layout__region--first,
+  .layout--threecol-33-34-33 > .layout__region--third {
+    flex: 0 1 33%;
+  }
+  .layout--threecol-33-34-33 > .layout__region--second {
+    flex: 0 1 34%;
+  }
+}

core/modules/layout_discovery/layouts/twocol/layout--twocol.html.twig

@@ -0,0 +1,46 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a two-column layout.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--twocol',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

core/modules/layout_discovery/layouts/twocol/twocol.css

@@ -0,0 +1,20 @@
+/*
+ * @file
+ * Provides the layout styles for layout_twocol.
+ */
+
+.layout--twocol {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--twocol > .layout__region {
+  flex: 0 1 100%;
+}
+
+@media screen and (min-width: 40em) {
+  .layout--twocol > .layout__region--first,
+  .layout--twocol > .layout__region--second {
+    flex: 0 1 50%;
+  }
+}

core/modules/layout_discovery/layouts/twocol_bricks/layout--twocol-bricks.html.twig

@@ -0,0 +1,67 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a two column layout.
+ *
+ * This template provides a two column display layout with full width areas at
+ * the top, bottom and in the middle.
+ *
+ * Available variables:
+ * - in_preview: Whether the plugin is being rendered in preview mode.
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--twocol-bricks',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top') }}>
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    {% if content.first_above %}
+      <div {{ region_attributes.first_above.addClass('layout__region', 'layout__region--first-above') }}>
+        {{ content.first_above }}
+      </div>
+    {% endif %}
+
+    {% if content.second_above %}
+      <div {{ region_attributes.second_above.addClass('layout__region', 'layout__region--second-above') }}>
+        {{ content.second_above }}
+      </div>
+    {% endif %}
+
+    {% if content.middle %}
+      <div {{ region_attributes.middle.addClass('layout__region', 'layout__region--middle') }}>
+        {{ content.middle }}
+      </div>
+    {% endif %}
+
+    {% if content.first_below %}
+      <div {{ region_attributes.first_below.addClass('layout__region', 'layout__region--first-below') }}>
+        {{ content.first_below }}
+      </div>
+    {% endif %}
+
+    {% if content.second_below %}
+      <div {{ region_attributes.second_below.addClass('layout__region', 'layout__region--second-below') }}>
+        {{ content.second_below }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

core/modules/layout_discovery/layouts/twocol_bricks/twocol_bricks.css

@@ -0,0 +1,22 @@
+/*
+ * @file
+ * Provides the layout styles for layout_twocol_bricks.
+ */
+
+.layout--twocol-bricks {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.layout--twocol-bricks > .layout__region {
+  flex: 0 1 100%;
+}
+
+@media screen and (min-width: 40em) {
+  .layout--twocol-bricks > .layout__region--first-above,
+  .layout--twocol-bricks > .layout__region--second-above,
+  .layout--twocol-bricks > .layout__region--first-below,
+  .layout--twocol-bricks > .layout__region--second-below {
+    flex: 0 1 50%;
+  }
+}