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;
    }
  }

Solution 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 :)

Solution 2

I had a similar problem with the breakpoints and with updating the grid. Slightly different track, though ...

Here is what helped me. This is not in the main documentation.

On the Neat GitHub page, the thoughtbot team explains:

1. You need to create a _grid-settings.scss file

2. import it right before importing Neat

   @import "bourbon/bourbon"; // or "bourbon" when in Rails
   @import "grid-settings";
   @import "neat/neat"; // or "neat" when in Rails
   

3. In the _grid-settings.scss file, import neat-helpers

   @import "neat/neat-helpers"; // or "neat-helpers" when in Rails
   
   // Define your breakpoints
   $tablet: new-breakpoint(max-width 768px 8);
   $mobile: new-breakpoint(max-width 480px 4);
   etc
   

Prior to adding this setup, I could see the grid, but the grid would not respond to my breakpoint requests to update columns or change component position. Once I had these settings in place, the grid worked as I expected.

I am using CodeKit 2, if that matters.

Solution 3

To whoever it may concern, my problem was not that I had the wrong order of imports, but how I used my variables. I thought the function took a string...

This is wrong:

$desktop: 1200px
$tablet: new-breakpoint(min-width 600px max-width #{$desktop})

This is correct:

$desktop: 1200px
$tablet: new-breakpoint(min-width 600px max-width $desktop)

Comments

[byronyasgur]

Surely this should be the accepted answer - that neat-helpers file is pretty important