Use Bourbon Neat custom Grid in Sage

sage
1

While switching from Bootstrap to Bourbon with Neat grid I encountered an issue trying to overwrite the Neat grid.

According to thoughtbot,
the grid overwrites need to be defined between loading Bourbon and Neat scss files.

Because I want to include Bourbon and Neat through wiredep loading the bower components it is not possible to include a local ‘grid-settings.scss’ file between Bourbon and Neat.

The only way I’ve managed to get my grid overwrites in between Bourbon and Neat is by creating my own ‘neat custom grid’ repository and adding it to my bower.json.
(making sure the wiredep queues it correctly by not declaring neat dependancy and naming it correctly so it is actually loaded after Bourbon and Before Neat)

For illustration, my current main.scss wiredep injects looks like this:

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bourbon/app/assets/stylesheets/_bourbon.scss";
@import "../../bower_components/bourbon-neat-custom-grid/_neat-custom-grid.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_private.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_box-sizing.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_omega.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_outer-container.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_span-columns.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_row.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_shift.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_pad.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_fill-parent.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_media.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_to-deprecate.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_visual-grid.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_display-context.scss";
@import "../../bower_components/neat/app/assets/stylesheets/grid/_direction-context.scss";
// endbower

I would like to have the grid overwrite files (with neat helpers) injected in between Bourbon and Neat without adding my own repository as a bower package.

Is there a better/cleaner way to handle Neat grid overwrites?

ps. I wonder whether the planned Yeoman generator will support a way to overwrite the Neat grid.

2

This seems like an intricacy that stems from the SASS loading override variables load order before the defaults are loaded. It’s confusing in my opinion.

To be honest, what you’ve done is fine, I think. I actually wouldn’t have thought of that. What I would have probably done is overrode Bourbon’s main declaration with nothing, or an empty object, and enqueued it manually above the wiredep statements. And then loaded my custom grid stuff underneath it (wouldn’t have to be a bower component, could be part of the project). That should ensure the same load order as is required.

3

In order to be able to change grid breakpoints and variables more easily I opted for your solution.

Changing my ‘neat custom grid’ repository every time I want to change breakpoints or variables is too much of a hassle. Not to mention creating separate repositories for projects with different grid requirements.

Thanks!