Skip to content
πŸŽ† scss based starter for stylesheets, with utilities
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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 :)
You can’t perform that action at this time.