2
\$\begingroup\$

I wrote this piece of code to make any breakpoint to the users choice:

@mixin breakpoint($media) {
  $max-width: 0;
  @if($media == 'phones') {
    $max-width: $phone-medium;

  } @else if ($media == 'monitors') {
    $max-width: $screen-medium;

  //etc etc etc

  } @else if($media > 0) {
    $max-width: $media;
  }

  @media only screen and  (max-width: $max-width) {
    @content;
  }
}

This function comes with these variables:

//Phone width sizes
$phone-small: 480px;
$phone-medium: 768px;


//Screen widths
$screen-small: 1024px;
$screen-medium: 1280px;
$screen-big: 1920px;

This can be used by typing:

@include breakpoint('phones') {
   ....
}

or

@include breakpoint(450px) {
   ....
}

Is there any better way to do this?

\$\endgroup\$
5
\$\begingroup\$

Personally, I think it's better to make the breaks according to the content of the site, rather than to a fixed size.

This is even more true nowadays with docens of different screen sizes for each type of device.

You should make sure the site will always look good by making the breaks work depending on the design, and no the other way around.

\$\endgroup\$
  • \$\begingroup\$ do you mean that i could remove the pre defined variables (such as 1920 etc) and keep it with the user input only? (So they have to enter a screensize themself) This is made for my own framework, so its not just for myself \$\endgroup\$ – Bas Sep 17 '14 at 20:12
  • \$\begingroup\$ Yes, that way the layout can vary depending on the design of the site and the screen sizes where it "breaks". \$\endgroup\$ – Alexis Sep 18 '14 at 1:02
  • \$\begingroup\$ Hmm, i'm not really sure, just about the way it had been written. Is there anything you can point out on that? Maybe about using 'max-width'? Maybe that i can use multiple selectors? \$\endgroup\$ – Bas Sep 18 '14 at 5:50
  • \$\begingroup\$ What do you think about posting an example where we could test it as "users" and see how it works? \$\endgroup\$ – Alexis Sep 18 '14 at 12:55
  • \$\begingroup\$ I already did, see where i typed This can be used by typing: \$\endgroup\$ – Bas Sep 18 '14 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.