Neat 2.0 Grid - media queries

Question

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

Tablet View

Phone View

score 1 · Accepted Answer · answered Jul 05 '18 at 14:33

1

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

answered Jul 05 '18 at 14:33

whmii

430
2
10

I have a quick follow-on question. I was able to get the example working using the code above, but I'm not sure how I would control the number of columns the sidebar would span. It is currently just taking up 40% of the available space. How would I add Presentational Classes to control the spacing, or is there a better way to do this? – Herr Josua Jul 05 '18 at 15:48
he `grid-column()` mixin controls how far an element should expand https://github.com/thoughtbot/neat.bourbon.io/blob/master/source/assets/stylesheets/examples/article-layout.scss#L28 In this case there are a total of 5 columns. it has `@include grid-column(2);`. 2 / 5 ends up as 40% If you're just getting started, give this a read https://robots.thoughtbot.com/the-release-of-neat-2-0-a-lightweight-and-flexible-sass-grid – whmii Jul 05 '18 at 19:57

Neat 2.0 Grid - media queries

1 Answers1