feat(isabelle-edits): Modify index page layout

This new page structure for the home page makes it so you have more control over the index.tpl file. By default, if the index.tpl file is full width (meaning no side columns) the container becomes fluid and full-width.  For each section, you need to define a container, rows and columns.  This way you can easily have full-width background images for only certain sections.

falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss

@@ -1,6 +1,6 @@
 // Color system
 
-$white:    #fff;
+$white: #fff;
 $gray-100: #f8f9fa;
 $gray-200: #e9ecef;
 $gray-300: #dee2e6;
@@ -10,24 +10,33 @@ $gray-600: #6c757d;
 $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
-$black:    #000;
+$black: #000;
 
-$blue:    #007bff;
+$blue: #007bff;
-$indigo:  #6610f2;
+$indigo: #6610f2;
-$purple:  #6f42c1;
+$purple: #6f42c1;
-$pink:    #e83e8c;
+$pink: #e83e8c;
-$red:     #dc3545;
+$red: #dc3545;
-$orange:  #fd7e14;
+$orange: #fd7e14;
-$yellow:  #ffc107;
+$yellow: #ffc107;
-$green:   #28a745;
+$green: #28a745;
-$teal:    #20c997;
+$teal: #20c997;
-$cyan:    #17a2b8;
+$cyan: #17a2b8;
 
-$primary:       $blue;
+$success: $green;
-$secondary:     $gray-600;
+$info: $cyan;
-$success:       $green;
+$warning: #ff9a52;
-$info:          $cyan;
+$danger: $red;
-$warning:       #ff9a52;
+$light: $gray-100;
-$danger:        $red;
+$dark: $gray-800;
-$light:         $gray-100;
+
-$dark:          $gray-800;
+$primary: $blue;
+$secondary: $gray-600;
+
+// Map for utility classes
+$theme-colors: (
+    "primary": $primary,
+    "secondary": $secondary,
+    //"tertiary": $tertiary,
+    //"quaternary": $quaternary,,
+);

falcon/_dev/css/theme/_index.scss

@@ -5,4 +5,3 @@
 @import "layout/index";
 @import "components/index";
 
-@import "custom/custom";

falcon/_dev/css/theme/custom/_custom.scss

@@ -5,18 +5,15 @@ I am loosely following the 7 in 1 structure for better organization of the style
 https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1
 
 ⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
-Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html
-
 */
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
+@import "abstracts/utilities";
 //@import "abstracts/base";
 @import "abstracts/functions";
 @import "abstracts/mixins";
-//@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
-//@import "components/buttons";
 @import "components/forms";
 
 // Modules: Styling for specific modules.
@@ -29,7 +26,5 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
 @import "layout/swiper";
 
 // Pages
-//@import "pages/checkout";
+//@import "pages/category";
-//@import "pages/home";
-//@import "pages/listing";
 //@import "pages/product";

falcon/_dev/css/theme/custom/abstracts/_functions.scss

@@ -8,34 +8,10 @@
     }
 }
 
-// Font weight utility classes generator
-// Generates utility classes like .fw-100, .fw-200, etc.
-@for $i from 100 through 900 {
-    @if $i % 100 == 0 {
-        .fw-#{$i} {
-            font-weight: #{$i} !important;
-        }
-    }
-}
-
 // gap size utility classes generator
-// Generates utility classes like .gap-4, .gap-col-4, .gap-row-4
+// Generates utility classes like .gap-4
 @for $i from 1 through 35 {
     .gap-#{$i} {
         gap: rem-calc($i * 1px) !important;
     }
-    .gap-col-#{$i} {
-        column-gap: rem-calc($i * 1px) !important;
-    }
-    .gap-row-#{$i} {
-        row-gap: rem-calc($i * 1px) !important;
-    }
-}
-
-// hex to rgba function
-@function hex-to-rgba($hex, $alpha) {
-    $r: red($hex);
-    $g: green($hex);
-    $b: blue($hex);
-    @return rgba($r, $g, $b, $alpha);
 }

