Announcing the latest addition to the Bourbon suite! Meet Refills’ less fashionable sibling, 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 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, 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!
Very Brief Tutorial
- Install the dependencies: Bourbon, Neat and jQuery
- Go to the Empties website, 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.