From e57ade26f0e57cfcc977adccbead5803c4c62101 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Wed, 30 Jul 2025 17:01:41 +0100
Subject: [PATCH 1/5] use grid for 2 and 3 column layouts

---
 .../layout--threecol-33-34-33.html.twig       | 54 +++++++++++++++++++
 templates/layouts/layout--twocol.html.twig    | 45 ++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 templates/layouts/layout--threecol-33-34-33.html.twig
 create mode 100644 templates/layouts/layout--twocol.html.twig

diff --git a/templates/layouts/layout--threecol-33-34-33.html.twig b/templates/layouts/layout--threecol-33-34-33.html.twig
new file mode 100644
index 00000000..99c0a5f6
--- /dev/null
+++ b/templates/layouts/layout--threecol-33-34-33.html.twig
@@ -0,0 +1,54 @@
+{#
+/**
+ * @file
+ * Theme override 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>.
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--threecol-33-34-33',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top', 'lgd-row__full') }}>
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-third') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-third') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third', 'lgd-row__one-third') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom', 'lgd-row__full') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/templates/layouts/layout--twocol.html.twig b/templates/layouts/layout--twocol.html.twig
new file mode 100644
index 00000000..35f0f086
--- /dev/null
+++ b/templates/layouts/layout--twocol.html.twig
@@ -0,0 +1,45 @@
+{#
+/**
+ * @file
+ * Theme override 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>.
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--twocol',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    {% if content.top %}
+      <div {{ region_attributes.top.addClass('layout__region', 'layout__region--top', 'lgd-row__full') }}>
+        {{ content.top }}
+      </div>
+    {% endif %}
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-half') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-half') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.bottom %}
+      <div {{ region_attributes.bottom.addClass('layout__region', 'layout__region--bottom', 'lgd-row__full') }}>
+        {{ content.bottom }}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}

From a7931a990770a3dd749ccfeb42c3e4063ac84cbe Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Wed, 30 Jul 2025 17:16:35 +0100
Subject: [PATCH 2/5] remove default padding from layout, since we now have gap
 applying

---
 css/components/page-sections.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/css/components/page-sections.css b/css/components/page-sections.css
index 94cbb8dd..dd78fe17 100644
--- a/css/components/page-sections.css
+++ b/css/components/page-sections.css
@@ -1,3 +1,31 @@
+/*
+  Overrides from
+  localgov_paragraphs/modules/localgov_subsites_paragraphs/css/localgov-subsites-paragraphs.css
+
+  This is so that we only have the gap specified in our grid/custom CSS between
+  columns in page sections, rather than our gap + this extra padding.
+*/
+.paragraph--type--page-section .layout__region {
+  padding-bottom: 0;
+}
+.paragraph--type--page-section .layout--twocol .layout__region--first {
+  padding-right: 0;
+}
+.paragraph--type--page-section .layout--twocol .layout__region--second {
+  padding-left: 0;
+}
+.paragraph--type--page-section .layout--threecol-33-34-33 .layout__region--first {
+  padding-right: 0;
+}
+.paragraph--type--page-section .layout--threecol-33-34-33 .layout__region--second {
+  padding-right: 0;
+  padding-left: 0;
+}
+.paragraph--type--page-section .layout--threecol-33-34-33 .layout__region--third {
+  padding-left: 0;
+}
+
+/* Page sections */
 .lgd-page-section {
   color: var(--color-page-section-text-color);
   background-color: var(--color-page-section-background-color);

From 73558e163eced8dcffd3621cae662e155e09f243 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Thu, 31 Jul 2025 14:44:26 +0100
Subject: [PATCH 3/5] add new templates for layouts to use our grid system

---
 ...ut--localgov-fourcol-25-25-25-25.html.twig | 51 +++++++++++++++++++
 ...yout--localgov-threecol-33-34-33.html.twig | 45 ++++++++++++++++
 .../layouts/layout--localgov-twocol.html.twig | 36 +++++++++++++
 3 files changed, 132 insertions(+)
 create mode 100644 templates/layouts/layout--localgov-fourcol-25-25-25-25.html.twig
 create mode 100644 templates/layouts/layout--localgov-threecol-33-34-33.html.twig
 create mode 100644 templates/layouts/layout--localgov-twocol.html.twig

diff --git a/templates/layouts/layout--localgov-fourcol-25-25-25-25.html.twig b/templates/layouts/layout--localgov-fourcol-25-25-25-25.html.twig
new file mode 100644
index 00000000..b2bf7c9b
--- /dev/null
+++ b/templates/layouts/layout--localgov-fourcol-25-25-25-25.html.twig
@@ -0,0 +1,51 @@
+{#
+/**
+ * @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:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--fourcol-25-25-25-25',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-quarter') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-quarter') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third', 'lgd-row__one-quarter') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+    {% if content.fourth %}
+      <div {{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth', 'lgd-row__one-quarter') }}>
+        {{ content.fourth }}
+      </div>
+    {% endif %}
+
+  </div>
+{% endif %}
diff --git a/templates/layouts/layout--localgov-threecol-33-34-33.html.twig b/templates/layouts/layout--localgov-threecol-33-34-33.html.twig
new file mode 100644
index 00000000..219c39c3
--- /dev/null
+++ b/templates/layouts/layout--localgov-threecol-33-34-33.html.twig
@@ -0,0 +1,45 @@
+{#
+/**
+ * @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:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--threecol-33-34-33',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-third') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-third') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+    {% if content.third %}
+      <div {{ region_attributes.third.addClass('layout__region', 'layout__region--third', 'lgd-row__one-third') }}>
+        {{ content.third }}
+      </div>
+    {% endif %}
+
+  </div>
+{% endif %}
diff --git a/templates/layouts/layout--localgov-twocol.html.twig b/templates/layouts/layout--localgov-twocol.html.twig
new file mode 100644
index 00000000..f3ce61dd
--- /dev/null
+++ b/templates/layouts/layout--localgov-twocol.html.twig
@@ -0,0 +1,36 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a two-column layout.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--twocol',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+
+    {% if content.first %}
+      <div {{ region_attributes.first.addClass('layout__region', 'layout__region--first', 'lgd-row__one-half') }}>
+        {{ content.first }}
+      </div>
+    {% endif %}
+
+    {% if content.second %}
+      <div {{ region_attributes.second.addClass('layout__region', 'layout__region--second', 'lgd-row__one-half') }}>
+        {{ content.second }}
+      </div>
+    {% endif %}
+
+  </div>
+{% endif %}

From 1ef76fa513575a995432b82256a372d372174c75 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Wed, 1 Oct 2025 11:37:30 +0100
Subject: [PATCH 4/5] adds templates for one-col layout

---
 .../one-col/layout--localgov-onecol.html.twig | 26 +++++++++++++++++++
 .../layout--onecol--flexible.html.twig        | 25 ++++++++++++++++++
 .../layouts/one-col/layout--onecol.html.twig  | 25 ++++++++++++++++++
 3 files changed, 76 insertions(+)
 create mode 100644 templates/layouts/one-col/layout--localgov-onecol.html.twig
 create mode 100644 templates/layouts/one-col/layout--onecol--flexible.html.twig
 create mode 100644 templates/layouts/one-col/layout--onecol.html.twig

diff --git a/templates/layouts/one-col/layout--localgov-onecol.html.twig b/templates/layouts/one-col/layout--localgov-onecol.html.twig
new file mode 100644
index 00000000..5e04abc1
--- /dev/null
+++ b/templates/layouts/one-col/layout--localgov-onecol.html.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a one-column layout.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--onecol',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content', 'lgd-row__full') }}>
+      {{ content.content }}
+    </div>
+  </div>
+{% endif %}
diff --git a/templates/layouts/one-col/layout--onecol--flexible.html.twig b/templates/layouts/one-col/layout--onecol--flexible.html.twig
new file mode 100644
index 00000000..ce6d5784
--- /dev/null
+++ b/templates/layouts/one-col/layout--onecol--flexible.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme template to display a one-column **flexible** layout.
+ *
+ * Available variables:
+ * - content: The content for this layout.
+ * - attributes: HTML attributes for the layout <div>.
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--onecol',
+    'layout--onecol__flexible',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content', 'lgd-row__full') }}>
+      {{ content.content }}
+    </div>
+  </div>
+{% endif %}
diff --git a/templates/layouts/one-col/layout--onecol.html.twig b/templates/layouts/one-col/layout--onecol.html.twig
new file mode 100644
index 00000000..113325e7
--- /dev/null
+++ b/templates/layouts/one-col/layout--onecol.html.twig
@@ -0,0 +1,25 @@
+{#
+/**
+ * @file
+ * Theme override 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>.
+ */
+#}
+{%
+  set classes = [
+    'layout',
+    'layout--onecol',
+    'lgd-row',
+  ]
+%}
+{% if content %}
+  <div{{ attributes.addClass(classes) }}>
+    <div {{ region_attributes.content.addClass('layout__region', 'layout__region--content', 'lgd-row__full') }}>
+      {{ content.content }}
+    </div>
+  </div>
+{% endif %}

From 2de41fd331ccc28ca46a19a07f90710a0340ebe3 Mon Sep 17 00:00:00 2001
From: Mark Conroy <mark@mark.ie>
Date: Wed, 1 Oct 2025 11:37:44 +0100
Subject: [PATCH 5/5] moves templates into directories

---
 .../{ => four-col}/layout--localgov-fourcol-25-25-25-25.html.twig | 0
 .../{ => three-col}/layout--localgov-threecol-33-34-33.html.twig  | 0
 .../layouts/{ => three-col}/layout--threecol-33-34-33.html.twig   | 0
 templates/layouts/{ => two-col}/layout--localgov-twocol.html.twig | 0
 templates/layouts/{ => two-col}/layout--twocol.html.twig          | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 rename templates/layouts/{ => four-col}/layout--localgov-fourcol-25-25-25-25.html.twig (100%)
 rename templates/layouts/{ => three-col}/layout--localgov-threecol-33-34-33.html.twig (100%)
 rename templates/layouts/{ => three-col}/layout--threecol-33-34-33.html.twig (100%)
 rename templates/layouts/{ => two-col}/layout--localgov-twocol.html.twig (100%)
 rename templates/layouts/{ => two-col}/layout--twocol.html.twig (100%)

diff --git a/templates/layouts/layout--localgov-fourcol-25-25-25-25.html.twig b/templates/layouts/four-col/layout--localgov-fourcol-25-25-25-25.html.twig
similarity index 100%
rename from templates/layouts/layout--localgov-fourcol-25-25-25-25.html.twig
rename to templates/layouts/four-col/layout--localgov-fourcol-25-25-25-25.html.twig
diff --git a/templates/layouts/layout--localgov-threecol-33-34-33.html.twig b/templates/layouts/three-col/layout--localgov-threecol-33-34-33.html.twig
similarity index 100%
rename from templates/layouts/layout--localgov-threecol-33-34-33.html.twig
rename to templates/layouts/three-col/layout--localgov-threecol-33-34-33.html.twig
diff --git a/templates/layouts/layout--threecol-33-34-33.html.twig b/templates/layouts/three-col/layout--threecol-33-34-33.html.twig
similarity index 100%
rename from templates/layouts/layout--threecol-33-34-33.html.twig
rename to templates/layouts/three-col/layout--threecol-33-34-33.html.twig
diff --git a/templates/layouts/layout--localgov-twocol.html.twig b/templates/layouts/two-col/layout--localgov-twocol.html.twig
similarity index 100%
rename from templates/layouts/layout--localgov-twocol.html.twig
rename to templates/layouts/two-col/layout--localgov-twocol.html.twig
diff --git a/templates/layouts/layout--twocol.html.twig b/templates/layouts/two-col/layout--twocol.html.twig
similarity index 100%
rename from templates/layouts/layout--twocol.html.twig
rename to templates/layouts/two-col/layout--twocol.html.twig