Bourbon, Neat + Bitters


#1

Hi guys,

I dont understand! I want to remove bootstrap and use Boubon, Neat and Bitters can anyone point me in the direction of some articles or docs where this is explained in a little more detail. It’s the whole build process side of it that I am struggling with, I know how to install the sass libraries, but dont know how to do it without disrupting the build process.

Also why is jquery being included with bower when its included with wordpress

cheers


#2

Have you tried the instructions at https://github.com/thoughtbot/neat#installing-with-npm-and-using-a-node-based-asset-pipeline ?

The last time I used Bourbon and Neat I did it by “vendoring” the files into my repo. I created a /vendor folder inside my styles folder, ran bourbon install && neat install inside it and then committed these files to git.

I then used

@import "vendor/bourbon/bourbon";
$max-width: em(1200);
@import "vendor/neat/neat";

at the top of my main.scss


#3

Hey, I’ve got a Bourbon / Neat / Bitters fork of Sage going here - https://github.com/smutek/BourbonySage

Feel free to have a look.

I’m planning on recording a how-to screen cast for this process pretty soon. I’ll share a link once I’ve done so.


#4

ahh nice work on that, couldnt figure out what to do with grid_settings, I’ll pull it down and take a look


#5

I want to use BourbonySage, but the dist/styles directory isn’t building, and I’m getting a 404 for main.css. BUT using Sage 8.5.1 (which included Bootstrap) the styles directory builds fine. I’m at a loss for how to fix this.
Don’t want Bootstrap. Do want Bourbon, etc.


#6

Hey, thanks for the heads up, I’ll check it out. I just updated it last night to get it up to speed with Sage 8.5.1, so I likely botched something there.


#7

Thanks! This error might be of help:
Azzcat-MBP:BourbonySage-master catherineazzarello$ gulp
[14:49:17] Using gulpfile ~/Sites/wordpress/CS_new_CMS/wp-content/themes/BourbonySage-master/gulpfile.js
[14:49:17] Starting ‘clean’…
[14:49:17] Finished ‘clean’ after 14 ms
[14:49:17] Starting ‘default’…
[14:49:17] Starting ‘build’…
[14:49:17] Starting ‘wiredep’…
[14:49:17] Finished ‘default’ after 95 ms
[14:49:17] Finished ‘wiredep’ after 133 ms
[14:49:17] Starting ‘styles’…
‘common/typography.less’ wasn’t found. Tried - /Users/catherineazzarello/Sites/wordpress/CS_new_CMS/wp-content/themes/BourbonySage-master/assets/styles/common/typography.less,common/typography.less in file /Users/catherineazzarello/Sites/wordpress/CS_new_CMS/wp-content/themes/BourbonySage-master/assets/styles/main.scss line no. 25
[14:49:17] Finished ‘styles’ after 137 ms
[14:49:17] Starting ‘jshint’…
Potentially unhandled rejection [2] ‘common/typography.less’ wasn’t found. Tried - /Users/catherineazzarello/Sites/wordpress/CS_new_CMS/wp-content/themes/BourbonySage-master/assets/styles/common/typography.less,common/typography.less in file /Users/catherineazzarello/Sites/wordpress/CS_new_CMS/wp-content/themes/BourbonySage-master/assets/styles/main.scss line no. 25
[14:49:17] Finished ‘jshint’ after 105 ms
[14:49:17] Starting ‘scripts’…
[14:49:18] Finished ‘scripts’ after 90 ms
[14:49:18] Starting ‘fonts’…
[14:49:18] Starting ‘images’…
[14:49:18] Finished ‘fonts’ after 4.06 ms
[14:49:18] gulp-imagemin: Minified 0 images
[14:49:18] Finished ‘images’ after 4.45 ms
[14:49:18] Finished ‘build’ after 473 ms

I’m not savvy enough on dev environment to figure out why it’s looking for a typography.less file. I’m familiar with Bourbon, Neat, etc. and use SASS.


#8

Which node version are you running? My guess is 6.x?


#9

I’m using node version is 7.6.0.


#10

Gotcha, that’s likely the issue. Do you have nvm or n installed? If so try switching to node >= v 4.5.6. and I’m pretty certain that’ll take care of it.

Sage 8.5 states requirements as >= 4.5.6, but I’ve consistently run into that same issue when running node >= v6.

I’m not sure of the exact causes but I think there’s some module compatibility issues that are introduced starting at node v 6.

Let me know if this helps.


#11

OK. I"ll give this a try. Do note that sage 8.5.1 (same node v) doesn’t have the problem and builds the styles directory.

Will let you know.


#12

Ahh, right! Okay thanks for letting me know, I’ll have a look this evening.


#13

Hi Jimmy,
We have liftoff! node v5.12.0 did the trick! Yay, styles!


#14

This is fixed - - I checked with node 6.9.something and had no issues. Just needed to update dependencies, I somehow missed this commit, which fixes the issue.

If you’re already started on a new project you can update by just replacing the package.json and then rm -rf node_modules bower_components and then do npm install and bower install again.

When I made this I didn’t fork the Sage repo properly. I just cloned it, disconnected the repo, and started a new repo , so I don’t have Sage set as the upstream and have been manually diffing the changes.

Anyway, you should be good to go - and thanks for the heads up!


#15

Awesome! I’ll give it a go tomorrow. Been running with styles since the build started working.
Thanks again, Jimmy!


#16

Good morning! All working fine now with node v6.10.0 and new package.json. Happy Thrusday!


#17

Good to hear, and thanks again for pointing it out! :slight_smile:


#18

Hiya! Is BourbonySage still being maintained? There are a couple of changes to newest version of Sage (9.0), which I’d love to use with Bourbon.


#19

Hi there!

It seemed like development on Bourbon was kind of stalled for a while but I looks like they’ve just recently released V5.0 of Bourbon and 2.0 of Neat.

I’d been trying to keep it (BourbonySage) up to date with the 8.x Sage updates but truthfully I haven’t really had much time to even keep up with that lately.

I don’t know, I love that people have gotten some use out of it, but It seems like it’d be relatively straightforward to bolt Bourbon & Neat onto Sage 9 now, given the option to initialize a project with no CSS.

What changes are you thinking of?