What is Reddit's opinion of Bourbon?

From 3.5 billion Reddit comments

Scenario : different browsers require different conventions for some css attributes. It's a huge pain to keep up with all of them so it would be great if there were a be tool to take care of all of that for us.

Bourbon for Sass used to do this for us which was alright. But they deprecated that functionality and advertise the use of Autoprefixer. Autoprefixer looks at all of your css (as output by sass) and will insert all the tedious browser prefixes for us.

So essentially we have the following

Sass code --> CSS code --> CSS code with Prefixes --> ...

Hence a pre-css stage, and a post-css stage.

Foundation is less opinionated design-wise, imo. Plus I work with Sass 99% of the time, so the LESS-iness of Bootstrap has made it a lot less flexible for me.

Honestly though I rarely use either, mostly roll with a Bourbon+Neat and a 7-1 architecture and author my own markup. The accessibility part of Foundation 6 is really great though, and something I need to get better at.

I'm a fan of bourbon.io + neat. It's a library of Sass mixins that you include instead of using baked in classes. You can either include them for specific elements and create your layout that way or for bigger projects I like to create just the grid classes I'll use over and over and include them as classes (similar to Bootstrap, Foundation, etc.). That way I have a minimal grid system that only has what I need.

Just dropping in to say I love ThoughtBot's entire suite--Bourbon, Neat, Bitters, and Refills--and I highly recommend you all give it a shot in your next project. It's very simple.

I'm a HUGE HUGE fan of the Bourbon stack.

Bourbon is a SASS mixin library. If you just include the Bourbon code, and compile to CSS, you will not get a single line of CSS. This keeps me from having a whole framework's worth of CSS in my CSS file, yet still have access to the framework's stuff.

However, you can add on to it with both the Neat and Bitters extensions.

Neat is the grid framework. I like it, mostly because instead of muddying up my HTML with a ton of "small-12 medium-6 large-3 columns" classes, I just add them to the css itself:

.some-kind-of-pod { @include min(600px) { @include span-columns(6); } @include min(768px) { @include span-columns(3); } }

so now all of my styles are on a single element. This way just works for me, honestly, and it's not for everyone.

Now we get back to the question at hand: The buttons and forms, so we're now at Bitters. Bitters actually builds out some CSS, and gives you some sane defaults. You'll still need normalize, but Bitters is a gem that you install that puts in some forms and stuff.

Check out more here: bourbon.io

http://getbootstrap.com/customize/ - and only include the grid system. I have a lot of gripes with bootstrap, but have to admit they have an awesome grid system.

Although I recently switched over to Bourbon & Neat - http://bourbon.io/ - for the grid, and really enjoy their solution.

Yeah, I'll never go back to writing CSS without SCSS compilation. You can do some really cool stuff. For example, I worked on a project where a lot of elements needed to be turned into circles. So I created a custom mixin:

_circle.scss

