breakpoints using bourbon neat grid

Question

I am trying to use neat for bourbon and I have got most things sorted out but I am hitting some road blocks when it comes to creating the breaking points.

I prefer to make seperate sass files for mobile, tablet, desktop & largedesktop and I don't normally use bubbling to create my media queries as I dont like how it doesn't just create one the media query it makes tones through out the css file. But so far I can only seem to find documentation on a bubbling method.

Article on how to use breakpoints in neat

Here is what I have done:

$largedesktop-size:em(1050);

    // Bourbon Neat Breakpoints
    $largedesktop: new-breakpoint(min-width $largedesktop-size 16);


 @include media($largedesktop) { 
    body{
        background:black;
    }
  }

I have also tried this, which does update the bg color but doesn't update the visual grid:

// Media Queries Breakpoints
$tablet-size:em(700);

@include media(min-width $tablet-size 8) {
    body{
        background:orange;
    }
  }

Answer 1

I actually figured this one out, my main problem was just with how I had organised my .scss files but here is how.

File structure like this:

@import 'bourbon/bourbon';
@import 'variables';
@import 'neat/neat';

@import 'base';

// Media Queries
@import 'mobile';
@import 'tablet';
@import 'desktop';
@import 'largedesktop';

Variables must go before importing variables.

in _variables.scss add your queries like so:

$mobile-size:em(320);
$tablet-size:720px;
$desktop-size:em(960);
$largedesktop-size:em(1050);

// Bourbon Neat Breakpoints
$mobile: new-breakpoint(min-width $mobile-size 4);
$tablet: new-breakpoint(min-width $tablet-size 8);
$desktop: new-breakpoint(min-width $desktop-size 12);
$largedesktop: new-breakpoint(min-width $largedesktop-size 16);

Then (this is how I like to organise things) create a scss file for mobile, tablet, desktop & largedesktop and import after _base.scss – I have illustrated above how the files should be structured.

Inside each add your media query along with the needed layout changes.

like this: _mobile.scss

@include media($mobile) {
    body {
        background: purple;
    }
}

That should work for you.

As I said this is how I did it, I am sure there are many others but I wanted to let people know one way if they are having problems :)