Merge pull request #408 from BeAPI/feature/fluid

fluid feature
BeAPI · Oct 7, 2024 · 3f087d2 · 3f087d2
2 parents 1f0637e + fd9dd92
commit 3f087d2
Showing 10 changed files with 146 additions and 34 deletions.
diff --git a/src/scss/01-abstract/_variables.scss b/src/scss/01-abstract/_variables.scss
@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:math";
 
 /**
  * Variables
@@ -61,23 +62,48 @@ $palette: (
     ),
 );
 
-// ==========
-// Sizes
-// ==========
+/**
+* Sizes
+*
+* If is fluid website and for example you have a container of 1304px on figma -> column : 72px and gutter -> 40px
+*
+* The max width of the fluid size container is for example 2200px.
+*
+*     $column-preset: (
+*         // preset for desktop
+*         d : (
+*             column-width: 121.4724, // (2220 * 72 / 1304)  - Container width : 2200px (1304px on 1440px viewport) - Column width : 121px (72px on 1440px viewport)
+*             gutter-width: 67.4846, // (2200 * 40 / 1304) - Gutter width : 67px (40px on 1440px viewport)
+*             total-column: 12
+*         ),
+*         // preset for tablet
+*         t : (
+*             column-width: 121.4724,
+*             gutter-width: 67.4846,
+*             total-column: 12
+*         ),
+*         // preset for mobile
+*         m : (
+*             column-width: 36,
+*             gutter-width: 24,
+*             total-column: 6
+*         )
+*     );
+*/
 $column-preset: (
-    /* preset for desktop */
+    // preset for desktop
     d : (
         column-width: 60,
         gutter-width: 40,
         total-column: 12
     ),
-    /* preset for tablet */
+    // preset for tablet
     t : (
         column-width: 60,
         gutter-width: 34,
         total-column: 8
     ),
-    /* preset for mobile */
+    // preset for mobile
     m : (
         column-width: 58,
         gutter-width: 31,
@@ -95,7 +121,8 @@ $container-default: (
 $container-wide: (
     map.get(map.get($column-preset, d), column-width) * map.get(map.get($column-preset, d), total-column) + map.get(map.get($column-preset, d), gutter-width) * (map.get(map.get($column-preset, d), total-column) - 1)
 ) * 1px;
-$external-gutter: 25px;
+$external-gutter: 50px;
+$external-gutter-mobile: 20px;
 
 // ----
 // Breakpoints
@@ -107,7 +134,8 @@ $breakpoints: (
     admin-bar: 784, // admin bar height change
     md: 1024,
     mdl: 1200,
-    lg: $container-wide + $external-gutter,
+    container-default: math.div($container-default + $external-gutter-mobile * 2, 1px),
+    container-wide: math.div($container-wide + $external-gutter * 2, 1px),
 );
 // /!\ WARNING: If you use a breakpoint of 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1. Prefer to use the value 1279px.
 

diff --git a/src/scss/02-tools/_f-column.scss b/src/scss/02-tools/_f-column.scss
@@ -138,5 +138,5 @@
 
     $width: column-px($device, $nb-column, $nb-gutter, true);
 
-    @return calc((100% - #{$external-gutter * 2}) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))});
+    @return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))});
 }
diff --git a/src/scss/02-tools/_f-fluid-size.scss b/src/scss/02-tools/_f-fluid-size.scss
@@ -0,0 +1,32 @@
+/**
+ * Fluid size
+ *
+ * Converted from source:  : https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
+ *
+ * Convert value px to fluid typography and spacing using clamp
+ *
+ * @author Cédric Andrietti
+ *
+ * @param $min -> Minimal display size (mobile)
+ * @param $max -> Maximal display size (Desktop)
+ * @param $start -> Start breakpoint
+ * @param $end -> End breakpoint
+ *
+ * Examples :
+ *
+ *      h1 {
+ *          font-size: #{fluid-size(58px, 156px, sm, md)};
+ *          line-height: #{fluid-size(1.05, 1.2)};
+ *      }
+ *
+ */
+
+@use "sass:map";
+@use "sass:math";
+
+@function fluid-size($min, $max, $start: xs, $end: sm) {
+    $start: math.div(map.get($breakpoints, $start), 100);
+    $end: math.div(map.get($breakpoints, $end), 100);
+
+    @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max});
+}
diff --git a/src/scss/02-tools/_m-container.scss b/src/scss/02-tools/_m-container.scss
@@ -14,6 +14,6 @@
  */
 
 @mixin container($size: $container-wide) {
-    width: min(#{$size}, 100% - #{$external-gutter * 2});
+    width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2));
     margin-inline: auto;
 }
