Design a responsive grid without having to change your HTML! Neat layers onto the foundation of Sass and Bourbon, giving us the tools we need to build a semantic responsive grid with ease.
This is a companion discussion topic for the original entry at https://thoughtbot.com/upcase/videos/neat-semantic-grids
Is there a way to offset the grid by a specific amount? I am looking to center content that will be my outer-container but have a side bar that takes up 90px and stays fixed to the left side of the browser window no matter how large the screen gets. So currently my grid is accounting for that 90px on the left and centering off that? Any help at how you would handle this situation or if there is a better way to approach this would be greatly appreciated.
Thanks
(Looks like my problem is not a problem at all but just a visual issue when having the visual-grid on and adding a margin to my outer-container. So the real question would be is there anyway to get the visual-grid to account for this offset so that visually I can still play around with my grid nicely? )
Great set of videos! Perfect timing for these as we are in the process of migrating everything from bootstrap to bourbon.
Question about the use of omega…I’m running into an issue using mobile first and not having the omega change as I redefine it in subsequent media queries. In the example below, when the view changes to the medium-screen size, the omega stays at (2n). Any ideas?
Example:
3 @include span-columns(4);
2 @include omega(2n);
1 @include media($medium-screen-up) {
181 @include span-columns(2);
1 @include omega(4n);
2 }
Hi Upcase team,
In the notes, you have:
@import outer-container(1920px);
should it not be
@include outer-container(1920px);
Why do the examples differ greatly from what is shown in the video?
You’d need to do Media Query Splitting specifically for this. i.e. setup your breakpoints in _grid-settings.scss in the following way:
$medium-screen: new-breakpoint(min-width $medium-screen max-width $large-screen - 1 8);
$large-screen-up: new-breakpoint(min-width $large-screen 12);
I usually find if adopting a mobile first approach just setting a min and max width on the medium breakpoint is all I need to prevent MQ overlaps.
N.B the - 1 before 8 is to minus 1px from the $large-screen variable to ensure there is no chance of over overlap.
To read more about this visit: http://simurai.com/blog/2012/08/29/media-query-splitting and read the FAQ s in GitHub:
https://github.com/thoughtbot/neat#faq
For anyone looking for a PSD/Affinity photo with guides set up for the neat grid, I created some here:
I only have desktop versions right now, but hope to have time to add mobile/tablet ones at some point. 
I assume, over time, updating code (examples) is much easier than updating video. So maybe it started off being similar, but diverged over time.
Will be updated for new version with neat?
Many mixins are different different with the video.
Can someone tell me how to get the visual grid to work with the current version of neat?