These are chat archives for thoughtbot/neat

Jul 2016
Jul 22 2016 08:06

Hey guys - I've been using Near for the last couple of projects and have found it a real timesaver reducing the clutter of other grid frameworks in the HTML.

For an upcoming project Initial designs are looking like I will have to create a custom grid with fewer columns all of unequal width.

Can this be done in Neat?

Is there a hack or another solution similar where I can layout say four columns specifying the width of each independently and then just attaching that definition to the appropriate <divs>?

Any advice pointers are appreciated

Jul 22 2016 08:25

@thegreyoshi yeah I got stuck with that one who I started.

The key is that the +outer-container has the grid setup automatically.

By using outer-container(100%) you are actually overriding the default grid settings and setting the container to either the full default browser (1280px?) width -or- the parent div width

The default for outer-container is $max-width which is defined (in the neat docs) as

$max-width: em(1088) !default;

So when you use outer-container(100%) you will always find that the grid doesn't line up as expected.

Using an override width changes all the internal parameters of the grid as Neat then recalcs the width based upon the no of columns and the new $max-width as well as proportional gutters that are defined using the golden ratio:

$gutter: modular-scale(1, 1em, $golden) !default;

For a full width hero section the grid will not work as you are expecting

However you can set different outer-containers for different sections. I build up my sites using individual include files each having their own <section> tag and each <section> that needs to have a normal behaviour that you would expect from the grid has the sass "@include outer-container();". added and the grid lines up. For any full width item like a full width image hero I use "@include outer-container(100%) " and have to figure out the math by trial and error for laying onto their elements