diff --git a/src/scss/02-tools/tools.scss b/src/scss/02-tools/tools.scss
@@ -11,6 +11,7 @@
 @import "./f-get-gutter-width";
 @import "./f-get-svg-url";
 @import "./f-strip-units";
+@import "./f-fluid-size";
 @import "./m-align";
 @import "./m-autofill";
 @import "./m-breakpoint";

diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss
@@ -10,6 +10,16 @@
     --heading--font-size-h5: 24px;
     --heading--font-size-h6: 18px;
 
+    /**
+    * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it
+    *
+    * --heading--font-size-h1: #{fluid-size(58px, 156px)};
+    * --heading--font-size-h2: #{fluid-size(47px, 96px)};
+    * --heading--font-size-h3: #{fluid-size(38px, 52px)};
+    * --heading--font-size-h4: #{fluid-size(32px, 45px)};
+    * --heading--font-size-h5: #{fluid-size(28px, 34px)};
+    */
+
     // Line height
     --heading--line-height-h1: 1.25;
     --heading--line-height-h2: 1.25;
@@ -27,6 +37,15 @@
     --paragraph--font-size-small: 14px;
     --paragraph--font-size-default: 16px;
 
+    /**
+    * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it
+    *
+    *  --paragraph--font-size-huge: #{fluid-size(28px, 32px)};
+    *  --paragraph--font-size-large: #{fluid-size(20px, 24px)};
+    *  --paragraph--font-size-small: #{fluid-size(12px, 14px)};
+    *  --paragraph--font-size-default: #{fluid-size(14px, 16px)};
+    */
+
     // line height
     --paragraph--line-height-huge: 1.4;
     --paragraph--line-height-large: 1.4;
@@ -41,11 +60,30 @@
     --spacing--block-3: 48px;
     --spacing--block-4: 64px;
 
+    /**
+    * Spacing fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it
+    *
+    * Fluid spacing :
+    * --spacing--block-1: #{fluid-size(16px, 32px)};
+    * --spacing--block-2: #{fluid-size(32px, 64px)};
+    * --spacing--block-3: #{fluid-size(48px, 96px)};
+    * --spacing--block-4: #{fluid-size(64px, 128px)};
+    *
+    * Fixed spacings :
+    * --spacing--fixed--block-1: 16px;
+    * ...
+    */
+
+    /*
+     * Gutters
+     */
+    --responsive--gutter: #{$external-gutter-mobile};
+
     /*
      * Alignments
      */
