1

i am quite confused here.I am using Sass for Bourbon Neat and I am unable to set breakpoints using neat. Somehow they don't show up correctly in mobile and browser. here is the code

$mobile: new-breakpoint(max-width 800px 4); 
$tablet: new-breakpoint(max-width 1335px 10); 
$desktop: new-breakpoint(max-width 1920px 10);

But Somehow they are not working. Should i use min and max like this

$mobile: new-breakpoint(max-width 800px 4); 
$tablet: new-breakpoint(min-width 801px 10); 
$desktop: new-breakpoint(min-width 1337px 10);

Please give me some advice as i am totally not able to find the solution. thanks.

designerNProgrammer
  • 2,621
  • 5
  • 34
  • 46

2 Answers2

1

First–off, I would recommend to design with the mobile (small) screens in mind first which means you should always use min-width rather than max-width and work your way up from smaller to larger screens.

After defining a breakpoint using new-breakpoint():

$mobile: new-breakpoint(min-width 480px 4);

you are ready to use it via the media() mixin in your styles:

.selector {
  font-size: 12px;

  @include media($mobile) {
    font-size: 18px;
  }
 }

In combination you should be ending up with the following CSS:

/* Smallest size as default ... */
.selector {
  font-size: 12px;
}

@media screen and (min-width: 480px) {
  /* Bigger font for screens of 480px and up ... */
  .selector {
    font-size: 18px;
  }
}

Should this not be what you’re after, please post some more details on how you are using the breakpoints.

polarblau
  • 17,649
  • 7
  • 63
  • 84
  • OK you mean I should start with Min width rather than MAX width with the breakpoints I am using. And what about mobiles targeted with smaller screen sizes than 480px? – designerNProgrammer Aug 01 '14 at 06:23
  • You first define general styles which will be used by all devices (no matter what screen size). Then you override specific styles (or extend them) for certain screen sizes, starting from the smallest and working your way up to the biggest. — Does that make sense? – polarblau Aug 01 '14 at 08:13
0

Be sure to @import "neat/neat-helpers"; in your _variables.scss or any other file that defines breakpoints. Look here for an example: https://github.com/thoughtbot/neat#getting-started

kgolinski
  • 665
  • 6
  • 9