Kevin Powell - Community•3w ago

sanity check

am i doing the fluid-engine correct? i want huge text obviously i like it but wanted to sanity check that this was acceptable practice.

/* ===================================
Global Design Tokens
=================================== */

:root {

    --font-display: 'Playfair Display', ui-serif, Georgia, serif;
    --font-sans: 'Libre Franklin', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

    --color-1: #FF484C; /* theme ink */
    --color-2: #F6F0E6; /* background clr */
    --color-3: #FFD5D6; /* color burn */

    --color-link: #5D78FF;
    --color-link--hover:#4bb5f7;
    --color-button--hover:#FF1A1F;

    --fluid-engine: clamp(1rem, calc(0.3rem + 2.22vmin), 3.5rem);

    --head-xl: 2.3rem;            /* headings */
    --text-base: 1.25rem;      /* p text */

    --head-lg: 1.3rem;     /* h3 */    
     --text-sm: 1.05rem;      /* package text */

}


/* ===================================
Base Reset
=================================== */


*,
*::before,
*::after {

    box-sizing: border-box;
    
}


html {

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 100%; 
    font-size: var(--fluid-engine);

}


body {

    margin: 0;
    line-height: 1.5;
    font-family: var(--font-sans);
    color: var(--color-1);
    background: var(--color-3);    

}


--head-xl: 2.3rem;            /* headings */
    --text-base: 1.25rem;      /* p text */

    --head-lg: 1.3rem;     /* h3 */    
     --text-sm: 1.05rem;      /* package text */

^^ these are where ei set my mobile first scaling and then use the fluid engine to scale larger.. i also have a 


@media (min-width: 3000px) {

:root {

    --head-xl: 3.3vw;            /* headings */
    --text-base: 2.25vw;      /* p text */

      --head-lg: 2.3vw;     /* h3 */    
       --text-sm: 2.075vw;      /* package text */

}

}


^^ to go even bigger on ultr awides

/* ===================================
Global Design Tokens
=================================== */

:root {

    --font-display: 'Playfair Display', ui-serif, Georgia, serif;
    --font-sans: 'Libre Franklin', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

    --color-1: #FF484C; /* theme ink */
    --color-2: #F6F0E6; /* background clr */
    --color-3: #FFD5D6; /* color burn */

    --color-link: #5D78FF;
    --color-link--hover:#4bb5f7;
    --color-button--hover:#FF1A1F;

    --fluid-engine: clamp(1rem, calc(0.3rem + 2.22vmin), 3.5rem);

    --head-xl: 2.3rem;            /* headings */
    --text-base: 1.25rem;      /* p text */

    --head-lg: 1.3rem;     /* h3 */    
     --text-sm: 1.05rem;      /* package text */

}


/* ===================================
Base Reset
=================================== */


*,
*::before,
*::after {

    box-sizing: border-box;
    
}


html {

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 100%; 
    font-size: var(--fluid-engine);

}


body {

    margin: 0;
    line-height: 1.5;
    font-family: var(--font-sans);
    color: var(--color-1);
    background: var(--color-3);    

}


--head-xl: 2.3rem;            /* headings */
    --text-base: 1.25rem;      /* p text */

    --head-lg: 1.3rem;     /* h3 */    
     --text-sm: 1.05rem;      /* package text */

^^ these are where ei set my mobile first scaling and then use the fluid engine to scale larger.. i also have a 


@media (min-width: 3000px) {

:root {

    --head-xl: 3.3vw;            /* headings */
    --text-base: 2.25vw;      /* p text */

      --head-lg: 2.3vw;     /* h3 */    
       --text-sm: 2.075vw;      /* package text */

}

}


^^ to go even bigger on ultr awides

14 Replies

13eck•3w ago

Be sure to use proper code block format to avoid…that. See #Asking Good Questions for how What do you mean by "fluid-engine"? I'm not familiar with that term. Also, you have your font sizes outside of any declaration, did you mean for them to be in the body section?

kttOP•3w ago

i didnt upload the entire css file --fluid-engine is literally a name i made up what? those are tokens? i could call it anything

13eck•3w ago

Also also, you should never have font size in just vw. There needs to be a rem or em as part of the calculation. Otherwise you're totally ignoring any user set font size

kttOP•3w ago

ahhh okay you mean for the 3000px or larger right noted

13eck•3w ago

Yes

kttOP•3w ago

im really curious why u confused on the clamp token tho i swear ive seen kevin do this many times is that not correct?

13eck•3w ago

I missed it on my first scan through, sorry. That's my bad

kttOP•3w ago

ohh okay cool so that looks fine right? i like vmin bc it scales on browser height resize

13eck•3w ago

And yes, Kevin does it a lot—and so do I. I just don't call it that :p

kttOP•3w ago

what do u clal it?

13eck•3w ago

I call it --base-font or --1em or something b/c I suck at naming things

kttOP•3w ago

thank you for the response!!!! wait how do u recommend fixing the break3000 tho?

13eck•3w ago

Honestly? Change yout --fluid-engine. That will increase all font sizes proportionally across the board. No need to update individual element sizes

kttOP•3w ago

ahhhhhhhh good point!!!! thank you again

Gaming

Programming

sanity check

Did you find this page helpful?