Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


barebones is the starting point for stylesheets.


Using this project is fairly straight forward.

Just drop the contents of the scss folder into your stylesheet folder and run either yarn add browser-reset or npm install -save browser-reset to also add my browser-reset project

What this is

This project is a great starting point for writing clean, functional stylesheets using scss.


This project includes flexboxgrid as a grid system. Browser support

Color Palettes

I'm really good at creating a messy array of color variables. This palette system exists to "fix" that. Instead of using $grey, $grey-light, $grey-lighter, $grey-lightest you can break it down into categories. Your colors file will look a little like this

$palettes: (
  grey: (
    base: #808080,
    light: #959595,
    lighter: #b5b5b5,
    lightest: #d5d5d5

And when you need to color something, you can just do this color: palette(grey, light)

REM and EM

There's REM and EM pixel conversions. font-size: em(16px) becomes 1em

Font Family

Googling how to include a font package gets a bit irritating. Instead you can use the following syntax @include font-face('Font Name', '/path/to/font', 400, normal); and it will generate the font-face from eot, eot?#iefix, woff and `ttf. I use FontPrep to convert font files for this.


Modern web means supporting screen sizes of all sorts. I like to build mobile first, so that's the way my breakpoints work.

.class {
  width: 100px;

  @include breakpoint(md) {
    width: 500px;

  @include breakpoint(lg) {
    width: 1000px;

You can find the variables for these in the scss/_variables file

The rest

I've done a fairly job of writing a lot of comments in the scss/_utilities file, so a quick read through will give a good overview of everything included

Wishlist (and issues)

Any features you'd like to see? Any features don't work for you? Let me know with the issue tracker.


I recommend that you use this scss-lint config to keep you code clean and tidy.

Made by Benjamin Hollway :)