Then, I included it at the top of my _application.scss file (I made this file to make includes accessible, or else I'd need to include it on every page).

Now, I can just do:

.something { @include circle(2em); }

And when the CSS compiles, it'll return:

.something { width: 2em; height: 2em; border-radius: 2em; }

Sure, I could've created a helper class (like .circle) and added it to each element, but in an effort to reduce confusion and keep the HTML small, it's better to keep it in CSS.

Also, check out http://bourbon.io -- this changed my life. Fuck Bootstrap, it needs to lose some weight.

Edit: Here are the contents of _circle.scss in case you're interested:

// Returns width, height, and border-radius to make things into circles. @mixin circle($size) { @include size($size); border-radius: $size; }

"size" is another mixin (provided by Bourbon), which return width and height for the requested size. Not a super useful mixin, but it saves some space and time when using width and height attributes that are identical

Bourbon + Neat is my preferred go to grid system. You can use very clean, semantic HTML and you don't need to futz around with a bunch of wrapper/container classes or specify columns inside of your HTML. A good example is that you define the widths of things in SCSS, so if you were to have an article and an aside you would go into your SCSS file and give it a rule like:

article { @include span-columns(8) }

aside { @include span-columns(4) }

Those would sit next to each other on the grid. Pretty easy. Check out the examples for Neat here to get an example of how it comes together.

I use it to develop a WordPress whitelabel theme that we use in house at our company because it's so flexible we can build pretty much anything with it. It's in some 20 of our projects now.

I agree—for instance, loading Font Awesome and not using the icons. If you're going to use that much customization, build from scratch most of the pieces to your puzzle and use libraries to assist in the cumbersome gaps like Jeet for grids and Bourbon for vendor prefixing. If you want something that looks cool and original, slapping a homogenized framework on top is either a) going to stunt your design flexibility or b) cause you to overwrite a lot of CSS making your overhead even more than the large framework itself.

It depends on what you're looking for in a CSS framework. Your question is quite broad. What kind of tools are you looking for?

For instance, Bourbon is an awesomely handy Sass mixin library to make it a little cleaner to write good CSS/Sass. Check the docs and you'll see some of the handy little bits it does for you (like writing browser prefixes).

If you use Bourbon, then you can use their Neat library for a dead-simple, semantic grid system which makes source ordering viable and easy. Neat saves me hours of work and pain, and I don't have to rewrite my HTML just to change the layout a bit.

Does it really matter?

If I were you, I'd very much look at using a SASS mixin library like Bourbon, which will handle all of this for you. Ever looked at flexbox? Bourbon will help you stop pulling your hair out.

Or, you could use something like Autoprefixer which will handle this specific problem for you.

I guess the decision to use -webkit- is because they feel that their 'final' code for the unprefixed version is not quite there yet, which is fair enough.

Bootstrap does have separate profiles for specific resolution thresholds. It dynamically scales the grid. Bootstrap is quite fantastic. There's also Bourbon with Neat from thoughtbot for Ruby projects that accomplishes something similar.

They all work pretty much the same. I like Boubon, but thats just my preference. I have used foundation, and bootstrap. Both of those frameworks are fine. They are all about the same, nothing really works "better" with rails, each has a sass. It's really just a bunch of trade offs depending on what you pick. So really it just comes down to these couple things. One, use a framework, and two, pick the one that makes your life easiest. That's it.

Take a look at bourbon and neat if you like the quick start kick of bootstrap but like to roll a lot of your own stuff. It's a great way to pick up SASS essentials too.

You may also want to discover Jade ... put them all together with Yeoman (grunt/gulp & bower) and you'll fly.

My own experience is that I see a shift towards Sass using the SCSS syntax. Hopefully that's not all confirmation bias…

I prefer the indent syntax (along with terser syntax =mixin-name() vs @mixin mixin-name()) coming from a Python background, but the sass command comes with a converter so it's not hard to change from one to the other. I find Sass more flexible with loops, maps and better color manipulation operations built in and super popular libraries to deal with the hopefully-soon-to-be-defunct prefixes like Bourbon.

Edit: It seems LESS has a lot of these color operations finally. I hadn't read the docs in a while…

This is why I like Bourbon. Much higher learning curve, but it's super fast and small -- and scales well since you define your own classes and don't use their HTML (with the exception of components, should you choose to use those).

That's true. I'm used to our team using SASS to pull in only the components needed rather than everything -- we actually use Bourbon which keeps things really small and is awesome. :)

If you're ready to use a CSS framework, they make it even easier! I'm a big fan of Bourbon. You store your breakpoints as SASS variables, and then call, for example:

.something {

@include media($tablet-up) {

display: none;

}

}

The end result is the output media query others are referencing here. It makes things super fast.

Bourbon + Neat, assuming you're using Sass. It's not really a "grid only" framework, more of a library of mixins that are only compiled to your CSS if you actually use those components.

Just at a glance:

_mixins.scss : name too generic, says nothing about the contents which happen to refer only to your breakpoints.

_normalize.scss : consider replacing with updated sanitize.css in your package.json The scss for it isn't modularized yet.

But there is a bigger problem with your lib.

What you've done here is attempt to replicate bits and pieces of bootstrap / foundation, which is fine nothin against it.

