diff --git a/falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss b/falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss index 3ef3427..22f3c42 100644 --- a/falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss +++ b/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; -$indigo: #6610f2; -$purple: #6f42c1; -$pink: #e83e8c; -$red: #dc3545; -$orange: #fd7e14; -$yellow: #ffc107; -$green: #28a745; -$teal: #20c997; -$cyan: #17a2b8; +$blue: #007bff; +$indigo: #6610f2; +$purple: #6f42c1; +$pink: #e83e8c; +$red: #dc3545; +$orange: #fd7e14; +$yellow: #ffc107; +$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; +$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,, +); diff --git a/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss b/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss index 7845a36..9b83776 100644 --- a/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss +++ b/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss @@ -1,3 +1,21 @@ -$grid-columns: 12; -$grid-gutter-width: rem-calc(20px); -$grid-row-columns: 6; +// 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; diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss index 6dcd960..e7fba9a 100644 --- a/falcon/_dev/css/theme/custom/_custom.scss +++ b/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"; diff --git a/falcon/_dev/css/theme/custom/abstracts/_functions.scss b/falcon/_dev/css/theme/custom/abstracts/_functions.scss new file mode 100644 index 0000000..cc4565e --- /dev/null +++ b/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; + } +} diff --git a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss index d4ec7ab..b541d01 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss +++ b/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"); } diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss index 73b6d30..17742e8 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss +++ b/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; +} diff --git a/falcon/templates/_partials/header.tpl b/falcon/templates/_partials/header.tpl index 83681c0..a6fb96e 100644 --- a/falcon/templates/_partials/header.tpl +++ b/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" *} + + {* +
+
+
+ {hook h='displayHeaderTopUsps'} +
+
+
+ *} +
diff --git a/falcon/templates/index.tpl b/falcon/templates/index.tpl index c17d03e..f6c8bee 100644 --- a/falcon/templates/index.tpl +++ b/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: + +
+
+
+
+ {hook h='displayCustomhtml1'} +
+
+ {hook h='displayHomeBanner1'} +
+
+
+
+ + *} {block name='hook_home'} {$HOOK_HOME nofilter} {/block} diff --git a/falcon/templates/layouts/layout-both-columns.tpl b/falcon/templates/layouts/layout-both-columns.tpl index e27ec56..db39344 100644 --- a/falcon/templates/layouts/layout-both-columns.tpl +++ b/falcon/templates/layouts/layout-both-columns.tpl @@ -25,101 +25,96 @@ - + {block name='head'} - {include file='_partials/head.tpl'} + {include file='_partials/head.tpl'} {/block} - + - + {block name='hook_after_body_opening_tag'} - {hook h='displayAfterBodyOpeningTag'} + {hook h='displayAfterBodyOpeningTag'} {/block}
- {block name='product_activation'} - {include file='catalog/_partials/product-activation.tpl'} - {/block} - - - -
- - {block name='notifications'} - {include file='_partials/notifications.tpl'} + {block name='product_activation'} + {include file='catalog/_partials/product-activation.tpl'} {/block} - {hook h="displayWrapperTop"} -
- {block name='breadcrumb'} - {include file='_partials/breadcrumb.tpl'} - {/block} - -
- {block name="left_column"} -
- {if $page.page_name == 'product'} - {hook h='displayLeftColumnProduct' product=$product category=$category} - {else} - {hook h="displayLeftColumn"} - {/if} -
+ - {block name="content_wrapper"} -
- {hook h="displayContentWrapperTop"} - {block name="content"} -

Hello world! This is HTML5 Boilerplate.

+
+ {block name='notifications'} + {include file='_partials/notifications.tpl'} + {/block} + {hook h="displayWrapperTop"} +
+ {block name='breadcrumb'} + {include file='_partials/breadcrumb.tpl'} {/block} - {hook h="displayContentWrapperBottom"} -
- {/block} +
+ {block name="left_column"} +
+ {if $page.page_name == 'product'} + {hook h='displayLeftColumnProduct' product=$product category=$category} + {else} + {hook h="displayLeftColumn"} + {/if} +
+ {/block} + {block name="content_wrapper"} +
+ {hook h="displayContentWrapperTop"} + {block name="content"} +

Hello world! This is HTML5 Boilerplate.

+ {/block} + {hook h="displayContentWrapperBottom"} +
+ {/block} + {block name="right_column"} +
+ {if $page.page_name == 'product'} + {hook h='displayRightColumnProduct'} + {else} + {hook h="displayRightColumn"} + {/if} +
+ {/block} +
+
+ {hook h="displayWrapperBottom"} +
- {block name="right_column"} -
- {if $page.page_name == 'product'} - {hook h='displayRightColumnProduct'} - {else} - {hook h="displayRightColumn"} - {/if} -
+
+ {block name="footer"} + {include file="_partials/footer.tpl"} {/block} -
-
- {hook h="displayWrapperBottom"} - - - + {block name='javascript_bottom'} - {include file="_partials/password-policy-template.tpl"} - {include file="_partials/javascript.tpl" javascript=$javascript.bottom} + {include file="_partials/password-policy-template.tpl"} + {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} - + diff --git a/falcon/templates/layouts/layout-full-width.tpl b/falcon/templates/layouts/layout-full-width.tpl index 83186a9..e16fd2e 100644 --- a/falcon/templates/layouts/layout-full-width.tpl +++ b/falcon/templates/layouts/layout-full-width.tpl @@ -28,7 +28,7 @@ {block name='right_column'}{/block} {block name='content_wrapper'} -
+
{hook h="displayContentWrapperTop"} {block name='content'}

Hello world! This is HTML5 Boilerplate.