Merge branch 'feature_old/isabelle-edits' into feature_old/standard-styling

Adds utility classes for spacing, headings, and borders to provide more flexible styling options.

This commit introduces:
- Spacing utilities with responsive adjustments for different screen sizes.
- A heading selector for simplified styling of heading elements.
- A border utility for applying a consistent border style.

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

@@ -10,6 +10,8 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
 */
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
+@import "abstracts/functions";
+@import "abstracts/mixins";
 @import "abstracts/utilities";
 //@import "abstracts/base";
 

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

@@ -46,7 +46,7 @@
 // Mixin to add an after pseudo-element with a mask image to customize button colors
 /* Example: 
 
-.btn-arrow-right{
+.btn{
     &::after {
         @include btn-after("../img/arrow-right.svg");
     }

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

@@ -1,3 +1,30 @@
+// Spacers
+$section-spacer: rem-calc(50px);
+$section-spacer-small: rem-calc(25px);
+
+.section-spacer {
+    margin-top: $section-spacer;
+    @include bs5-media-breakpoint-up(lg) {
+        margin-top: calc($section-spacer * 1.5);
+    }
+    &--small {
+        margin-top: $section-spacer-small;
+        @include bs5-media-breakpoint-up(lg) {
+            margin-top: calc($section-spacer-small * 1.5);
+        }
+    }
+}
+
 // Header selector for interpolation
 // Example usage: #{$headings} { ... }
 $headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
+
+// Background
+.bg__block {
+    // background: url(../img/bg.svg) repeat center center, $tertiary;
+}
+
+// Border
+.bordered {
+    border: 1px solid $border-color !important;
+}

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/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,13 +25,13 @@
 <!doctype html>
 <html lang="{$language.locale}">
 
-  <head>
+<head>
     {block name='head'}
         {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'}
@@ -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'}
@@ -120,6 +115,6 @@
         {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>