falcon/_dev/css/theme/custom/abstracts/_mixins.scss

@@ -42,32 +42,3 @@
         @content;
     }
 }
-
-// Mixin to add an after pseudo-element with a mask image to customize button colors
-/* Example: 
-
-.btn-arrow-right{
-    &::after {
-        @include btn-after("../img/arrow-right.svg");
-    }
-}
-    
-*/
-
-@mixin btn-after($url, $color: currentColor) {
-    content: "";
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    margin-left: 0.5em;
-    vertical-align: middle;
-    background-color: currentColor;
-    mask-image: url(#{$url});
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    -webkit-mask-image: url(#{$url});
-    -webkit-mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-}

falcon/_dev/css/theme/custom/abstracts/_utilities.scss

@@ -1,32 +1,3 @@
 // Header selector for interpolation
 // Example usage: #{$headings} { ... }
 $headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
-
-// Section Spacers
-$section-spacer: rem-calc(50px);
-$section-spacer-small: rem-calc(25px);
-
-.section-spacer-both {
-    margin-top: $section-spacer;
-    margin-bottom: $section-spacer;
-    @include bs5-media-breakpoint-up(lg) {
-        margin-top: calc($section-spacer * 1.5);
-        margin-bottom: calc($section-spacer * 1.5);
-    }
-    &--small {
-        margin-top: $section-spacer-small;
-        margin-bottom: $section-spacer-small;
-        @include bs5-media-breakpoint-up(lg) {
-            margin-top: calc($section-spacer-small * 2);
-            margin-bottom: calc($section-spacer-small * 2);
-        }
-    }
-}
-
-.section-spacer {
-    @extend .section-spacer-both;
-    margin-bottom: unset;
-    &--small {
-        margin-bottom: unset;
-    }
-}

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -1,16 +0,0 @@
-// To customize text colors per button, use this map
-$btn-color: (
-    "primary": $white,
-    "secondary": $white,
-    "light": $primary,
-    "dark": $white,
-);
-
-// Generate button color overrides from the map
-@each $name, $color in $btn-color {
-    .btn-#{$name},
-    .btn-lg-#{$name},
-    .btn-sm-#{$name} {
-        color: $color !important;
-    }
-}

falcon/_dev/js/theme/index.js

@@ -79,19 +79,4 @@ $(() => {
     $(".js-select-link").on("change", ({ target }) => {
         window.location.href = $(target).val();
     });
-
-    // Postcode input formatting
-    const $postCodeInput = $("input[name='postcode']");
-    $postCodeInput.on("input", function () {
-        let value = $(this).val();
-
-        // Match 4 digits followed by 2 letters (e.g., 1234AB)
-        const match = value.match(/^(\d{4})([a-zA-Z]{2})$/);
-
-        if (match) {
-            // Add space between numbers and letters
-            const formatted = `${match[1]} ${match[2]}`;
-            $(this).val(formatted);
-        }
-    });
 });

falcon/modules/is_favoriteproducts/views/templates/hook/button-product.tpl

@@ -1,29 +0,0 @@
-
-<div class="col-auto mt-2 px-1">
-    <a
-        class="product-page__action-btn btn btn-light shadow rounded-circle favorite-btn p-2"
-        href="#"
-        data-action="toggleFavorite"
-        data-active="false"
-        {if isset($product.id) && isset($product.id_product_attribute)}
-            data-key="{$product.id}_{$product.id_product_attribute}"
-        {/if}
-    >
-        <div class="favorite-btn__content favorite-btn__content--added">
-            {capture name="svg_output"}{svg_icon file='heart.svg' }{/capture}
-            {if $smarty.capture.svg_output}
-                {$smarty.capture.svg_output nofilter}
-            {else}
-                <span class="material-icons product-page__action-btn-icon d-block">favorite</span>
-            {/if}
-        </div>
-        <div class="favorite-btn__content favorite-btn__content--add">
-             {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
-            {if $smarty.capture.svg_output}
-                {$smarty.capture.svg_output nofilter}
-            {else}
-                <span class="material-icons product-page__action-btn-icon d-block">favorite_border</span>
-            {/if}
-        </div>
-    </a>
-</div>

falcon/modules/is_favoriteproducts/views/templates/hook/button.tpl

@@ -1,28 +0,0 @@
-
-<a
-    class="product-miniature__functional-btn product-miniature__functional-btn--top btn btn-light shadow rounded-circle favorite-btn"
-    href="#"
-    data-action="toggleFavorite"
-    data-active="false"
-    {if isset($product.id) && isset($product.id_product_attribute)}
-        data-key="{$product.id}_{$product.id_product_attribute}"
-    {/if}
->
-    <div class="favorite-btn__content favorite-btn__content--added">
-        {capture name="svg_output"}{svg_icon file='heart.svg'}{/capture}
-        {if $smarty.capture.svg_output}
-            {$smarty.capture.svg_output nofilter}
-        {else}
-                <span class="material-icons product-miniature__functional-btn-icon d-block">favorite</span>
-        {/if}
-    </div>
-    <div class="favorite-btn__content favorite-btn__content--add">
-        {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
-        {if $smarty.capture.svg_output}
-            {$smarty.capture.svg_output nofilter}
-        {else}
-            <span class="material-icons product-miniature__functional-btn-icon d-block">favorite_border</span>
-        {/if}
-        
-    </div>
-</a>

falcon/modules/ps_contactinfo/ps_contactinfo.tpl

@@ -28,13 +28,7 @@
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Store information' d='Shop.Theme.Global'}</span>
     <a href="#footer_contact_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+      <i class="material-icons d-block"></i>
-        {if $smarty.capture.svg_output}
-        <span style="margin-bottom: 3px;">
-            {$smarty.capture.svg_output nofilter}
-        {else}
-            <i class="material-icons d-block"></i>
-        {/if}
     </a>
   </div>
 

falcon/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl

@@ -28,13 +28,7 @@
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
     <a href="#footer_account_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+      <i class="material-icons d-block"></i>
-        {if $smarty.capture.svg_output}
-        <span style="margin-bottom: 3px;">
-            {$smarty.capture.svg_output nofilter}
-        {else}
-            <i class="material-icons d-block"></i>
-        {/if}
     </a>
   </div>
 

falcon/modules/ps_customersignin/ps_customersignin.tpl

@@ -34,12 +34,7 @@
     {/if}
   >
     <div class="header-top__icon-container">
-        {capture name="svg_output"}{svg_icon file='person.svg'}{/capture}
+      <span class="header-top__icon material-icons">person</span>
-        {if $smarty.capture.svg_output}
-            {$smarty.capture.svg_output nofilter}
-        {else}
-            <span class="header-top__icon material-icons">person</span>
-        {/if}
     </div>
   </a>
 </div>

falcon/modules/ps_linklist/views/templates/hook/linkblock-column.tpl

@@ -4,13 +4,7 @@
     <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
       <span class="h4 mb-0">{$linkBlock.title}</span>
       <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+        <i class="material-icons d-block"></i>
-        {if $smarty.capture.svg_output}
-        <span style="margin-bottom: 3px;">
-            {$smarty.capture.svg_output nofilter}
-        {else}
-            <i class="material-icons d-block"></i>
-        {/if}
       </a>
     </div>
     <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">

falcon/modules/ps_linklist/views/templates/hook/linkblock.tpl

@@ -29,13 +29,7 @@
       <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
         <span class="h4 mb-0">{$linkBlock.title}</span>
         <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-            {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
+          <i class="material-icons d-block"></i>
-            {if $smarty.capture.svg_output}
-            <span style="margin-bottom: 3px;">
-                {$smarty.capture.svg_output nofilter}
-            {else}
-                <i class="material-icons d-block"></i>
-            {/if}
         </a>
       </div>
       <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">

falcon/modules/ps_mainmenu/ps_mainmenu.tpl

@@ -21,14 +21,9 @@
             >
               <span class="align-self-center">{$node.label}</span>
               {if $node.children|count}
-                {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
-                {if $smarty.capture.svg_output}
                 <span class="d-none d-md-block pl-1" style="margin-bottom: 3px;">
-                    {$smarty.capture.svg_output nofilter}
+                    {svg_icon file='chevron_down.svg' }  
                 </span>
-                {else}
-                    <i class="material-icons d-block"></i>
-                {/if}
               {/if}
             </a>
             {if $node.children|count}

falcon/templates/_partials/header.tpl

@@ -33,6 +33,20 @@
 {/block}
 
 {block name='header_top'}
+    {* Optional: Add USP bar at the top of the header
+    Uncomment the code below to enable it 
+    Use the uspanywhere module and hook to "displayHeaderTopUsps" *}
+
+    {*
+    <div class="header-cta d-none d-lg-block py-2 py-lg-3 bg-primary">
+        <div class="container">
+            <div class="row d-flex gap-20">
+                {hook h='displayHeaderTopUsps'}
+            </div>
+        </div> 
+    </div> 
+    *}
+
     <div class="js-header-top-wrapper">
         <div class="header-top js-header-top">
             <div class="header-top__content pb-md-0 py-2">

falcon/templates/_partials/pagination.tpl

@@ -26,43 +26,38 @@
 
 {block name='pagination_page_list'}
   {if $pagination.should_be_displayed}
-    <div class="d-flex justify-content-between align-items-center">
+    <nav>
-        <div class="results__block">
+      <ul class="pagination justify-content-center mt-4 mb-2">
-            {l s='%curr_numer% van %total_items% resultaten' sprintf=['%curr_numer%' => $pagination.items_shown_to,'%total_items%' => $pagination.total_items] d='Shop.Theme.Actions'}
+        {foreach from=$pagination.pages item="page"}
-        </div>
+          <li  class="page-item{if $page.current} active{/if} {if $page.type === 'spacer'}disabled{/if}">
-        <nav>
+            {if $page.type === 'spacer'}
-            <ul class="pagination justify-content-center m-0">
+              <span
-                {foreach from=$pagination.pages item="page"}
+                rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
-                <li  class="page-item{if $page.current} active{/if} {if $page.type === 'spacer'}disabled{/if}">
+                href="#"
-                    {if $page.type === 'spacer'}
+                class="page-link"
-                    <span
+              >
-                        rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
+                &hellip;
-                        href="#"
+              </span>
-                        class="page-link"
+            {else}
-                    >
+              <a
-                        &hellip;
+                rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
-                    </span>
+                href="{$page.url}"
-                    {else}
+                class="page-link {['disabled' => !$page.clickable, 'js-search-link' => true]|classnames}"
-                    <a
+              >
-                        rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
+                {if $page.type === 'previous'}
-                        href="{$page.url}"
+                  <span class="material-icons font-reset align-middle">keyboard_arrow_left</span>
-                        class="page-link {['disabled' => !$page.clickable, 'js-search-link' => true]|classnames}"
+                  <span class="sr-only">{l s='Previous' d='Shop.Theme.Actions'}</span>
-                    >
+                {elseif $page.type === 'next'}
-                        {if $page.type === 'previous'}
+                  <span class="material-icons font-reset align-middle">keyboard_arrow_right</span>
-                        <span class="material-icons font-reset align-middle">keyboard_arrow_left</span>
+                  <span class="sr-only">{l s='Next' d='Shop.Theme.Actions'}</span>
-                        <span class="sr-only">{l s='Previous' d='Shop.Theme.Actions'}</span>
+                {else}
-                        {elseif $page.type === 'next'}
+                  {$page.page}
-                        <span class="material-icons font-reset align-middle">keyboard_arrow_right</span>
+                {/if}
-                        <span class="sr-only">{l s='Next' d='Shop.Theme.Actions'}</span>
+              </a>
-                        {else}
+            {/if}
-                        {$page.page}
+          </li>
-                        {/if}
+        {/foreach}
-                    </a>
+      </ul>
-                    {/if}
+    </nav>
-                </li>
-                {/foreach}
-            </ul>
-        </nav>
-    </div>
   {/if}
 {/block}

falcon/templates/catalog/_partials/category-footer.tpl

@@ -1,15 +1,7 @@
-{* Defensive: Handles LazyArray objects for category *}
-{if is_object($category)}
-  {$category = $category|json_encode|json_decode:true}
-  {if isset($category.category)}
-    {$category = $category.category}
-  {/if}
-{/if}
-
 <div id="js-product-list-footer">
-    {if isset($category.additional_description) && $category.additional_description && $listing.pagination.items_shown_from == 1}
+    {if $category.additional_description && $listing.pagination.items_shown_from == 1}
       <div id="category-description-2" class="cms-content my-3">
         {$category.additional_description nofilter}
       </div>
     {/if}
-</div>
+</div>

falcon/templates/catalog/_partials/miniatures/product.tpl

@@ -26,7 +26,7 @@
   {$listingType = $type|default:'listing'}
   <div
     {if $listingType === 'listing'}
-      class="products-list__block col col-sm-6 col-lg-4 col-xl-3"
+      class="products-list__block products-list__block--grid"
     {elseif $listingType === 'slider'}
       class="swiper-slide product-slider__item col-6 col-md-4 col-lg-3"
     {/if}

falcon/templates/index.tpl

@@ -29,6 +29,23 @@
         {block name='page_content_top'}{/block}
 
         {block name='page_content'}
+          {* Define containers, rows and columns here for each section *}
+          {* Example:
+
+          <section id="home_hero" class="mt-0">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-6 displayCustomhtml1">
+                            {hook h='displayCustomhtml1'}
+                        </div>
+                        <div class="col-6 displayHomeBanner1">
+                            {hook h='displayHomeBanner1'}
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+          *}
           {block name='hook_home'}
             {$HOOK_HOME nofilter}
           {/block}

falcon/templates/layouts/layout-both-columns.tpl

@@ -25,101 +25,96 @@
 <!doctype html>
 <html lang="{$language.locale}">
 
-  <head>
+<head>
     {block name='head'}
-      {include file='_partials/head.tpl'}
+        {include file='_partials/head.tpl'}
     {/block}
-  </head>
+</head>
 
-  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">
+<body id="{$page.page_name}" class="{$page.body_classes|classnames}">
 
     {block name='hook_after_body_opening_tag'}
-      {hook h='displayAfterBodyOpeningTag'}
+        {hook h='displayAfterBodyOpeningTag'}
     {/block}
 
     <main class="l-main">
-      {block name='product_activation'}
+        {block name='product_activation'}
-        {include file='catalog/_partials/product-activation.tpl'}
+            {include file='catalog/_partials/product-activation.tpl'}
-      {/block}
-
-      <header id="header" class="l-header">
-        {block name='header'}
-          {include file='_partials/header.tpl'}
-        {/block}
-      </header>
-
-      <section id="wrapper">
-
-        {block name='notifications'}
-          {include file='_partials/notifications.tpl'}
         {/block}
 
-        {hook h="displayWrapperTop"}
+        <header id="header" class="l-header">
-        <div class="container">
+            {block name='header'}
-          {block name='breadcrumb'}
+                {include file='_partials/header.tpl'}
-            {include file='_partials/breadcrumb.tpl'}
-          {/block}
-
-          <div class="row">
-            {block name="left_column"}
-              <div id="left-column" class="col-12 col-md-4 col-lg-3">
-                {if $page.page_name == 'product'}
-                  {hook h='displayLeftColumnProduct' product=$product category=$category}
-                {else}
-                  {hook h="displayLeftColumn"}
-                {/if}
-              </div>
             {/block}
+        </header>
 
-            {block name="content_wrapper"}
+        <section id="wrapper">
-              <div id="content-wrapper" class="js-content-wrapper left-column right-column col-md-4 col-lg-6">
+            {block name='notifications'}
-                {hook h="displayContentWrapperTop"}
+                {include file='_partials/notifications.tpl'}
-                {block name="content"}
+            {/block}
-                  <p>Hello world! This is HTML5 Boilerplate.</p>
+            {hook h="displayWrapperTop"}
+            <div class="{if $page.page_name == 'index' }container-fluid p-0 overflow-hidden{else} container {/if}">
+                {block name='breadcrumb'}
+                    {include file='_partials/breadcrumb.tpl'}
                 {/block}
-                {hook h="displayContentWrapperBottom"}
+                    <div {if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}class="row"{/if}>
-              </div>
+                    {block name="left_column"}
-            {/block}
+                        <div id="left-column" class="col-12 col-md-4 col-lg-3">
+                            {if $page.page_name == 'product'}
+                                {hook h='displayLeftColumnProduct' product=$product category=$category}
+                            {else}
+                                {hook h="displayLeftColumn"}
+                            {/if}
+                        </div>
+                    {/block}
+                    {block name="content_wrapper"}
+                        <div id="content-wrapper" class="js-content-wrapper left-column right-column col-md-4 col-lg-6">
+                            {hook h="displayContentWrapperTop"}
+                            {block name="content"}
+                                <p>Hello world! This is HTML5 Boilerplate.</p>
+                            {/block}
+                            {hook h="displayContentWrapperBottom"}
+                        </div>
+                    {/block}
+                    {block name="right_column"}
+                        <div id="right-column" class="col-12 col-md-4 col-lg-3">
+                            {if $page.page_name == 'product'}
+                                {hook h='displayRightColumnProduct'}
+                            {else}
+                                {hook h="displayRightColumn"}
+                            {/if}
+                        </div>
+                    {/block}
+                </div>
+            </div>
+            {hook h="displayWrapperBottom"}
+        </section>
 
-            {block name="right_column"}
+        <footer id="footer" class="l-footer js-footer">
-              <div id="right-column" class="col-12 col-md-4 col-lg-3">
+            {block name="footer"}
-                {if $page.page_name == 'product'}
+                {include file="_partials/footer.tpl"}
-                  {hook h='displayRightColumnProduct'}
-                {else}
-                  {hook h="displayRightColumn"}
-                {/if}
-              </div>
             {/block}
-          </div>
+        </footer>
-        </div>
-        {hook h="displayWrapperBottom"}
-      </section>
-
-      <footer id="footer" class="l-footer js-footer">
-        {block name="footer"}
-          {include file="_partials/footer.tpl"}
-        {/block}
-      </footer>
 
     </main>
 
     {block name='javascript_bottom'}
-      {include file="_partials/password-policy-template.tpl"}
+        {include file="_partials/password-policy-template.tpl"}
-      {include file="_partials/javascript.tpl" javascript=$javascript.bottom}
+        {include file="_partials/javascript.tpl" javascript=$javascript.bottom}
     {/block}
 
     {block name='hook_before_body_closing_tag'}
-      {hook h='displayBeforeBodyClosingTag'}
+        {hook h='displayBeforeBodyClosingTag'}
     {/block}
 
     {block name='mobile-modals'}
-      {include file="_partials/mobile-modals.tpl"}
+        {include file="_partials/mobile-modals.tpl"}
     {/block}
 
     {block name='page-loader'}
-      {include file="_partials/page-loader.tpl"}
+        {include file="_partials/page-loader.tpl"}
     {/block}
 
-  </body>
+</body>
 
 </html>

falcon/templates/layouts/layout-full-width.tpl

@@ -28,7 +28,7 @@
 {block name='right_column'}{/block}
 
 {block name='content_wrapper'}
-  <div id="content-wrapper" class="col-12 js-content-wrapper">
+  <div id="content-wrapper" class="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}col-12 {/if}js-content-wrapper">
     {hook h="displayContentWrapperTop"}
     {block name='content'}
       <p>Hello world! This is HTML5 Boilerplate.</p>