Originally published at: http://www.sitepoint.com/bourbon-refills-provide-drop-design-functionality/
All the advantages of design templates and web component frameworks without surrendering control of your source code.
The Bourbon Refills Philosophy
If you’re tired of sacrificing your standards to templates designed by people who may not share your concern for clean and consistent source code, or frameworks that want to take over your entire site, you may be ready to try Bourbon Refills.
The Refills library consists of a useful selection of independent and customizable web page ingredients such as accordions, tabbed navigation, footers, font stacks, and other conveniences. Bourbon Refills are available as sets of coordinated HTML, SCSS, and jQuery code ready to use in your site to provide layout, functionality, and design in quick snippets.
Unlike all-or-nothing web frameworks that only work best if you adapt your entire site to their conventions, Refills can be surgically applied inside any site that can support a basic lightweight Bourbon structure with Neat and Bitters, regardless of whether the rest of the site is based around Bourbon. Refills are community supported, but the bulk of the work to compile and curate the library has been done by the developers at Thoughtbot, who are also the force behind Bourbon.
One of the nicest aspects of the Refills library is that each pattern or component is completely independent of the others. The Refills elements are all responsive thanks to Neat, and follow conventions that make them unobtrusive and portable, such as avoiding CSS nesting more than two levels deep, keeping styling to a minimum, and operating with internally-scoped variables.
You can even contribute new patterns and components that you’ve developed to help extend the library, as long as you make sure you’re following the guidelines.
Getting Started with Refills
To use the Refills library successfully, you need to have a few basic requirements present on your site:
- Bourboun (4.0+)
- Neat
- Bitters (10.1+)
- jQuery (for elements that require JavaScript)
It’s not hard to set up all of these tools to run seamlessly during development, and deploy easily to production. I’ve written some other articles on Sitepoint about Bourbon, Neat, and Bitters, and how to get up and running with them quickly.