Components and patterns built with Bourbon and Neat
Note: This project is no longer maintained.
Follow the @bourbonsass Twitter account for updates.
Requirements
It’s recommended that you use Autoprefixer, as Refills do not come packaged with vendor prefixes.
Installation
-
Install Refills’ dependencies: Bourbon, Neat and jQuery (if you plan to use any components that require JavaScript).
-
Go to the Refills website, click “Show Code” under the component or pattern that you want and copy-paste it into your project.
-
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.
- Add Refills to your Gemfile:
gem "refills", group: :development
- Then run:
bundle install
- Use the following Rails generators:
List all available snippets:
rails generate refills:list
Add a snippet:
rails generate refills:import SNIPPET
If you want to generate coffeescript instead of javascript, simply add --coffee
rails generate refills:import SNIPPET --coffee
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
Miscellaneous
If your css reset file does not add webkit antialias, add the following code to your Scss file:
body {
-webkit-font-smoothing: antialiased;
}
The Bourbon family
- Bourbon: A lightweight Sass tool set
- Neat: A lightweight semantic grid framework for Sass and Bourbon
- Bitters: Scaffold styles, variables and structure for Bourbon projects
- Refills: Components and patterns built with Bourbon and Neat
License
Copyright © 2014–2017 thoughtbot, inc. Refills is free software, and may be redistributed under the terms specified in the license.
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.
About
Refills is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.
We love open-source software! See our other projects or hire us to design, develop, and grow your product.