Skip to content

Commit

Permalink
Merge pull request #408 from BeAPI/feature/fluid
Browse files Browse the repository at this point in the history
fluid feature
cedric07 authored Oct 7, 2024
2 parents 1f0637e + fd9dd92 commit 3f087d2
Showing 10 changed files with 146 additions and 34 deletions.
44 changes: 36 additions & 8 deletions src/scss/01-abstract/_variables.scss
Original file line number Diff line number Diff line change
@@ -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.

2 changes: 1 addition & 1 deletion src/scss/02-tools/_f-column.scss
Original file line number Diff line number Diff line change
@@ -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))});
}
32 changes: 32 additions & 0 deletions src/scss/02-tools/_f-fluid-size.scss
Original file line number Diff line number Diff line change
@@ -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});
}
2 changes: 1 addition & 1 deletion src/scss/02-tools/_m-container.scss
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions src/scss/02-tools/tools.scss
Original file line number Diff line number Diff line change
@@ -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";
60 changes: 46 additions & 14 deletions src/scss/03-base/_variables-css.scss
Original file line number Diff line number Diff line change
@@ -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};
}
}
7 changes: 6 additions & 1 deletion src/scss/04-utilities/_container.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
/* Main Layout */
.container {
.container,
.container-wide {
@include container;
}

.container-default {
@include container($container-default);
}
19 changes: 16 additions & 3 deletions src/scss/06-blocks/_gutenberg.scss
Original file line number Diff line number Diff line change
@@ -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);
}

1 change: 1 addition & 0 deletions src/scss/06-blocks/core/_freeform.scss
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@

// Backend Classic editor container
.mce-content-body {
width: #{$container-wide};
max-width: var(--responsive--alignwide-width);
margin: 0;
}
12 changes: 6 additions & 6 deletions src/scss/08-template-parts/_header.scss
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 3f087d2

Please sign in to comment.