We now come to the fourth and final member of the Bourbon Family - Refills.
What it is
Unlike its family members, Refills is not a SASS library, but simply a website containing a gallery of components you can build using Bourbon, Neat and Bitters. These components include headers, footers, splash pages and tabbed navigation, and all of them are mobile friendly. Essentially, Refills contains most of the features featured in Bootstrap but left out of Bitters.
How to Use It
Each component on the Refills page has a “Show Code” link. Click it, and it will reveal the HTML, CSS, and (occasionally) Javascript needed to implement it.
As you might imagine, these examples all require that your project be using Bourbon, Neat and Bitters (including Bitters’ grid_settings.scss file). With all that in place, you should be able to simply drop the code in your site and let ‘er rip.
That being said, let’s go through an example anyway. The demo project has a branch called “refills”, with all libraries configured for use. Checkout the branch using git checkout refills, and you’ll be ready to go.
We are going to implement the “icon bullet points” component from the Refills site. It looks like this:
Open source/index.html.erb, and paste in the following HTML:
ass="bullets">
<li class="bullet three-col-bullet">
<div class="bullet-icon bullet-icon-1">
<img
src="https://raw.githubusercontent.com/thoughtbot/refills/master/
source/images/placeholder_logo_2.png
" alt="">
</div>
<div class="bullet-content">
<h2>This Bullet Title</h2>
<p>Lorem dolor sit amet consectetur adipisicing elit. Doloremque,
minus, blanditiis, voluptatibus nulla quia ipsam sequi quos
iusto aliquam iste magnam accusamus molestias quo illum
impedit. Odit officia autem.</p>
</div>
</li>
<li class="bullet three-col-bullet">
<div class="bullet-icon bullet-icon-2">
<img src="https://raw.githubusercontent.com/thoughtbot/refills/master/
source/images/placeholder_logo_3.png" alt="">
</div>
<div class="bullet-content">
<h2>Another Bullet Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque,
minus, blanditiis, voluptatibus nulla quia ipsam sequi quos iusto
aliquam iste magnam accusamus molestias quo illum.</p>
</div>
</li>
<li class="bullet three-col-bullet">
<div class="bullet-icon bullet-icon-3">
<img src="https://raw.githubusercontent.com/thoughtbot/refills/master/
source/images/placeholder_logo_4.png" alt="">
</div>
<div class="bullet-content">
<h2>Last Bullet Title</h2>
<p>Lorem ipsum sit amet consectetur adipisicing elit. Doloremque,
minus, blanditiis, voluptatibus nulla quia ipsam sequi quos
iusto aliquam iste magnam accusamus molestias quo illum impedit.
Odit officia autem.</p>
</div>
</li>
</ul>You’ll notice that this is exactly the same HTML that the Refills site gives us for this component. We haven’t changed a thing.
Next, open source/stylesheets/demo.css.scss and paste in the component’s CSS:
.bullets {
$icon-bullet-size: 3.5em;
overflow: auto;
margin-bottom: $base-line-height;
// change ".three-col-bullet" class to this for two bullet layout
.two-col-bullet {
@include media($large-screen) {
@include span-columns(6);
@include omega(2n);
}
}
.three-col-bullet {
@include media($large-screen) {
@include span-columns(4);
@include omega(3n);
}
}
// change ".three-col-bullet" class to this for four bullet layout
.four-col-bullet {
@include media($large-screen) {
@include span-columns(3);
@include omega(4n);
}
}
.bullet-icon {
float: left;
background: $base-accent-color;
padding: $icon-bullet-size /4;
border-radius: 50%;
width: $icon-bullet-size;
height: $icon-bullet-size;
}
.bullet-icon-1 {
background: $base-accent-color;
}
.bullet-icon-2 {
background: adjust-hue($base-accent-color, -50);
}
.bullet-icon-3 {
background: adjust-hue($base-accent-color, -140);
}
.bullet-content {
margin-left: $icon-bullet-size *1.4;
margin-bottom: 2em;
}
h2 {
font-size: $icon-bullet-size /2.5;
padding-top: $icon-bullet-size /7;
margin-bottom: $icon-bullet-size /6;
border-bottom: 1px solid transparentize($base-font-color, .8);
display: inline-block;
}
}Again, this CSS is the same as it is on the Refills page. Now start up your demo site, and take a look at what gets rendered:
Pretty spiffy eh?
What I Like
Refills is the perfect complement to Bitters. It provides all the fancy features that Bitters purposefully omitted, but can also serve as a learning tool. Each of Refills’ components exists as a self contained code snippet, and none of them are terribly long or complex. It is possible to study any one of them on their own, in isolation, and figure out how it works. I feel like Refills helps take some of the fear out of web design, and gives you a better handle on what your own website is doing.
Refills’ components are also different than Bootstrap’s in one key aspect. Bootstrap will generate its own HTML to render some of its more advanced components. This can be both confusing and difficult to debug. With Refills, what you see is what you get. A few of them will use Javascript to add or remove CSS classes (for showing/hiding elements), but that’s it.
The Verdict
Refills does a fine job of rounding out the Bourbon family. Not only can it make your site look beautiful, but it also shows you the true power of its family members when they’re used together.