isabelle/Falcon-PrestaShop-9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: isabelle:feature/extra-features
Branches Tags
isabelle:main isabelle:feature/extra-features isabelle:feature/falcon-PS9
...
compare: isabelle:c7cb5071219e4b7173a8ac70944cd8c9406bf29b
Branches Tags
isabelle:feature/extra-features isabelle:main isabelle:feature/falcon-PS9

9 Commits
feature/ex ... c7cb507121

Author SHA1 Message Date
Isabelle
c7cb507121 Merge branch 'feature/standard-styling' into feature/isabelle-edits 2025-12-24 11:53:03 +01:00
Isabelle
51bad8030e feat(standard-styling): Add button color map 2025-12-24 11:52:12 +01:00
Isabelle
1ccb71c8e0 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.
 2025-12-24 10:17:39 +01:00
Isabelle
00b79f12e2 feat(isabelle-edits): Clarify theme structure and add SVG icon support 
Improves theme organization by adopting a 7-in-1 SCSS structure.

Introduces support for SVG icons within templates, enhancing visual flexibility.

Adds a checkmark SVG asset.
 2025-12-24 09:33:55 +01:00
Isabelle
4ca5500e5f Merge branch 'feature/standard-styling' into feature/isabelle-edits 2025-12-23 09:35:48 +01:00
Isabelle
d5d1cd7874 Background and color utility classes & map 2025-12-22 12:02:19 +01:00
Isabelle
bae76ed030 Merge branch 'feature/standard-styling' into feature/isabelle-edits 2025-12-22 11:36:35 +01:00
Isabelle
871e42f4ba Add gap and font-size function classes 2025-12-22 11:35:05 +01:00
Isabelle
cf37d8a257 feat(isabelle-edits): Made grid & media queries more like bootstrap 5 
This branch was made to save edits that would make my life easier but are optional. These edits stray further form the original theme than the edits in the standard styles feature branch do, so if you are not used to them you night not like them. That is why I separated the branch.
 2025-12-22 10:49:47 +01:00
10 changed files with 238 additions and 92 deletions
Expand all files Collapse all files

49
falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss
View File

@ -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,,
);

24
falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss
View File

@ -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;

10
falcon/_dev/css/theme/custom/_custom.scss
View File

@ -5,14 +5,18 @@ 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/utilities";
@import "abstracts/functions";
@import "abstracts/mixins";
// Components: parts of the theme itself that are not associated with a module.
//@import "components/buttons";
@import "components/forms";
// Modules: Styling for specific modules.
@ -25,5 +29,7 @@ https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-patter
@import "layout/swiper";
// Pages
//@import "pages/category";
//@import "pages/checkout";
//@import "pages/home";
//@import "pages/listing";
//@import "pages/product";

17
falcon/_dev/css/theme/custom/abstracts/_functions.scss Normal file
View File

@ -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;
}
}

44
falcon/_dev/css/theme/custom/abstracts/_mixins.scss Normal file
View File

@ -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;
}
}

26
falcon/_dev/css/theme/custom/components/_buttons.scss Normal file
View File

@ -0,0 +1,26 @@
// 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;
}
.btn-outline-#{$name},
.btn-lg-outline-#{$name},
.btn-sm-outline-#{$name} {
color: $color;
&:hover,
&:focus,
&:active {
color: $color !important;
}
}
}

14
falcon/templates/_partials/header.tpl
View File

@ -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">

17
falcon/templates/index.tpl
View File

@ -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}

127
falcon/templates/layouts/layout-both-columns.tpl
View File

@ -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'}
{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 name='product_activation'}
{include file='catalog/_partials/product-activation.tpl'}
{/block}
{hook h="displayWrapperTop"}
<div class="container">
{block name='breadcrumb'}
{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>
<header id="header" class="l-header">
{block name='header'}
{include file='_partials/header.tpl'}
{/block}
</header>
{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>
<section id="wrapper">
{block name='notifications'}
{include file='_partials/notifications.tpl'}
{/block}
{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>
{/block}
<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'}
{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"}
<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>
<footer id="footer" class="l-footer js-footer">
{block name="footer"}
{include file="_partials/footer.tpl"}
{/block}
</div>
</div>
{hook h="displayWrapperBottom"}
</section>
<footer id="footer" class="l-footer js-footer">
{block name="footer"}
{include file="_partials/footer.tpl"}
{/block}
</footer>
</footer>
</main>
{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}
</body>
</body>
</html>

2
falcon/templates/layouts/layout-full-width.tpl
View File

@ -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>