Can't make ms-respond to work about modularscale-sass HOT 6 CLOSED

Thanks for the issue @baglio,

You need more than one breakpoint to make the respond mixin work. For example, one at 640px and another at 960px. The text will transition between these two points. If you wish to have it scale up from a viewport width of 0px, then 0px needs to be defined in your breakpoints as well.

from modularscale-sass.

Also, you may be interested in Typetura.js for even more control over how your typography responds to its context 💁‍♂️

from modularscale-sass.

I was trying to use REM, but the following does not work either:

$modularscale: (
  base: 16px,
  ratio: 1.25,
0px: (
    base: 16px,
    ratio: 1.25
  ),
1440px: (
    base: 18px,
    ratio: 1.333
  )
);

The 1440px settings are simply ignored. No font sizes are being rendered for @media (min-width: 1440px)

from modularscale-sass.

@baglio Did that info help?

from modularscale-sass.

@baglio Did that info help?

Yes, by setting a 0px breakpoint it does work, although to get there it uses some complicated CSS calc stuff, which I'm not confident using. Since I just wanted to have a different base font size for each of my breakpoint, I solved by setting the base keyword to 1rem instead of 16px, and then set a different font-size on the body for each breakpoint like so:

$modularscale: (
    base: 1rem,
    ratio: 1.333,
);

body {
    font-weight: 300;
    font-size: 12px;
    font-family: $body;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%; // Impedisce al font di cambiare se si cambia l'orientamento del dispositivo.
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    @include breakpoint($medium){
        font-size: 14px;
    }

    @include breakpoint($large){
        font-size: 16px;
    }
}

from modularscale-sass.

Thanks @baglio, glad it helped!

The complicated CSS calc stuff comes from this post by Mike Riethmuller: https://www.madebymike.com.au/writing/precise-control-responsive-typography/

You might have also heard the term CSS Locks, coined by Tim Brown and explained by Chris Coyier : https://css-tricks.com/css-locks/

Agreed, the calc function can be complicated. This is why I created typetura.js: https://github.com/typetura/typetura.js

from modularscale-sass.