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

@@ -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/abstracts/variables/bootstrap/_grid.scss

@@ -1,3 +1,21 @@
-$grid-columns:                12;
+// Made this more like the breakpoints used in Bootstrap 5
-$grid-gutter-width:           rem-calc(20px);
+$grid-breakpoints: (
-$grid-row-columns:            6;
+    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,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>