Bricks Builder Consistent spacing with CSS variables

No video

Bricks Builder Consistent spacing with CSS variables

Рет қаралды 1,082

Күн бұрын

This video serves as a comprehensive response to an inquiry received via my channel. The user was seeking advice on maintaining uniform and manageable gaps between sections, containers, and elements while utilizing Bricks Builder.
The tutorial demonstrates how to accomplish this through the use of global CSS variables. While the demonstration is conducted using Bricks Builder, the principles presented are rooted in basic CSS and thus, are universally applicable, regardless of the specific webpage builder you employ.

Пікірлер: 3

@zhakkasdude Ай бұрын

Thank you, that's a very nice tutorial.

@erling5148 Жыл бұрын

Thanks another great one, would you mind sharing the css?

@wpeasy Жыл бұрын

Sure /* Fixed spacing */ /* :root{ --section-space-block: 10rem; --section-space-inline: 1rem; --section-space-block--mobile: 5rem; --section-space-inline--mobile: 0.5rem; --content-space: 2rem; --content-space--xs: calc(0.25 * var(--content-space)); --content-space--s: calc(0.5 * var(--content-space)); --content-space--l: calc(2 * var(--content-space)); --content-space--xl: calc(3 * var(--content-space)); --container-space: calc(4 * var(--content-space)); } */ /* Clamp spacing */ :root{ --section-space-block: clamp(5rem, 1.429rem + 5.952vw, 10rem); --section-space-inline: clamp(0.5rem, 0.143rem + 0.595vw, 1rem); --section-space-inline--negative: calc(-1 * var(--section-space-inline)); --content-space: clamp(1rem, 0.286rem + 1.19vw, 2rem); --content-space--xs: calc(0.25 * var(--content-space)); --content-space--s: calc(0.5 * var(--content-space)); --content-space--l: calc(2 * var(--content-space)); --content-space--xl: calc(3 * var(--content-space)); --container-space: calc(4 * var(--content-space)); }