How do i say this, the problem is like such frameworks they work fine in their own right. As long as you stay within the the bootstrap / foundation library and tweak things as they're defined by the framework. But the minute you go outside the scope they've predefined and you want or need to do things different often you have to start hacking to get around things in the framework itself.

I sorta get this feeling from this lib when i see the giant global variables file. Like for example if you compare this to compass or bourbon.

In compass the number of mixins + functions is easily perhaps twice that of the variables.

Bourbon is pretty much all mixins albeit with some variable defaults.

As long as this is only intended as boilerplate then it's pretty good, however if you need to integrate it / bits of it later into projects the problems will emerge.

I don't necessarily know how to completely move off Bootstrap, I have been looking into alternatives. Bourbon is a lighter framework that does similar things and isn't as opinionated as Bootstrap.

As for building your template (speaking blindly as there is no link), it's probably best to build some of those elements you need yourself, and use a light amount of Bootstrap to push them to where you need.

Frameworks are great when they help prevent re-writing the same things over and over, i.e. they help with rapid development and prevent code smells (mostly).

Bootstrap and Foundation are great for rapidly deploying a prototype and getting some testing done. However, I'm not a fan of keeping them in a final product. Most of the discussion here already touches on some of the concerns (bloat, un-semantic selectors, overly specific, bloat, did I mention bloat?).

Note that I'm not advocating reinventing the wheel here, you can absolutely take what works and leave what doesn't. Arguably, this is what Front End devs should be doing. A good framework should get out of the way of development. Far too many front end frameworks do poorly, and as a result you find yourself locked into a specific one.

Over time I've been gradually taking the best parts of Bourbon and its associated parts and rolling them into a system that best meets my needs. Since Bourbon is all mixin/extension based, I only roll in what I need in the final product. My goal is to create a pattern/design library that's accessible, lightweight and semantic for each project without starting from scratch each time.

The Bourbon website is pretty good and when you install the entire suite, Neat, Bitters it allows you to use refills (copy & paste code) which allows you to create a pretty quick layout for a website. Another example I'm aware of is Some like it neat which uses some of the bourbon elements.

I thought it was interesting that they use libraries like Bourbon and its grid library Neat. I've used both libraries on projects in the past and really enjoy them. Looking forward to digging into how they meet 508 compliance and ADA accessibility. Had to implement some techniques to meet ADA accessibility standards at the beginning of the year for a project I was working on.

Do absolutely check out SASS before you commit. Two recommendations: try the SASS syntax and install Bourbon.

Bourbon is a set of mixins that abstracts away vendor prefixes. Especially when you're dealing with properties like flexbox that have a complicated history, this is a godsend.

SASS the preprocessor comes in two flavours: SCSS, the familiar CSS-like syntax most people seem to use, and indentation-based SASS. The latter is a lot more succinct, and I love it to death.

Here's an example of both combined:

.gallery +display(flex) +flex-flow(column wrap) +justify-content(space-between) figure @media screen and (max-width: 40rem) +flex(1) @media screen and (min-width: 40rem) +flex(0 0 25%)

The included sass-convert command line tool allows you to convert freely between both syntaxes, so you don't paint yourself into a corner by trying.

I'll be honest. I'm judging the book by it's cover. I don't like the website. It's very hard to read (Text spanning full-width), the animations = amateur-looking, HTML elements jump around all over the place when hiding/showing.

I'll stick to http://bourbon.io/

Bourbon and it's related projects are worth looking at. http://bourbon.io/

Bourbon is a mixin library (can replace Compass), Neat is the grid system, and Bitters would the default styles, if you want them.

Excellent, cheers for the slides.

I have never really been particular fond of using a CSS framework such as Foundation or Bootstrap when incorporating a design. I often find that things get very bloated and you spend the majority of your time reseting styles, adding more code.

The setup which works for me is Sass and a good mixin library or two, in my case that is usually Bourbon, Bourbon Neat and Bourbon Bitters. This gives me everything I need to just get on with writing my own SCSS and HTML markup as opposed to sticking to a strict set of guidelines.

