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

@@ -23,11 +23,20 @@ $green:   #28a745;
 $teal: #20c997;
 $cyan: #17a2b8;
 
-$primary:       $blue;
-$secondary:     $gray-600;
 $success: $green;
 $info: $cyan;
 $warning: #ff9a52;
 $danger: $red;
 $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/abstracts/variables/bootstrap/_grid.scss

@@ -1,3 +1,21 @@
+// Made this more like the breakpoints used in Bootstrap 5
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px,
+);
+
+$container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1320px,
+);
+
 $grid-columns: 12;
 $grid-gutter-width: rem-calc(20px);
 $grid-row-columns: 6;

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

@@ -1,11 +1,19 @@
-// NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
+/* 
+This is the main custom SCSS file for the Falcon theme. 
+
+I am loosely following the 7 in 1 structure for better organization of the styles. Learn more here:
+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
+*/
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
+@import "abstracts/utilities";
 //@import "abstracts/base";
-//@import "abstracts/utilities";
+@import "abstracts/functions";
+@import "abstracts/mixins";
 
 // Components: parts of the theme itself that are not associated with a module.
-//@import "components/";
 @import "components/forms";
 
 // Modules: Styling for specific modules.

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

@@ -0,0 +1,17 @@
+@use "sass:math";
+
+// Font size utility classes generator
+// Generates utility classes like .fs-14, .fs-16, etc.
+@for $i from 8 through 72 {
+    .fs-#{$i} {
+        font-size: rem-calc($i * 1px) !important;
+    }
+}
+
+// gap size utility classes generator
+// Generates utility classes like .gap-4
+@for $i from 1 through 35 {
+    .gap-#{$i} {
+        gap: rem-calc($i * 1px) !important;
+    }
+}

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

@@ -0,0 +1,44 @@
+// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4)
+// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass
+
+@mixin bs5-media-breakpoint-up($name) {
+    $min: map-get($grid-breakpoints, $name);
+    @if $min and $min > 0 {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-down($name) {
+    $max: map-get($grid-breakpoints, $name);
+    @if $max {
+        @media (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-between($lower, $upper) {
+    $min: map-get($grid-breakpoints, $lower);
+    $max: map-get($grid-breakpoints, $upper);
+    @if $min and $max {
+        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    }
+}
+
+@mixin bs5-media-breakpoint-only($name) {
+    $breakpoint-names: map-keys($grid-breakpoints);
+    $index: index($breakpoint-names, $name);
+    $next-name: nth($breakpoint-names, $index + 1);
+
+    @include bs5-media-breakpoint-between($name, $next-name) {
+        @content;
+    }
+}

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

@@ -0,0 +1,3 @@
+// Header selector for interpolation
+// Example usage: #{$headings} { ... }
+$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";

falcon/_dev/img/checkmark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
+  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
+</svg>

falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl

@@ -9,7 +9,12 @@
 					   name="s"
 					   value="{$search_string}">
 				<button type="submit" class="search-form__btn btn">
-					<span class="material-icons">search</span>
+                    {capture name="svg_output"}{svg_icon file='search.svg'}{/capture}
+                    {if $smarty.capture.svg_output}
+                        {$smarty.capture.svg_output nofilter}
+                    {else}
+                        <span class="header-top__icon material-icons">search</span>
+                    {/if}
 				</button>
 			</div>
 		</form>

falcon/templates/_partials/header.tpl

@@ -33,11 +33,24 @@
 {/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">
                 <div class="container">
-
                     <div class="row header-top__row">
 
                         <div class="col flex-grow-0 header-top__block header-top__block--menu-toggle d-block d-md-none">

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

@@ -49,18 +49,15 @@
         </header>
 
         <section id="wrapper">
-
             {block name='notifications'}
                 {include file='_partials/notifications.tpl'}
             {/block}
-
             {hook h="displayWrapperTop"}
-        <div class="container">
+            <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}
-
-          <div class="row">
+                    <div {if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}class="row"{/if}>
                     {block name="left_column"}
                         <div id="left-column" class="col-12 col-md-4 col-lg-3">
                             {if $page.page_name == 'product'}
@@ -70,7 +67,6 @@
                             {/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"}
@@ -80,7 +76,6 @@
                             {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'}

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>