Search code examples
bourbonneat

Neat 2.0 Grid - media queries

I'm trying to follow the examples for the media query bases Neat grid here, but I'm having trouble getting the media queries to run. I'm able to get the tablet and phone ones to work, but I can not get the desktop version to run. I have included the code and screenshots below:

SCSS

@import "../bourbon/bourbon";
@import "../neat/neat";

// Set a default grid.
$neat-grid: (
    columns: 12, // define some columns to match your mockup.
    gutter: 12px, // adjust gutters to match your mockup.
);

// Create a breakpoint.

$desktop: (
    columns: 12,
    media: 1280px,
);

$tablet-portrait: (
    columns: 8,
    media: 991px,
);

$phone-portrait: (
    columns: 6,
    media: 578px,
);

// This is "the grid" container.
.container {
    margin: 0 auto;
    max-width: 1280px;
}

// A row contains columns. grid-container creates a clearfix.
.row {
    @include grid-container;
}

HTML

<h2>Media Queries (<a href="http://neat.bourbon.io/docs/latest/#grid-media">link</a>)</h2>
<p class="note">Squish the viewport to see this in action!</p>
<div class="container container-media-queries">
    <div class="row">
        <div class="col"><pre>Test</pre></div>
        <div class="col"><pre>Test</pre></div>
    </div><!-- .row -->
</div><!-- .container-media-queries -->

Desktop view Desktop

Tablet View Tablet

Phone View Phone

Solution

  • There isn't quite enough information here but it seems as though the confusion lies in the fact that the default behavior of the grid-media mixin is to be mobile first. That means that the media query that it generates will be some thing like @media (min:width XXXpx) {…} meaning it only activates at that dimension or larger. Check out https://github.com/thoughtbot/neat.bourbon.io/blob/master/source/assets/stylesheets/examples/article-layout.scss for reference