thoughtbot / refills

[no longer maintained]

Components and patterns built with Bourbon and Neat

Note: This project is no longer maintained.

• Examples & Code Snippets
• Changelog
• Issues & Bugs

Follow the @bourbonsass Twitter account for updates.

Requirements

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

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

Installation

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

2. Then run:

bundle install

3. 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.

refills's Issues

Components TEXTURES

Syntax error: $string: #e1f2f1 is not a string for `str-slice'

The issue stems from this line of code:

@include texture(180deg, lighten(#DDF0EF, 1), darken(#DDF0EF, 10), 67, 0);
// gradient color 1, gradient color 2, gradient angle, texture-number, 0=inverted or 1=normal

Not important-ish: website errors

In the website (http://refills.bourbon.io/), if you are not in the components page, the scroll generates javascript errors. Just thought I'll let you know.

Cheers.

RTL support?

Is there any RTL support to this?

If not, what would it take to add it?

ARIA support

The refills have no Aria support for accessibility.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Mg nav 3rd level - icon missing

Happens on iPhone, viewing on the refills.bourbon.io page

Menu anchor on website doesn't work on Android

On my Android (Nexus 5), the menu anchor icon on the Refills website is an oval instead of a circle and doesn't have the hamburger inside. I haven't checked iOS.

Use Extends or Mixins for the components

The issue is that the components are name-spaced to a specific role, for example the Comments component uses 'comment-', yet this component can be used for other things such as an Author block or a list of posts with thumbnails.

My suggestion is that the code be more flexible and SASSy. I think I may have come up with a solution using the Extend method.

It's usage will be as follows

Which compiles tidily as

There's probably a cleaner way of doing it, I'm still a novice at SASS. But hopefully you get the idea.

Expander - Expanded state on load

Hey guys,
First of all, fantastic job on Refills! Really happy to see something new each time I return to the docs.

I would like to have the Expander load in it's expanded state. Could you please explain how I might do this?

Thanks!

Vertical Tabs doesn't support more than 6 tabs

We have a use case for 11 vertical tabs. Because the vertical tabs component has a fixed height, any tab beyond 6 tabs is hidden from view.

Error using Flashes Component

I'm getting this error trying to use the Flashes Component in a Rails App:

Invalid CSS after "$flashes: (alert": expected ")", was ": $flash-yellow..."

Is there anything wrong with the Flashes code?
(btw, love bourbon family)

My apps scss:

@import "normalize";
@import "bourbon";
@import "base/base";
@import "neat";
@import "notice";

And _notice.css.scss:

$flash-red: #FBE3E4;
$flash-yellow: #FFF6BF;
$flash-green: #E6EFC2;

%flash-base {
  display: block;
  font-weight: bold;
  margin-bottom: $base-spacing / 2;
  padding: $base-spacing / 2;
}

$flashes: (alert: $flash-yellow, error: $flash-red, notice: lighten($base-accent-color, 40), success: $flash-green);

@each $flash, $color in $flashes {
  .flash-#{$flash} {
    @extend %flash-base;
    background: $color;
    color: darken($color, 60);

    a {
      color: darken($color, 70);
      border-bottom: 1px solid transparentize(darken($color, 70), .7);

      &:hover {
        color: darken($color, 90);
      }
    }
  }
}

Remove .sass-cache from stylesheets

To reduce the overall size of the repo, source/stylesheets/.sass-cache should be removed. Cache files ideally should not be checked into VCS.

<module:Refills>': uninitialized constant Rails::Generators (NameError)

I get the error

/import_generator.rb:2:in `module:Refills': uninitialized constant Rails::Generators (NameError)

Not really an issue just need help to mix 2 refills

Hi I'm trying to convine 2 refills to make a navbar the first one is the navigation with the social tag from footer-2 also im trying to center the logo and make it bigger but im a lost by now this is as far i can get

as you see on "responsive mode" is broken also the vertical alignement of the links
So if you have the time I hope you can help me fixing it here are my files https://gist.github.com/cruznick/10002465
ps sorry fo my english

Modals - prevent background page scroll

I think it should be possible to prevent the page from scrolling while a modal is open.

Modal close wrong alignment in example code

I kept getting the close label left-aligned instead of the expected right-alignment.

I believe that this is caused by the following line in the sample CSS:

  .modal-close {
    @include position(absolute, ($modal-padding /2) ($modal-padding /2) 0 0);
    ///...

Which added a left: 0 declaration screwing things up. Changing it to:

    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);

Did the trick.

Thoughts?

Dropdown in modal getting squished

I am trying to do a modal form and also make use of the refills dropdown. The dropdown works fine when outside of a modal, but when inside a model it gets squished as shown below.

Any ideas?

Here is the html taken directly from the refills page:

<div class="modal">
  <label for="modal-1">
    <div class="btn js-btn">Click for Modal</div>
  </label>
  <input class="modal-state" id="modal-1" type="checkbox" />
  <div class="modal-window">
    <div class="modal-inner">
      <label class="modal-close" for="modal-1"></label>
      <h1>Modal Title</h1>
      <div class="dropdown">
        <div class="dropdown-container">
          <p class="dropdown-description">Description</p>
          <p class="dropdown-button">Click to Select</p>
          <ul class="menu">
            <li>Dropdown Menu Item</li>
            <li>Another Item</li>
            <li>Item Three</li>
            <li>The Last One</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Cannot load such file -- refills/import_generator

I am using bower to manage my all my libraries and plugins, I believe best practice is to leave all those files _bower_components folder for updating and if you're going to port your project.

Anyway I am wonder if that's my problem. I have a sass folder which is linking to the _bower_components folder.

@import "../_bower_components/refills/source/stylesheets/all";

This is the error I am getting:

 Warning: LoadError on line ["1"] of /Users/antonioortiz/Sites/_aortizRefresh_/app/_bower_components/refills/lib/refills.rb: cannot load such file -- refills/import_generator
Run with --trace to see the full backtrace Use --force to continue.

Should I just dump the refills files in my sass folder?

$base-spacing not defined when using "cards"

Really enjoying using your refills. However, when trying to use the "cards" refill, I continued getting an error with $base-spacing undefined

I eventually set it within the CSS itself and it worked fine (though changing it's value doesn't seem to affect the output), but I'm wondering if that is supposed to be a pre-set attribute or if we're supposed to set it manually.

Update README (and new gem release?)

Thanks for Refills, it's wonderful!

I found a couple issues in the README, both having to do with an outdated gem release (and using the generator)

1. The content from this commit (d97b0e1) is still in the README but it's outdated. Now the refills site (http://refills.bourbon.io/) shows 3 columns for HTML/CSS/JS separately.

If the user follows the directions in the README, they'll get release 0.0.2 and, if they use the generator, they'll get a view that has both the HTML and the JS together, instead of separately like HEAD does now (and says below in the README). Which leads me to my next point...

1. The last gem release was 0.0.2 in May. Perhaps it's time for 0.0.3?

I expected to require the Gem and get the versions of the refills that are on the site (http://refills.bourbon.io/) when using the generator but that's not the case.

Naturally this is unavoidable unless there's a new gem release for each commit, so maybe there should be something in the README to that effect, saying you should do the following if you want the most recent copy of the refills?
gem "refills", git: "git://github.com/thoughtbot/refills.git"

Thoughts?

Undefined variable "$large-screen"

Hi,

Just trying out the bourbon/neat/bitters/refills combo and after setting a basic project injecting only the first navigation pattern, I get the following error : Undefined variable "$large-screen"

Is the docs not up to date or am I doing something wrong?

Importing rails partials - naming conventions

Rails partials cannot have hyphens, only [a-zA-Z0-9_]

navbar usage - overlapping

Hello. I'm using the navbar http://refills.bourbon.io/#er-toc-id-14
But when it collapses on smaller devices the navigation-tools div covers the following elements in my page. The same happens when the menu is expanded on mobile.

How do I avoid this from happening? shouldn't anything within the navbar div not affect surrounding (or following) elements?

Here is a screenshot
the <p> following the navbar is being covered.

tooltip's arrow is not center-aligned

refills/source/stylesheets/refills/_tooltip.scss

Line 40 in 0f592b8

@include size(0);

      @include size(0);
      @include position(absolute, 0 0 0 $tooltip-width/2);
      border: 8px solid transparent;
      border-top-color: $tooltip-background;
      content: '';
      pointer-events: none;
      bottom: -15px;

maybe following positioning is better

    @include position(absolute, 0 0 0 50%)
    margin-left: -8px

Change $base-line-height to $base-spacing

Hi,

I'm using the Pagination refill but my padding isn't functioning, looking at web dev tools the padding isn't being added because there is no 'em' unit after the numbers. See below:

padding: 0.375 0.809em;

As you can see, em is missing from the top/bottom padding. The left/right figure is called from the $gutter variable.

I am using Bourbon, Neat, Bitters and some Refills.

Thanks

More of a question than an issue

I absolutely love Refills and the whole Bourbon family, and I want to contribute a new component, but I am a bit confused how develop a new one using this stack.

I'm completely comfortable doing the SASS/HTML scaling and development, I'm just confused how to set up/view my development changes!

Any help is appreciated, thanks! :)

accordion

accordion only opens when clicking twice... is this a bug?

little mistake in the doc

just a little mistake in the doc on the second element of grid-items-lines

class="grid-item grid-item"

Image cards don't render correctly in Firefox

Looks like truncation isn't working.

Component request: Slider / carousel

I think refills users could make use of a simple slider / carousel component built for the bourbon family instead of having to resort to a 3-party solution. Currently I'm using the feature-rich Slick slider https://github.com/kenwheeler/slick along with other refills components

No HTML for typography example

Add marketing site to Beautiful Open

http://beautifulopen.com/

Mention that bitters/grid-settings are required

Firstly, thanks for this library!

Secondly, the instructions say to pick and choose what lib/scss you'd like to use, but make no mention of requiring "bitters/grid-settings". Many of the components use things like $large-screen and bomb out unless that is required.

Modal Close Button

When viewing on iOS 7.x, the close button for the modal takes a while to catch up with the scroll position.

Remove Javascript from HTML templates

I love using Suspenders (thanks Thoughtbot!) which loads all JS at the end of the application layout. Correct me if I'm wrong but this has been best practice for awhile now, not just in rails.

When importing snippets could we generate the corresponding js files just like the partials? It would be really easy to load them via the asset pipeline.

Custom error page content?

Would it make sense to add a "refill" to build custom error pages?

The default Rails error page is horrible and a good starting point for a custom page would be great, but not sure it belongs here.

How to change the hero unit's height?

Been fiddling with this for a couple of hours now and I can't find a way to change it.

Navigation - Third Level Menu

I cannot seem to get a third level sub menu to appear.

I would have assumed this to be part of the final code. Could anybody help?

I added this snippet:

.navigation .sub-menu li .sub-menu {
position: absolute;
top: 0;
left: 100%;
}

Which appears within my dev tools, but for some reason, the second sub-menu is hidden visually?

Thanks

Use double quotes for the code snippets

Write tests to insure sass compiles correctly with Bitters

It has come up that since refills relies on Bitters variables If bitters changes, it can break refills. We may want to build some tests that auto-flag issues with compatibility.

Prism is @imported but Prism files do not exist

Prism is @imported into refills/source/stylesheets/all.scss

https://github.com/thoughtbot/refills/blob/master/source/stylesheets/all.scss#L6

but Prism files do not exist, so an error is thrown.

Mention jQuery inclusion in README

I am not working within a Rails project and to get the components that have javascript to work correctly I included a link to jQuery. Explicitly stating to link to jQuery could save other developers, especially those switching from a framework such as Bootstrap future headaches.

Move image files into refills repo

Would it be a good idea to move the image files used by refills (eg. in templates and linked to by stylesheets) into the refills project itself, then have the generators copy them into the assets directory on import?

Advantages

• Easier to serve images from a CDN
• Easier to replace stock images with custom ones
• Generated code works without accessing the internet (ie. faster feature tests and more portable)

Disadvantages

• Increases the size of the gem

Would that make sense? @Magnus-G they're your files, would it be ok with you to pull them into refills?

Accordion tab sections don't display correctly if their children don't fill its width

The section with only a single word

The section with many words acts correctly

Setting a width of 100% on the section should rectify the issue.

Where is the sass for dropdown menu?

I'm talking about this file:
https://github.com/thoughtbot/refills/blob/master/source/_dropdown-menu.html.erb

Should look like this?

#5

EDIT. found it here:

https://github.com/thoughtbot/refills/blob/754a7cfc449f42c74a605b6a5cc67879654c9504/source/stylesheets/refills/_dropdown-menu.scss

It's doesn't exist in the current master.

Refills demo page crashes Safari IOS 7.1.2

Finding the evolving Refills demo page an invaluable source of inspiration. Thanks.
But today it crashes the latest iPad Safari a few seconds after having successfully loaded the page.

Side menu not working

The side menu—the one that lists all of the components—appears to be broken; it doesn’t open at all when I tap the button. Tested in Chrome, Safari and Mobile Safari.

Footer 2 Refill - $base-spacing not defined

Hi guys, first time I've worked with refills - there is a base-spacing variable in the footer 2 refill

.footer-2 {
  $footer-background: desaturate(darken($base-accent-color, 20), 30);
  $footer-color: white;
  $footer-link-color: transparentize($footer-color, .6);
  $footer-disclaimer-color: transparentize($footer-color, .6);

  background: $footer-background;
  padding: $base-spacing;
  width: 100%;

should I be defining this, or does it rely on bitters? I can't seem to find $base-spacing in _variables.scss.

I am using bitters v 0.10.0

Cheers

Mike

hero on ie 9 & navigation dropdown menu on phones

Hero is not loading on ie 9 and dropdown from nav menu will only work once before needing a refresh of the phone browser. I've tried this on android chrome as well as firefox.

Modal js doesn't seem necessary

I have used the modal a few times without the JS, and it seems to work without it.
I can't figure out what it's for..

VERTICAL TABS requires $base-body-color variable

When using the Vertical Tabs snippet, the code does not include a variable for the $base-body-color

This can be fixed by adding something like:
/ Background Color
base-background-color: EFEFEF;