Not saying that CSS frameworks don't have their place. They are fantastic if you want to build the front-end of a CMS or internal application as more often than not you don't really need to style them up too much as they are not front facing applications.

As I understand it, all your markup/css is referring to CSS pixels. The device determines how CSS pixels map to physical pixels based on the device's device pixel ratio. So if you serve a 50x50 image to a device with a 1.3 ratio, it scales the image up to 65x65 physical pixels which looks like 50x50 size on a standard screen. A device with a ratio of 2 would scale it up to 100x100. If instead you serve a 100x100 image but use CSS to resize it to 50x50, a device with ratio of 2 will not have to scale it at all--it would map it to device pixels 1-to-1, resulting in a sharp image.

The reason an iPhone pretends to have a 320px-wide screen rather than it's true 640px is because if it rendered the page at that higher resolution, everything would be uncomfortably tiny for the human eye to see.

Personally I think SVGs are going to steadily increase in popularity, as they can scale to any size without image degradation. For other image types, it makes sense to have two versions: a standard size, and one twice as large. For background images, you can use a media query for high density screens to swap in the larger-sized versions. As I'm using SASS/Bourbon, I use this.

Both are pretty similar and have large user bases. Most people shy away from LESS at first because they think you need to have it run client-side using an optional javascript file, but you can precompile it, just like SASS. I use Grunt to compile my less (or sass) files into a single main.css. I also use grunt to concatenate and minify my js files into a single main.js.

I find LESS to be a little cleaner because of how they handle the syntax for mixins compared to SASS, but that's the only major difference I've come across.

Either way you go, mixin libraries are helpful:

http://lesselements.com
http://lesshat.com/
http://bourbon.io/

You might have a look at todo MVC which builds out the same to-do list app using different JavaScript frameworks. That said, "libraries" is too broad a term for a meaningful comparison to be made across technologies. How would you compare bourbon with libcurl, for instance. You might get a better result here if you were able to make this question a little more specific.

I'd say give Bourbon.io + Neat a whirl if you enjoy Sass/Scss. It's less a "framework" and more a "library" of mixins so basically you can avoid the issue of having a ton of CSS that you don't use.

Of course you could modify/tailor most frameworks and simply not include the parts you don't use, but I see where this is a lot of work for not much gain.

If your using Sass (or something that transpiles it), Bourbon.io + Neat. It's less of a framework and more a library of mixins to quickly build up your layout structure and doesn't include things that you don't use.

Otherwise pretty much all of the popular frameworks are going to have the same criticisms that could be applied to Bootstrap.

Do you use a SASS framework? We started using Bourbon and it changed my life. You predefined your breakpoints and call a simple SASS mixin to invoke it. Code mobile-first, and everything expands nicely to desktop.

Try to learn SASS + Bourbon + Neat + Bitters + Refillls, for better developing and awesome styles:)
http://bourbon.io/ Nice tutorial https://www.youtube.com/watch?v=8ItNE_DX6Cc

More practice and enjoy)

Most other front-end grid frameworks force you to write the same sort of repetitive, div heavy, totally unsemantic html. If you just want to build a UI in a hurry its a lifesaver, but if you want to write good markup as well you might be happier trying something like Bourbon, Neat, Bitters and Refills

Sorry, I missed that!

