Getting Started

Barebones is a boilerplate to help you build your own UI framework. It is not a fully-fledged library, but a set of tools common to all projects; a grid system, helper classes and a range of reusable mixins, put together in a convenient package to kickstart your next project.

Only the bare essentials are included – so you can spend less time overwriting and more time creating.

Why does the world need Barebones?

It probably doesn't, but here goes; we wanted to create a lightweight SASS library that we could share between projects – powerful enough to allow us to focus on design, and lightweight enough to stay out of our way.

Over time, we've learned a lot about how to structure our SASS projects in a cohesive, scalable and maintainable way. We thought other people might find this knowledge useful so decided to release this as a package in the public domain.

Existing UI frameworks such as Bootstrap and Foundation are great for prototyping, but typically lack flexibility. Building your own framework puts you in the driving seat, giving you full control over how your app or website looks, without being shoe-horned into someone else's design system.

Installing Barebones

If you're new to SASS, you'll first need to make sure you're able to compile SASS files.

Barebones relies heavily on SASS maps, so will only work with SASS v3.3 and above.

1. Install the package

Barebones is available as a Bower package. If you want to skip this and copy the SASS files directly, you can do that too – simply download the latest release from GitHub and integrate the source files directly.

bower install barebones-sass --save

2. Create a settings file

Barebones code allows you to specify your own individual project settings – just grab the example file and change the values to fit your needs.

3. Create your main SASS file

Import your newly created settings file, followed by _barebones.sass into your main SASS file. When you're done, it should look like this:

|-- css/
|--| main.sass
|--| _settings
|-- bower-components/
|--| barebones-sass/
|--|--| dist/
|--|--|--| _base
// Always import the settings file first
@import _settings

// Import Barebones – the path will depend on your setup.
@import bower-components/barebones-sass/dist/_base

// Your stuff can come here.


Barebones relies heavily on SASS maps to work, so you'll need to make sure you're using SASS 3.3 or higher. Additionally, vendor prefixing mixins are not used or included as you can use the autoprefixer plugin to do this.

Background Reading & Acknowledgements

Barebones was heavily inspired by other people's brains. Here are some of them in case you're interested in doing some more reading. Inspiration and motivationGemma is evolutionary, not revolutionary. Its philosophical and stylistic leanings have been heavily influenced by the following people and projects: