usage with mappy-bp

[yumyo]

Hi,

thanks for the excellent library. I am wondering if it's possible to map headings (or base font-sizes) using max/min media queries like the ones produced by mappy-bp(mobile tablet) instead of plain breakpoints and how.

[zellwk]

What do you mean?

[yumyo]

so, let's say now we have this:

$breakpoints: (
    mobile  : 480px,
    tablet  : 768px,
    desktop : 1024px,
    laptop  : 1240px,
);

$mappy-queries: (
    mq-mobile: mappy-bp(mobile tablet),
    mq-tablet: mappy-bp(tablet desktop),
    mq-desktop: mappy-bp(desktop laptop)
);

$h1-map: (
    null: (4),
    mobile: (5), 
    mq-tablet: (4) // !!! question above
);

[zellwk]

Ahhh. Not at the moment, but will be an interesting add. Will you be able to make a pull request?

[cywtf]

@yumyo what you want to achieve is not that difficult to do.

I dont use mappy, but I code my own breakpoints and I do it like this. It can help you to do it yourself.

First define those breakpoints (my guess is that you would have to look at mappy's breakpoints, here I just put my own)

$breakpoints: (
  medium:       40.063em,
);

Then define the media queries (this is what mappy does)

@mixin medium {
  @if map-has-key($breakpoints, medium) {
    @media (min-width: #{map-get($breakpoints, medium)}) {
      @content;
    }
  }
}

Then use the breakpoint with typi

$typi: (
  null:                 ($base-font-size, 1.4118), 
  medium:               (18px, 1.6842),
  );

[zellwk]

@Rootion It's more complicated, because it needs to work with the typi mixin.

[zellwk]

@yumyo I'm wondering whether I should do this, because you'll be increasing font-size as viewport increases for 99.99% of the case. I don't see why adding support for mappy-queries will further enhance this library. Can you share a use case with me?

[yumyo]

Hi @zellwk
yes, you are right, in most cases we just increase the font size. However, let's say in the project I am currently working on, would be useful to constrain specific sizes within a max-min media query. As a "workaround", I am just relying on custom media query and a separate map of values which works perfectly well but is a bit more complicated to handle.
Also, I am now planning to use Typi and it's ability to output em values with a rem for Components, em for inner Elements approach which could potentially bring more use cases for this feature. Nevertheless, Typi is already flexible enough to offer multiple ways to solve a specific need so I think it's fair to skip or postpone the feature when more use cases arise or we'll have more time to dig deeper into the implementation details and possible drawbacks.

[zellwk]

@yumyo can you share with me why there's a need to use min max media queries when you use rem for components and em for inner elements?

[yumyo]

Well, I wrote could potentially because it is just an hypothesis but as we still miss element media queries, I think it's far from unrealistic. Of course, max/min media queries are itself more likely to be used to address edge cases related to specific needs of a certain view than a regular way to handle a mobile first responsive behaviour. Anyhow, I will report you back any finding as the development progresses.

[zellwk]

@yumyo agree with you that min/max queries are useful, and it's far from unrealistic to require that in the future. As far as I can tell though, there's no need for it. I'll also monitor my use cases and I'll create this if the need arises.

I'll close this issue until further updates. Feel free to reopen if you have any new findings.