I do 3. Works fine. I can’t remember if I had to put any overrides. I’m pretty sure wiredep just picks it up automatically without any work on your part.
Edit: I was having some issues importing it on the project I was working on, then I realized I was just being silly because that project was Sage-LESS. Obviously Bourbon wouldn’t work on LESS. Only SCSS/SASS– v8.2+.
Seems to be working great now that I realized that. Thanks man!
Hey guys, I’m curious, are the two of you using Neat & the Refills as well, or just the Bourbon mixin library?
I’ve been intrigued by the Bourbon stuff for a while. I’ve played around with it, but I haven’t used it in a real project, and I’ve always stuck to Bootstrap with my Sage projects because I wasn’t sure how much of a PITA it would be to get everything up and running.
I’m actually in the exact same boat as you Smutek, I’m just barely looking into Bourbon as of today.
This is exactly why I was skeptical of making the switch from LESS to SASS. My LESS library is now evolving into something bigger– more comprehensive as SASS. All these new frameworks keep popping up– such as Compass and Bourbon(as well as Bitters, Neat, Refills, etc). I was planning on using Compass, but I REALLY like to keep things SUPER simple, so I think Bourbon is where I’m going to experiment for the moment(because it’s lighter and simpler than Compasss, to my knowledge).
But this is my first day to it. I’m trying to figure out how to implement it into my projects as quickly as possible and watching this video to get a starting point.
Compass has been around for a long time, and I wouldn’t necessarily suggest using it anymore. It has some helper functions, and back in the day the automatic sprite generator was amazing. However with the ability to use gulp.js now as well as the rising of font icons, sprites aren’t super needed anymore on most projects, and if you do need image sprites you can add that in pretty quickly with a gulp plugin.
Bourbon has also been around for a while, but it continues to evolve. About two years ago, Bourbon and Neat was all there was, so since I’ve really used them a lot, Bitters and Refills are brand new to me. But the cool thing is that they’re all optional, so you can start with Bourbon (and probably Neat, as that’s basically the grid system), and add on the other things as necessary.
The other cool thing about using Bourbon and it’s components instead of Bootstrap is that it’s mostly mixins and variables, so the initial stylesheet is much smaller than even a customized and reduced Bootstrap CSS file.
That’s funny you say Compass was well known for it’s sprite generator because I’ve heard that as well. And when I heard that I thought– why would I need to use sprites? I use almost strictly SVG nowadays.
Save it as inline-[your-file-name].svg.php (no brackets obviously)
Then to input the html/php markup I use this <svg><?php get_template_part( 'assets/svg/inline', 'your-file-name.svg' ); ?></svg>
I’m sure a lot of you have your own systems, but I love inline SVGs because they keep things super clean. If anyone has any methods for SVGs with cleaner base markup, I’d LOVE to hear 'em. Although this should definitely be a topic for another thread.
Good stuff Kalen! I’m going to load this up and have a look tomorrow.
As an aside, I love that social media menu technique. I do something similar, I learned it from this post on Justin Tadlock’s site. I’m kind of addicted to it, and use it everywhere now. It’s a really great, easy to use option on the client side, I think.
Thanks, I think I put in the credits that I basically yanked the idea from Automattics Minnow theme. I reviewed it for the WP theme repository and thought it was a pretty cool idea
I’ve used Bourbon + Neat quite a bit. I’ve also used Bootstrap and Foundation quite a bit.
Bourbon + Neat Breakdown
Pros
The grid is excellent (table grids, automatic rows, minimalistic)
Everything is mixin based so very compact, grokkable, and predictable codebase and output.
Separate styling from the templates. Never touch HTML files to change the grid or look and feel of a component
Extremely flexible for responsive design. No hacks or workarounds needed for complex responsive components
Pitfalls
Will have to create conventions and documentation from scratch if working on a team of inexperienced people
Reinvent the wheel for every project
Takes longer to use compared to bootstrap or foundation
Difficult to enforce consistency between controls on larger projects. Need strong processes in place (styleguides, etc.)
“Up in the air”
You will not have the javascript components from foundation or bootstrap to lean on. This could be considered a negative. However, the ease of bringing in third-party, modular dependencies via NPM or bower sort of negates this.
Do not use bourbon + neat
Large dashboard/CRUD web applications
You are trying to build something quick to hand off to someone else
Projects where you require granularity in the design
You are working on a long-lived product
Bottom-line
If you are building a site similar to most of the stuff found here. You should probably just use bootstrap or foundation. If you are worried about file-size and performance: I hope you are properly benchmarking and have data to support your decisions. If you are building something very bespoke:
Hi @smutek
I’ve been using your Fork for my last Wordpress project. Thanks a lot
I just wanted to know if you’ve planned to build a fork of the upcoming Sage 9 release?
It would be great to have Bourbony Sage 9 in place to use bourbon has a Webpack module, etc…
Thanks for your reply
Hey @mecanographik - really glad to hear it’s been useful. I’ve not even experimented with Sage 9 yet but I definitely plan to build a Bourbony Sage 9 fork once Sage 9 has been released.
It’s a really great, easy to use option on the client side, I think.