How are calculated fluid spacingSizes in theme Json ?

  • Resolved charlie67p

    (@charlie67p)


    1 year ago

    Hi,??

    I don’t understand how are calculated these kind of fluid spacing sizes in the theme.json ,
    for example in TwentyFour theme Json there is

    name": "2",
"size":"min(1.5rem, 2vw)",
"slug": "20"

    If it was a classic clamp() , I would understand the calculation, but here …???

    Can somebody explain ???

    Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Do you mean this bit: min(1.5rem, 2vw)?
    Use the smallest of either 1.5x the root element font’s em size, or 2% of the viewport width, which ever is less. A font’s em size is the width of it’s lowercase ‘m’ character.

    Thread Starter charlie67p

    (@charlie67p)

    Yes, I understand now, thank you very much !

    So, in this case it means :
    if window width > 1200 px : 24px (1,5 x 16px)
    if window width < 1200 px : 2% of window width (for example when window width is 700px, the spacing size is 14px)

    Am I right ?

    • This reply was modified 1 year ago by charlie67p.
    Moderator bcworkz

    (@bcworkz)

    Kind of. A font’s height (16px?) is not necessarily the same as its em dimension, but they are often fairly close. If your 16px were the em distance and not the height as is usually the case, then you are absolutely correct ??

    Thread Starter charlie67p

    (@charlie67p)

    OK ?? thanks !

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How are calculated fluid spacingSizes in theme Json ?’ is closed to new replies.

Tags