Skip to content

Commit 3f087d2

Browse files
cedric07cedric07
authored
Merge pull request #408 from BeAPI/feature/fluid
fluid feature
2 parents 1f0637e + fd9dd92 commit 3f087d2

File tree

10 files changed

+146
-34
lines changed

10 files changed

+146
-34
lines changed

‎src/scss/01-abstract/_variables.scss

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use "sass:map";
2+
@use "sass:math";
23

34
/**
45
* Variables
@@ -61,23 +62,48 @@ $palette: (
6162
),
6263
);
6364

64-
// ==========
65-
// Sizes
66-
// ==========
65+
/**
66+
* Sizes
67+
*
68+
* If is fluid website and for example you have a container of 1304px on figma -> column : 72px and gutter -> 40px
69+
*
70+
* The max width of the fluid size container is for example 2200px.
71+
*
72+
* $column-preset: (
73+
* // preset for desktop
74+
* d : (
75+
* column-width: 121.4724, // (2220 * 72 / 1304) - Container width : 2200px (1304px on 1440px viewport) - Column width : 121px (72px on 1440px viewport)
76+
* gutter-width: 67.4846, // (2200 * 40 / 1304) - Gutter width : 67px (40px on 1440px viewport)
77+
* total-column: 12
78+
* ),
79+
* // preset for tablet
80+
* t : (
81+
* column-width: 121.4724,
82+
* gutter-width: 67.4846,
83+
* total-column: 12
84+
* ),
85+
* // preset for mobile
86+
* m : (
87+
* column-width: 36,
88+
* gutter-width: 24,
89+
* total-column: 6
90+
* )
91+
* );
92+
*/
6793
$column-preset: (
68-
/* preset for desktop */
94+
// preset for desktop
6995
d : (
7096
column-width: 60,
7197
gutter-width: 40,
7298
total-column: 12
7399
),
74-
/* preset for tablet */
100+
// preset for tablet
75101
t : (
76102
column-width: 60,
77103
gutter-width: 34,
78104
total-column: 8
79105
),
80-
/* preset for mobile */
106+
// preset for mobile
81107
m : (
82108
column-width: 58,
83109
gutter-width: 31,
@@ -95,7 +121,8 @@ $container-default: (
95121
$container-wide: (
96122
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)
97123
) * 1px;
98-
$external-gutter: 25px;
124+
$external-gutter: 50px;
125+
$external-gutter-mobile: 20px;
99126

100127
// ----
101128
// Breakpoints
@@ -107,7 +134,8 @@ $breakpoints: (
107134
admin-bar: 784, // admin bar height change
108135
md: 1024,
109136
mdl: 1200,
110-
lg: $container-wide + $external-gutter,
137+
container-default: math.div($container-default + $external-gutter-mobile * 2, 1px),
138+
container-wide: math.div($container-wide + $external-gutter * 2, 1px),
111139
);
112140
// /!\ 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.
113141

‎src/scss/02-tools/_f-column.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,5 +138,5 @@
138138

139139
$width: column-px($device, $nb-column, $nb-gutter, true);
140140

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))});
142142
}

‎src/scss/02-tools/_f-fluid-size.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Fluid size
3+
*
4+
* Converted from source: : https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
5+
*
6+
* Convert value px to fluid typography and spacing using clamp
7+
*
8+
* @author Cédric Andrietti
9+
*
10+
* @param $min -> Minimal display size (mobile)
11+
* @param $max -> Maximal display size (Desktop)
12+
* @param $start -> Start breakpoint
13+
* @param $end -> End breakpoint
14+
*
15+
* Examples :
16+
*
17+
* h1 {
18+
* font-size: #{fluid-size(58px, 156px, sm, md)};
19+
* line-height: #{fluid-size(1.05, 1.2)};
20+
* }
21+
*
22+
*/
23+
24+
@use "sass:map";
25+
@use "sass:math";
26+
27+
@function fluid-size($min, $max, $start: xs, $end: sm) {
28+
$start: math.div(map.get($breakpoints, $start), 100);
29+
$end: math.div(map.get($breakpoints, $end), 100);
30+
31+
@return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max});
32+
}

‎src/scss/02-tools/_m-container.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
*/
1515

