Home / Admin / Framework_Fluid_CSS
Duplicate Snippet

Embed Snippet on Your Site

Framework_Fluid_CSS

Fluid Design Framework -
Fonts: Viewport MIN - 320 -- Viewport MAX - 1200
Space: Viewport MIN - 320 -- Viewport MAX - 1200

Code Preview
css
:root {
/* Text Size Scale */
  --text-xs: clamp(0.72rem, calc(0.82rem + -0.13vw), 0.79rem);
  --text-s: clamp(0.89rem, calc(0.88rem + 0.02vw), 0.90rem);
  --text-m: clamp(1.00rem, calc(0.95rem + 0.23vw), 1.13rem);
  --text-l: clamp(1.13rem, calc(1.02rem + 0.51vw), 1.41rem);
  --text-xl: clamp(1.27rem, calc(1.09rem + 0.90vw), 1.76rem);
  --text-2xl: clamp(1.42rem, calc(1.14rem + 1.41vw), 2.20rem);
  --text-3xl: clamp(1.60rem, calc(1.19rem + 2.08vw), 2.75rem);
  --text-4xl: clamp(1.80rem, calc(1.21rem + 2.97vw), 3.43rem);
/* Heading Size Scale */
  --h6: clamp(0.69rem, calc(0.84rem + -0.20vw), 0.80rem);
  --h5: clamp(0.97rem, calc(1.01rem + -0.05vw), 1.00rem);
  --h4: clamp(1.25rem, calc(1.20rem + 0.23vw), 1.38rem);
  --h3: clamp(1.56rem, calc(1.42rem + 0.69vw), 1.94rem);
  --h2: clamp(1.95rem, calc(1.66rem + 1.45vw), 2.75rem);
  --h1: clamp(2.44rem, calc(1.92rem + 2.63vw), 3.89rem);
  --h-title: clamp(3.05rem, calc(2.16rem + 4.45vw), 5.50rem);
  --h-title-l: clamp(3.82rem, calc(2.38rem + 7.20vw), 7.77rem);
/* Gap Spacing Scale*/
  --gap-3xs: clamp(0.25rem, calc(0.14rem + 0.57vw), 0.56rem);
  --gap-2xs: clamp(0.50rem, calc(0.36rem + 0.68vw), 0.88rem);
  --gap-xs: clamp(0.75rem, calc(0.61rem + 0.68vw), 1.13rem);
  --gap-s: clamp(1.00rem, calc(0.75rem + 1.25vw), 1.69rem);
  --gap-m: clamp(1.50rem, calc(1.23rem + 1.36vw), 2.25rem);
  --gap-l: clamp(2.00rem, calc(1.50rem + 2.50vw), 3.38rem);
  --gap-xl: clamp(3.00rem, calc(2.45rem + 2.73vw), 4.50rem);
  --gap-2xl: clamp(4.00rem, calc(3.00rem + 5.00vw), 6.75rem);
/* Section Padding */
  --section-3xs: clamp(0.38rem, calc(0.06rem + 1.59vw), 1.25rem);
  --section-2xs: clamp(0.75rem, calc(0.34rem + 2.05vw), 1.88rem);
  --section-xs: clamp(1.13rem, calc(0.63rem + 2.50vw), 2.50rem);
  --section-s: clamp(1.50rem, calc(0.68rem + 4.09vw), 3.75rem);
  --section-m: clamp(2.25rem, calc(1.25rem + 5.00vw), 5.00rem);
  --section-l: clamp(3.00rem, calc(1.36rem + 8.18vw), 7.50rem);
  --section-xl: clamp(4.50rem, calc(2.50rem + 10.00vw), 10.00rem);
  --section-2xl: clamp(6.00rem, calc(2.73rem + 16.36vw), 15.00rem);
}

Comments

Add a Comment