Merge pull request #408 from BeAPI/feature/fluid

cedric07 · web-flow · commit 3f087d232a05 · 2024-10-07T12:38:36.000+02:00
fluid feature
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;

Original file line number	Diff line number	Diff line change
`@@ -138,5 +138,5 @@`
`138`	`138`
`139`	`139`	`$width: column-px($device, $nb-column, $nb-gutter, true);`
`140`	`140`
`141`		`- @return calc((100% - #{$external-gutter * 2}) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))});`
	`141`	`+ @return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))});`
`142`	`142`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,6 @@`
`14`	`14`	`*/`
`15`	`15`
`16`	`16`	`@mixin container($size: $container-wide) {`
`17`		`- width: min(#{$size}, 100% - #{$external-gutter * 2});`
	`17`	`+ width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2));`
`18`	`18`	`margin-inline: auto;`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@`
`12`	`12`
`13`	`13`	`// Backend Classic editor container`
`14`	`14`	`.mce-content-body {`
	`15`	`+ width: #{$container-wide};`
`15`	`16`	`max-width: var(--responsive--alignwide-width);`
`16`	`17`	`margin: 0;`
`17`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@`
`33`	`33`	`&__menu-toggle {`
`34`	`34`	`position: absolute;`
`35`	`35`	`top: 14px;`
`36`		`- right: $external-gutter;`
	`36`	`+ right: var(--responsive--gutter);`
`37`	`37`	`z-index: 2;`
`38`	`38`	`width: 46px;`
`39`	`39`	`height: 46px;`
`@@ -45,7 +45,7 @@`
`45`	`45`
`46`	`46`	`@include rtl {`
`47`	`47`	`right: auto;`
`48`		`- left: $external-gutter;`
	`48`	`+ left: var(--responsive--gutter);`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`> span {`
`@@ -173,7 +173,7 @@`
`173`	`173`	`}`
`174`	`174`	`}`
`175`	`175`
`176`		`- @include breakpoints(lg, max) {`
	`176`	`+ @include breakpoints(mdl, max) {`
`177`	`177`	`&__menu {`
`178`	`178`	`position: absolute;`
`179`	`179`	`top: 0;`
`@@ -191,7 +191,7 @@`
`191`	`191`	`}`
`192`	`192`
`193`	`193`	`> div {`
`194`		`- padding: 76px #{$external-gutter * 2} 25px;`
	`194`	`+ padding: 76px calc(var(--responsive--gutter) * 2) 25px;`
`195`	`195`	`}`
`196`	`196`	`}`
`197`	`197`
`@@ -222,7 +222,7 @@`
`222`	`222`	`}`
`223`	`223`	`}`
`224`	`224`
`225`		`- @include breakpoints(sm, lg) {`
	`225`	`+ @include breakpoints(sm, mdl) {`
`226`	`226`	`#{$el}__menu {`
`227`	`227`	`right: 0;`
`228`	`228`	`left: auto;`
`@@ -241,7 +241,7 @@`
`241`	`241`	`}`
`242`	`242`	`}`
`243`	`243`
`244`		`- @include breakpoints(lg) {`
	`244`	`+ @include breakpoints(mdl) {`
`245`	`245`	`.container {`
`246`	`246`	`display: flex;`
`247`	`247`	`align-items: flex-start;`