-    --responsive--aligndefault-width: calc(100% - #{$external-gutter * 2});
-    --responsive--alignwide-width: calc(100% - #{$external-gutter * 2});
+    --responsive--aligndefault-width: calc(100% - calc(var(--responsive--gutter) * 2));
+    --responsive--alignwide-width: calc(100% - calc(var(--responsive--gutter) * 2));
     --responsive--alignfull-width: 100%;
 
     /*
@@ -62,18 +100,6 @@
         --wp-admin-bar-height: 0rem; // for wp admin bar hider extension
     }
 
-    /*
-     * Alignments breakpoints
-     */
-
-    @media screen and (min-width: #{$container-default + $external-gutter * 2}) {
-        --responsive--aligndefault-width: #{$container-default};
-    }
-
-    @media screen and (min-width: #{$container-wide + $external-gutter * 2}) {
-        --responsive--alignwide-width: #{$container-wide};
-    }
-
     /*
      * A11y reduced motion
      */
@@ -99,10 +125,16 @@
     @include breakpoints(md) {
         /*
          * Spacing
+         * /!\ IMPORTANT : Remove it if you use fluid size function instead /!\
          */
         --spacing--block-1: 32px;
         --spacing--block-2: 64px;
         --spacing--block-3: 96px;
         --spacing--block-4: 128px;
+
+        /*
+         * Gutters
+         */
+        --responsive--gutter: #{$external-gutter};
     }
 }
diff --git a/src/scss/04-utilities/_container.scss b/src/scss/04-utilities/_container.scss
@@ -1,4 +1,9 @@
 /* Main Layout */
-.container {
+.container,
+.container-wide {
     @include container;
 }
+
+.container-default {
+    @include container($container-default);
+}
diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss
@@ -6,7 +6,8 @@
 
         @include heading(h1);
 
-        max-width: var(--responsive--aligndefault-width);
+        width: #{$container-wide};
+        max-width: var(--responsive--alignwide-width);
         margin-bottom: var(--spacing--block-3);
     }
 
@@ -51,19 +52,29 @@
     // Alignements horizontaux
     // ----
     > :where(*) {
+        width: #{$container-default};
         max-width: var(--responsive--aligndefault-width);
         margin-right: auto;
         margin-left: auto;
     }
 
     @include editor-only {
-        > .wp-block[class*="wp-block-acf"] {
+        > .wp-block[class*="wp-block-acf"],
+        > .wp-block[class*="wp-block-beapi-manual-block"],
+        > .wp-block[class*="wp-block-beapi-dynamic-block"] {
             width: 100%;
             max-width: none;
         }
 
+        > .wp-block[class*="wp-block-acf"].is-selected {
+            width: #{$container-wide};
+            max-width: var(--responsive--alignwide-width);
+        }
+
         // The template block must have a ".block" class. Example : <div class="block block--my-custom-block">
-        > :where(.wp-block[class*="wp-block-acf"]) :where(.block) {
+        > :where(.wp-block[class*="wp-block-acf"]) :where(.block),
+        > :where(.wp-block[class*="wp-block-beapi-manual-block"]) :where(.block),
+        > :where(.wp-block[class*="wp-block-beapi-dynamic-block"]) :where(.block) {
             width: $container-default;
             max-width: var(--responsive--aligndefault-width);
             margin-right: auto;
@@ -72,10 +83,12 @@
     }
 
     #{context-selector(".alignwide", "[data-align='wide']")} {
+        width: #{$container-wide};
         max-width: var(--responsive--alignwide-width);
     }
 
     #{context-selector(".alignfull", "[data-align='full']")} {
+        width: 100%;
         max-width: var(--responsive--alignfull-width);
     }
 

diff --git a/src/scss/06-blocks/core/_freeform.scss b/src/scss/06-blocks/core/_freeform.scss
@@ -12,6 +12,7 @@
 
         // Backend Classic editor container
         .mce-content-body {
+            width: #{$container-wide};
             max-width: var(--responsive--alignwide-width);
             margin: 0;
         }

diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss
@@ -33,7 +33,7 @@
     &__menu-toggle {
         position: absolute;
         top: 14px;
-        right: $external-gutter;
+        right: var(--responsive--gutter);
         z-index: 2;
         width: 46px;
         height: 46px;
@@ -45,7 +45,7 @@
 
         @include rtl {
             right: auto;
-            left: $external-gutter;
+            left: var(--responsive--gutter);
         }
 
         > span {
@@ -173,7 +173,7 @@
         }
     }
 
-    @include breakpoints(lg, max) {
+    @include breakpoints(mdl, max) {
         &__menu {
             position: absolute;
             top: 0;
@@ -191,7 +191,7 @@
             }
 
             > div {
-                padding: 76px #{$external-gutter * 2} 25px;
+                padding: 76px calc(var(--responsive--gutter) * 2) 25px;
             }
         }
 
@@ -222,7 +222,7 @@
         }
     }
 
-    @include breakpoints(sm, lg) {
+    @include breakpoints(sm, mdl) {
         #{$el}__menu {
             right: 0;
             left: auto;
@@ -241,7 +241,7 @@
         }
     }
 
-    @include breakpoints(lg) {
+    @include breakpoints(mdl) {
         .container {
             display: flex;
             align-items: flex-start;