---
title: Introducing Empties – Unstyled Components
teaser: Announcing the latest addition to the Bourbon suite! Meet Refills less fashionable
  sibling, [Empties](http://empties.bourbon.io/ "Empties"), a new library of components
  that are completely – or for the most part – unstyled.
tags: sass,design,html
author:
- Magnus Gyllenswärd
- Brenda Storer
published_on: 2016-05-02
---

Announcing the latest addition to the Bourbon suite! Meet Refills' less
fashionable sibling, [Empties](http://empties.bourbon.io/ "Empties"), a new
library of components that are completely – or for the most part – unstyled.

## The Weight of Refills

A few years ago we came up with the idea for the [Refills Components
Library](http://refills.bourbon.io/ "Refills") to avoid having to "reinvent the
wheel" over and over again with some basic layout components and patterns.

Creating new and innovative layout ideas is great for certain projects, but
sometimes you just need a standard navigation menu, or an accordion, or a
dropdown of some sort; these are classic and ubiquitous patterns. With Refills
we made it possible to quickly copy-paste HTML, SCSS, and JavaScript into new or
existing projects. We shared chunks of code small enough to be able to grasp and
learn from, but ready to tweak and adjust to make your own.

In contrast with some frameworks that make you download a large amount of code –
that should be tucked away deep in a special folder and never altered – we
wanted Refills to be simple, small, and customizable to avoid blocks and
technical debt.

And it worked fine. But it wasn't perfect. Soon we ran into some issues.

### Mid-project Issues

For example, quite often you find yourself in the middle of a project when you
need a component, and at that point it's important that whatever you introduce
shouldn't carry too much of its own style. When using Refills we sometimes found
ourselves in situations where we had to do an unnecessary "cleaning up" of
variables, colors, spacings, and borders before being able to fully incorporate
a component.

### Connection issues to Bourbon family

Another issue was the interfacing between other Bourbon family members and
Refills. At first, we required an installation of Bitters for using Refills, but
then we realized that this might not be ideal for every user. Some existing
projects have other scaffolding and variable files than Bitters and they would
have a lot of unrecognized variables to deal with. We ended up somewhere in
between where Bitters was not required, but if you wanted to use it you could do
so by tying into the relevant variable names. We decided to use variables that
were to be overwritten *if* Bitters was introduced. That worked in theory, but
wasn't optimal because a lot of overwritten variables would then stay in the
SCSS files and add unneeded clutter.

### Issues with Letting the Style Remain the Same

A third problem with Refills is the risk of just "letting them be" and not
integrating them in the rest of the styling for a project. This might happen due
to lack of time or design experience, but the result is often a scattered and
uneven feeling in the layout.

## The Solution?

We created [Empties](http://empties.bourbon.io/ "Empties"), which is a component
library with a focus on the function rather than the form. It is basically the
same as Refills but without the styling. SCSS is kept to a minimum and we try to
focus on the way the components work, rather than the way they look. Add your
own styles, or use variables from your own project to these pre-built
components. Number of code lines are optimized to make each component as easy as
possible to work with. We believe this approach should be the cleanest and
fastest way of getting nice and DRY code. Also: If you do use Bitters in your
project we have set Empties up so it picks up the styles from there.

Empties is completely free and open source so try it out and [let us know what
you think](https://github.com/thoughtbot/empties/issues/ "Empties issues")!

### Very Brief Tutorial

- Install the dependencies:
  [Bourbon](https://github.com/thoughtbot/bourbon#installation),
  [Neat](https://github.com/thoughtbot/neat#installation) and
  [jQuery](http://jquery.com/download)
- Go to the [Empties website](http://empties.bourbon.io), click “Show Code”
  under the component that you want and copy-paste it into your project.
- Customize and add your own styles to the component.