1616
@mixin container($size: $container-wide) {
17-
width: min(#{$size}, 100% - #{$external-gutter * 2});
17+
width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2));
1818
margin-inline: auto;
1919
}

‎src/scss/02-tools/tools.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@import "./f-get-gutter-width";
1212
@import "./f-get-svg-url";
1313
@import "./f-strip-units";
14+
@import "./f-fluid-size";
1415
@import "./m-align";
1516
@import "./m-autofill";
1617
@import "./m-breakpoint";

‎src/scss/03-base/_variables-css.scss

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,16 @@
1010
--heading--font-size-h5: 24px;
1111
--heading--font-size-h6: 18px;
1212

13+
/**
14+
* Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it
15+
*
16+
* --heading--font-size-h1: #{fluid-size(58px, 156px)};
17+
* --heading--font-size-h2: #{fluid-size(47px, 96px)};
18+
* --heading--font-size-h3: #{fluid-size(38px, 52px)};
19+
* --heading--font-size-h4: #{fluid-size(32px, 45px)};
20+
* --heading--font-size-h5: #{fluid-size(28px, 34px)};
21+
*/
22+
1323
// Line height
1424
--heading--line-height-h1: 1.25;
1525
--heading--line-height-h2: 1.25;
@@ -27,6 +37,15 @@
2737
--paragraph--font-size-small: 14px;
2838
--paragraph--font-size-default: 16px;
2939

40+
/**
41+
* Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it
42+
*
43+
* --paragraph--font-size-huge: #{fluid-size(28px, 32px)};
44+
* --paragraph--font-size-large: #{fluid-size(20px, 24px)};
45+
* --paragraph--font-size-small: #{fluid-size(12px, 14px)};
46+
* --paragraph--font-size-default: #{fluid-size(14px, 16px)};
47+
*/
48+
3049
// line height
3150
--paragraph--line-height-huge: 1.4;
3251
--paragraph--line-height-large: 1.4;
@@ -41,11 +60,30 @@
4160
--spacing--block-3: 48px;
4261
--spacing--block-4: 64px;
4362

