Naming and functionality of below function

[wezzle]

The below function now uses the next breakpoint instead of the current.

Is this intended? Because when writing below('tablet') I would thing to receive a media query that specifies < 768px. Now it uses the next breakpoint and gives you < 992px (desktop)

See pull request: #6

[mg901]

@wezzle, thank you for your PR, and for using styled-breakpoints. To better understand how breakpoints work in styled-breakpoints, refer to the following sources.
Can not use below function on highest breakpoint
Bootstrap 4 - how to use media query mixin
Boostrap 4 breakpoints

[wezzle]

@mg901 Thank you for your reply.

Ok, I get where it comes from now. Bootstrap 4 however uses different naming where it is more logical what functionality is used. They use media-breakpoint-down which gives you a breakpoint for the size you supply down from it's parent (larger) breakpoint. However even the first answer in your link "Bootstrap 4 - how to use media query mixin" seems to get this wrong, he says:

@include media-breakpoint-down(md) {} creates a breakpoint with a max-width of $md

Which is wrong, as in his case it gives a max-width of lg instead of md

When naming the function below the implied functionality would be that it gives a max-width of the supplied argument, not it's parent. So if this functionality is required I would propose naming the current below to down and create a new function below with the functionality as in my pull request #6

I would like to hear your thoughts on this

[mg901]

@wezzle Sorry for the long answer )). Thank you so much for using styled-breakpoints. I think that you are right and it is worth renaming the function below to down. In the near future I will do it. However, I see the need to add the function below with the function proposed by you, since the current API covers all the scenarios you described.

[sorosora]

I'm so expected to this updating. Please fix it 😄

[mg901]

@sorosora Done!