How to add --xl-viewport

[mromanoff]

I have 4 breakpoints in project i'm working on. I need another Extra Large break point. How i can implement this and able to user utility size classes u-xl-size1of2 for example @custom-media --md-viewport (min-width: 960px) and (max-width: 1200px); also is there 'up' breakpoints? something like this @custom-media --lg-up-viewport (min-width: 62em);

[kristoforsalmin]

Hi @mromanoff, SUIT CSS comes with 3 breakpoints by default, therefore only u-sm-size, u-md-size, u-lg-size are available.

As you correctly pointed out, one could add a new breakpoint just like that:

@custom-media --lg-viewport (min-width: 960px) and (max-width: 1440px);
@custom-media --xl-viewport (min-width: 1440px);

However, that doesn't mean that u-xl-size classes will be automatically generated. So, basically, you have to write them on your own, in any preferable way.

I often find that most projects use tiny subset of those classes anyway, so I only add the ones I really need and don't import whole suitcss-utils-size package.

[mromanoff]

thank you for reply. this is exactly what i did. I had to add my u-xl-size classes.

[kristoforsalmin]

@mromanoff Yeah, there's a discussion whether those classes shall be somehow generated in #28, but it's on hold for now, I believe. By the way, would you mind closing the issue, so it doesn't appear active? Thanks 😄