How to Incorporate Bourbon?
Closed this issue · 6 comments
Hello - if I wanted to incorporate, say, Bourbon.io or its various sub-modules like Neat / Bitters, or, Typeplate, would I add their files into the scss folder and link them into main.scss?
Sorry for the newbie question. I'm new to Sass and found @jaydenseric 's site informative.
Sincerely,
Rick
Welcome Rick :)
Off the top of my head, add the bourbon folder to the scss folder, then place @import "bourbon"; at the top of _utilities.scss. You would then be able to use Bourbon anywhere in the Sass, other than in _config.scss.
Keep in mind that Bourbon used to be included in Barebones when it was the best solution for vendor prefixing, but was eventually removed in favour of Autoprefixer. Although it has some utility functions, I only really used the triangle one and even then you can usually write cleaner triangle CSS yourself. Some of the Bourbon mixins like retina-image I would even advise against.
Grid systems are generally a bad idea. The cleanest, most flexible approach is to layout your UI components yourself with mobile-first media queries specific to individual components. Lots of really good fluid (particularly centered) designs don't translate into a grid system. It adds a complexity, overhead and makes code less portable. My 2 cents.
In Barebones 3.0.0, which I will be merging into master branch soon I have dropped Sass completely for PostCSS plugins and have restructured the project for a component based approach. Might want to check it out.
@jaydenseric I appreciate the time you took to answer. I've been doing things the hard way and just realized that pre-processors can help. Now I looked at PostCSS briefly, and it looks fantastic.
I'll definitely check out the 3.0.0 release!
As for not using a grid system, and using "mobile first" media queries, do you mean an approach that uses min-width queries like stated here:
http://www.zell-weekeat.com/how-to-write-mobile-first-css
?
Yep! Thats a good article, although you rarely want to use max-width.
Something neat about PostCSS and the cssnext plugin is that you can use the nicer CSS4 media query syntax:
@media (width >= 400px) { }Many at first attempt to define a set of breakpoints for global use, often mobile, tablet, desktop. Please don't! Create pixel breakpoints as needed for each piece of the layout. Maybe the header needs to break at 350px and then again at 635px. Maybe the intro breaks at 800px. Sometimes two components break at the same time and it's tempting to use one variable for both when really it is just a coincidence.
Also, insert media queries right where they are needed in your component styles. Don't have 4 at the end of everything containing a mix of styles from every component. In a CSS bundle for a high-quality site it is quite normal to have 60+ media queries, many with similar min-width values.
It's always better to design device agnostic so that you have a comfortable, consistent layout right the way up from mobile to desktop without needing to modify the design with a media query. Less media queries = more device agnostic. Media queries are a last resort when there is no mobile-first design or fluid CSS solution. Hiding tricky stuff on mobile is the exact opposite of mobile-first and device-agnostic.
Thank you. That gives me a lot to think about. I'll try to find examples to study.
Fired it up today @jaydenseric; this is slick. It was easy to install (thank you brew) and just works. Nicely done.
Thanks @RickCogley, good to hear. Version 3.0.0 is the most radical update yet, hopefully it's not too exotic for the mainstream. Share any pain points; always open to suggestions. There isn't a high volume of issues, so if you have a question feel free to create one and I'll tag it accordingly.