Prepackaged patterns and components built with Bourbon, Neat and Bitters

• Examples & Code Snippets
• Changelog
• Issues & Bugs

Requirements

• Sass 3.3+
• Bourbon 4.0+
• Neat 1.6+
• Bitters 0.10.1+

Installation

1. Install Refills’ dependencies: Bourbon, Neat, Bitters, and jQuery (if you plan to use any components that require JavaScript).

2. Go to the Refills website, click “Show Code” under the component or pattern that you want and copy-paste it into your project.

3. Customize: Most of the components and patterns have a set of Sass variables that allow you to quickly tweak the look and feel.

Installation for Ruby on Rails

Alternative to copy-pasting manually, we also have a Refills gem that allows you to add components and patterns via Rake tasks.

1. Add Refills to your Gemfile:

gem 'refills'

2. Use the following Rails generators:

List all available snippets:

rails generate refills:list

Add a snippet:

rails generate refills:import SNIPPET

This copies the snippet’s partial to app/views/refills, the stylesheet to app/assets/stylesheets/refills and the JavaScript to app/assets/javascripts/refills

The Bourbon family

• Bourbon: A simple and lightweight mixin library for Sass
• Neat: A lightweight semantic grid framework for Sass and Bourbon
• Bitters: Scaffold styles, variables and structure for Bourbon projects
• Refills: Prepackaged patterns and components built with Bourbon, Neat and Bitters

Credits

Refills is maintained and funded by thoughtbot, inc. Tweet your questions or suggestions to @bourbonsass and while you’re at it follow us too.

Whenever code for Refills is borrowed or inspired by existing code, we try to credit the original developer/designer in our source code. Let us know if you think any credit is absent.

License

Copyright © 2014 thoughtbot, inc. Refills is free software, and may be redistributed under the terms specified in the license.