Add some responsive breakpionts in CSS

[kruimol]

To create a multi platform website you need breakpoints for varius platforms.
So I added Responsive design, with: phone, tablet and desktop

[netlify]

✅ Deploy Preview for quicksnip ready!

Name	Link
🔨 Latest commit	475d5c2
🔍 Latest deploy log	https://app.netlify.com/sites/quicksnip/deploys/67727e3a10a8ea00084bdcb5
😎 Deploy Preview	https://deploy-preview-24--quicksnip.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Mathys-Gasnier]

Are the Desktop extra large and bige really necessary ?

[kruimol]

Are the Desktop extra large and bige really necessary ?

It may be necessary in some cases,
If you don't need the extra large and big ones, remove them, it's still a 'template'/snipid
In my case I have a 2.7K screen, so it may be useful.

[Mathys-Gasnier]

I think snippet should show the functionning of a feature, and for media queries i think just showing the user how it works (explaining that it only applies if screen size > an amount, etc) is the goal, more than giving the user a list of media queries without explaination

[kruimol]

I think snippet should show the functionning of a feature, and for media queries i think just showing the user how it works (explaining that it only applies if screen size > an amount, etc) is the goal, more than giving the user a list of media queries without explaination

That's true,
but sometimes I don't know what the correct sizes/breakpoints are,
so I thought it would be helpful to include the ''standard' breakpoints.

[technoph1le]

@kruimol, thank you for the contribution. 🙌

I like the idea of adding responsive design. Regarding the breakpoints, we can move them to SCSS maps to show in an organized way. Something like this:

// values needs to be updated here as well
$breakpoints: (
  sm: 30em,
  md: 50em,
  lg: 75em,
);

Add a mixin to access those breakpoints from maps with @media, and now you have a useful code snippet that people can just copy and use in their code.

// media query
@mixin mq($key) {
  $size: map-get($breakpoints, $key);

  @if ($size) {
    @media (width > $size) {
      @content;
    }
  } @else {
    @error '`#{$key}` does not exist in the $breakpoints';
  }
}

Let me know what you think.

[technoph1le]

And, we still need breakpoints in CSS as well. Because some developers aren't familiar with SCSS yet. So, adding a code snippet for common breakpoints would help them a lot.

I think margin might be unnecessary, just mentioning very common 3-4 breakpoints might be enough to give an idea.

I'm open to listening your approach on this one as well.

[kruimol]

And, we still need breakpoints in CSS as well. Because some developers aren't familiar with SCSS yet. So, adding a code snippet for common breakpoints would help them a lot.

I think margin might be unnecessary, just mentioning very common 3-4 breakpoints might be enough to give an idea.

I'm open to listening your approach on this one as well.

Yes that was my intention too, I'm not that familiar with scss myself.
That's why I thought I'd add the @media breakpoints.
The margins are just an example of how to use them.
Like in this example that the margin increases as the screen gets bigger.
And if possible, leave the big ones as they are, because some screens it can be more useful for those big ones.