Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here


[no longer maintained]

Subscribe to updates I use refills

Statistics on refills

Number of watchers on Github 1598
Number of open issues 0
Average time to close an issue 29 days
Main language CSS
Average time to merge a PR 7 days
Open pull requests 17+
Closed pull requests 47+
Last commit over 1 year ago
Repo Created almost 6 years ago
Repo Last Updated over 1 year ago
Size 99.5 MB
Organization / Authorthoughtbot
Latest Releasev0.1.0
Page Updated
Do you use refills? Leave a review!
View refills activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating refills for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


Components and patterns built with Bourbon and Neat

Note: This project is no longer maintained.

Follow the @bourbonsass Twitter account for updates.


  • Sass 3.3+
  • Bourbon 5.0+
  • Neat < 2.0, >= 1.6 (Refills is not currently compatible with Neat 2.0)

Its recommended that you use Autoprefixer, as Refills do not come packaged with vendor prefixes.


  1. Install Refills dependencies: Bourbon, Neat 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", group: :development
  1. Then run:
  bundle install
  1. 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 snippets partial to app/views/refills, the stylesheet to app/assets/stylesheets/refills and the JavaScript to app/assets/javascripts/refills


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


Copyright 20142017 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.


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.

refills open issues Ask a question     (View All Issues)
  • about 3 years Modal's stopPropagation disables child elements from performing additional js functions.
  • about 3 years HTML not effected by SCSS
  • about 3 years switch is not accessible via keyboard navigation
  • about 3 years hero refill background img
  • over 3 years refill samples and Chrome device toolbar
  • over 3 years Modal closing mechanics break Rails' UJS
  • almost 4 years Multiple Vertical Tabs on a page doesn't work
  • almost 4 years Sticky Footer aint stickin.
  • over 4 years rake coffee task not working
  • over 4 years Seach Tools is missing coffee
  • over 4 years Unstyled js files are not targeted
  • over 4 years Mobile sub menus do not toggle to hidden
  • over 4 years How do we package refills?
  • over 5 years Cannot load such file -- refills/import_generator
refills open pull requests (View All Pulls)
  • Maps
  • Clarify
  • Refills haml
  • Remove `js-*` classes
  • Update Ruby to 2.3.0
  • Code clean up
  • fix: Allows you to set is-active tab not only to "first" tab
  • Upgrade to Bourbon 5
  • Make sub-submenu of nav and center nav responsive
  • Mg remove fake logos
  • Mg remove neat
  • Update thoughtbot logo
  • Get dependencies up to date
  • Fix loading vertical tab js issue
  • Add toggleable code snippets
  • Add tabs component
  • Add missing border-right: 0 to _tables.scss
refills questions on Stackoverflow (View All Questions)
  • Bourbon Refills How-To Link To Tabs
  • Refills modal doesn't work on Rails 4.2.4
  • Why does this SASS (from Refills / result in whitespace around the element?
  • Using Bourbon, Bitters, Neat, Refills with Bower
  • Button To Next Tab on Refills Accordion
  • How to import UNSTYLED Bourbon Refills
  • My Tampermonkey script works but Tumblr refills the original information
  • Installing refills gem gives error
  • Mobile Breakpoint Using Bourbon/Neat/Refills
  • Unable to use Bourbon Refills
  • Bourbon Refills Navigation JavaScript error: Uncaught TypeError: undefined is not a function
  • Cannot click out of off-canvas navigation (bourbon & refills)
  • Bourbon Refills: Tabs in IE8
  • Reducing number of refills in fgets()
  • Adding Neat, Bitters and Refills to a Hammer for Mac
  • Refills prescriptions and Tranferring Prescriptions. How should I approach this?
refills list of languages used
refills latest release notes


  • rails g refills:REFILL --coffee


  • Bugfixes for mobile view
  • Add sub sub nav
  • Add dropdown for nav
  • Let nav push everything down when opening menu on mobile


  • Bugfix and make the centering of arrow react to resize.


  • Decouple Bitters from all Refills. Variables added to each file.


  • Close by clicking outside
  • Prevent scrolling background


  • Add ARIA roles to components and patterns

Added components and patterns

  • Center logo nav
  • Texture
  • Pagination
  • Flexboxes
  • Fade in behavior
  • Maps
  • Animate
  • Side image
  • Video
  • Filters
  • Device
  • Expander
  • Parallax scroll
  • Initial release
  • Fix errors caused by missing generator dependency in list generator
  • Navigation refill: Keep search and sign up visible on mobile screens
  • Navigation refill: Add dropdown menu
  • Navigation refill: Add indication on currently selected nav item
Other projects in CSS