The sass looks good, too. I would suggest making use of $variables for things like repeated colors (e.g. #0896F2), and sizing that might be repeated, for example 40px width and heights for .socialnav img and li elements. Another solution is to give the img 100% height and width.

These suggestions are nit-picky for a small site like this, but as a project grows and the design changes, things like this will be very helpful. Other things to look into for larger projects are SASS/SCSS functions and mixins, and http://bourbon.io which provides a lot of functionality. For example, @include box-sizing(border-box) would compile to all of the prefixes you need (-webkit, -moz, etc).

Also, I think it's great of you to ask for constructive criticism on your work!

Progressive enhancement is the winner here. So long as the presentation works well in IE9 you can use flexbox pretty much without worry.

Granted, I also use the Bourbon.io mixins, so that helps quite a bit. But, at the same time, if your design succeeds or fails on whether or not you can use flexbox then you probably have bigger problems than IE9 support.

I'm a big fan of Bourbon and Neat. I realize there are some other options for handling browser fixing but Bourbon has some other tools that are nice.

Neat is definitely my favorite responsive layout tool, at least to date.

Bourbon: http://bourbon.io/ Neat: http://neat.bourbon.io/

In the same family is also Bitters - a set of default styles, and Refills - some premade components.

I made the above border-box comment. In the defense of IE, their implementation of border-box, or rather their default, really does make more sense than the gecko and webkit implementations.

That said, it's still a pain in the ass to handle. I don't know what stack you're using or where your skill level is at, so you may well already know this or not be able to use it but:

Definitely use a reset stylesheet whenever you start coding up a page, coupled with the above border-box declaration. Those two things together will buy you a lot of consistency out of the gate. After that, I definitely recommend a preprocessor with a good library for generating vendor prefixes. (Something like bourbon with scss.)

Just getting your project set up with those things will eliminate 95% of all you IE issues, and remaining issues tend to focus around multiple browsers (things like select rendering between chrome, ff, ie)

If that helps in the future, cool! If not, carry on!

This might be a bit different from other CSS frameworks but I really enjoy Bourbon and it's whole ecosystem (Neat, Bitters and Refills). It's a solid base for any project with decent sized CSS.

As for Javascript, jQuery is most of the time everything you need, for bigger projects maybe React.js is the easiest technology to get started with. Even though it's not a complete framework like Ember.

Also, yeah I suggest Grunt or Gulp for automatization.

Look in to using a grid system. In our dev shop we use burbon and neat. Burbon is the reset and base framework, neat helps us by providing a very flexible set of classes and mixin's which help provide this.

Although this isn't vanilla CSS the two SASS libraries do most of the heavy work for creating responsive grids and some short cuts.

The easiest way would probably be to set up Grunt/Gulp for each project you're working on (which you probably would want to do any way) and then have NPM take care of the dependencies. That comes with the added benefit of being able to run libsass which is way faster than the Ruby gem. libsass doesn't support Compass yet, unfortunately but it seems that Compass is somewhat abandoned nowadays and I would recommend Bourbon either way. Bourbon also has a Node implementation available. I know this didn't really answer your question but I thought I'd present an alternative which, in my opinion, is superior.

Git X for staging Git comments (command line for usual pushing/pulling/rebasing stuff)

Bourbon for SASS

However.. I think the most invaluable thing or the thing that had the most impact was learning about/using npm/bower + grunt/gulp.

:D

Using mixins to account for browser prefixes is worth it alone, so instead of writing

-webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);

...you'd just write @include transform(scale(0));

If you're using SASS, definitely check out Bourbon - http://bourbon.io/docs/

Have you ever used bourbon.io (bourbon, neat, and bitters)? If so, which do you prefer? I'm definitely going to use Suzy on my next project. Thanks for the resource!

The default is 16px, Bourbon calculates based on that, and since your media queries are using email units, the design will respond based on one the user's sizing preferences anyway. http://bourbon.io/docs/#px-to-em

1 - It can. Or it can bog you down in the mire of features many frameworks offer. Maybe think about something more like Bourbon, Neat, Bitters, where you're only affecting what actually needs affecting via mixins in your stylesheet.

2 - Evaluate your customers' needs first, and then build the most modern thing you can with them, IMO. If they need IE8 support, give it to them. This approach won't always work though -- you really need to know the audience.

3 - I strongly prefer SASS. Bourbon and Compass are both fantastic mixin libraries, and I prefer the SCSS syntax. The new (v 3.3.x) changes to the parent selector also make implementing BEM architecture much easier.

4 - The biggest favor you can do yourself is to make all of your projects visually and experientially unique, but very very similar from a development standpoint -- it makes reusing useful bits and troubleshooting much easier in the long run.

Have a look at Prepros (try the free version). You can have it listen on a directory and it'll automatically compile your sass files on save. It also does minification and image compression.

I recently got into SASS as well, and man you're going to love it. I recommend Bourbon, too, which is a library of useful SASS mixins and functions.