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

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
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.