63+
/**
64+
* Spacing fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it
65+
*
66+
* Fluid spacing :
67+
* --spacing--block-1: #{fluid-size(16px, 32px)};
68+
* --spacing--block-2: #{fluid-size(32px, 64px)};
69+
* --spacing--block-3: #{fluid-size(48px, 96px)};
70+
* --spacing--block-4: #{fluid-size(64px, 128px)};
71+
*
72+
* Fixed spacings :
73+
* --spacing--fixed--block-1: 16px;
74+
* ...
75+
*/
76+
77+
/*
78+
* Gutters
79+
*/
80+
--responsive--gutter: #{$external-gutter-mobile};
81+
4482
/*
4583
* Alignments
4684
*/
47-
--responsive--aligndefault-width: calc(100% - #{$external-gutter * 2});
48-
--responsive--alignwide-width: calc(100% - #{$external-gutter * 2});
85+
--responsive--aligndefault-width: calc(100% - calc(var(--responsive--gutter) * 2));
86+
--responsive--alignwide-width: calc(100% - calc(var(--responsive--gutter) * 2));
4987
--responsive--alignfull-width: 100%;
5088

5189
/*
@@ -62,18 +100,6 @@
62100
--wp-admin-bar-height: 0rem; // for wp admin bar hider extension
63101
}
64102

65-
/*
66-
* Alignments breakpoints
67-
*/
68-
69-
@media screen and (min-width: #{$container-default + $external-gutter * 2}) {
70-
--responsive--aligndefault-width: #{$container-default};
71-
}
72-
73-
@media screen and (min-width: #{$container-wide + $external-gutter * 2}) {
74-
--responsive--alignwide-width: #{$container-wide};
75-
}
76-
77103
/*
78104
* A11y reduced motion
79105
*/
@@ -99,10 +125,16 @@
99125
@include breakpoints(md) {
100126
/*
101127
* Spacing
128+
* /!\ IMPORTANT : Remove it if you use fluid size function instead /!\
102129
*/
103130
--spacing--block-1: 32px;
104131
--spacing--block-2: 64px;
105132
--spacing--block-3: 96px;
106133
--spacing--block-4: 128px;
134+
135+
/*
136+
* Gutters
137+
*/
138+
--responsive--gutter: #{$external-gutter};
107139
}
108140
}

‎src/scss/04-utilities/_container.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
/* Main Layout */
2-
.container {
2+
.container,
3+
.container-wide {
34
@include container;
45
}
6+
7+
.container-default {
8+
@include container($container-default);
9+
}

‎src/scss/06-blocks/_gutenberg.scss

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66

77
@include heading(h1);
88

9-
max-width: var(--responsive--aligndefault-width);
9+
width: #{$container-wide};
10+
max-width: var(--responsive--alignwide-width);
1011
margin-bottom: var(--spacing--block-3);
1112
}
1213

@@ -51,19 +52,29 @@
5152
// Alignements horizontaux
5253
// ----
5354
> :where(*) {
55+
width: #{$container-default};
5456
max-width: var(--responsive--aligndefault-width);
5557
margin-right: auto;
5658
margin-left: auto;
5759
}
5860

5961
@include editor-only {
60-
> .wp-block[class*="wp-block-acf"] {
62+
> .wp-block[class*="wp-block-acf"],
63+
> .wp-block[class*="wp-block-beapi-manual-block"],
64+
> .wp-block[class*="wp-block-beapi-dynamic-block"] {
6165
width: 100%;
6266
max-width: none;
6367
}
6468

69+
> .wp-block[class*="wp-block-acf"].is-selected {
70+
width: #{$container-wide};
71+
max-width: var(--responsive--alignwide-width);
72+
}
73+
6574
// The template block must have a ".block" class. Example : <div class="block block--my-custom-block">
66-
> :where(.wp-block[class*="wp-block-acf"]) :where(.block) {
75+
> :where(.wp-block[class*="wp-block-acf"]) :where(.block),
76+
> :where(.wp-block[class*="wp-block-beapi-manual-block"]) :where(.block),
77+
> :where(.wp-block[class*="wp-block-beapi-dynamic-block"]) :where(.block) {
6778
width: $container-default;
6879
max-width: var(--responsive--aligndefault-width);
6980
margin-right: auto;
@@ -72,10 +83,12 @@
7283
}
7384

7485
#{context-selector(".alignwide", "[data-align='wide']")} {
86+
width: #{$container-wide};
7587
max-width: var(--responsive--alignwide-width);
7688
}
7789

7890
#{context-selector(".alignfull", "[data-align='full']")} {
91+
width: 100%;
7992
max-width: var(--responsive--alignfull-width);
8093
}
8194

‎src/scss/06-blocks/core/_freeform.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212

1313
// Backend Classic editor container
1414
.mce-content-body {
15+
width: #{$container-wide};
1516
max-width: var(--responsive--alignwide-width);
1617
margin: 0;
1718
}

‎src/scss/08-template-parts/_header.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
&__menu-toggle {
3434
position: absolute;
3535
top: 14px;
36-
right: $external-gutter;
36+
right: var(--responsive--gutter);
3737
z-index: 2;
3838
width: 46px;
3939
height: 46px;
@@ -45,7 +45,7 @@
4545

4646
@include rtl {
4747
right: auto;
48-
left: $external-gutter;
48+
left: var(--responsive--gutter);
4949
}
5050

5151
> span {
@@ -173,7 +173,7 @@
173173
}
174174
}
175175

176-
@include breakpoints(lg, max) {
176+
@include breakpoints(mdl, max) {
177177
&__menu {
178178
position: absolute;
179179
top: 0;
@@ -191,7 +191,7 @@
191191
}
192192

193193
> div {
194-
padding: 76px #{$external-gutter * 2} 25px;
194+
padding: 76px calc(var(--responsive--gutter) * 2) 25px;
195195
}
196196
}
197197

@@ -222,7 +222,7 @@
222222
}
223223
}
224224

225-
@include breakpoints(sm, lg) {
225+
@include breakpoints(sm, mdl) {
226226
#{$el}__menu {
227227
right: 0;
228228
left: auto;
@@ -241,7 +241,7 @@
241241
}
242242
}
243243

244-
@include breakpoints(lg) {
244+
@include breakpoints(mdl) {
245245
.container {
246246
display: flex;
247247
align-items: flex-start;

0 commit comments

Comments
 (0)