Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Scales is a Mobile First, Responsive, Sass-based, OOCSS framework
Branch: master
Pull request Compare This branch is 21 commits behind ScalesCSS:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.


Scales is a Mobile-First, Responsive, Sass-based, OOCSS framework.

It is purposely "design-free" so that there is nothing you will have to change. Instead, you will build your design on top of the foundation that Scales provides.

This is a framework for serious developers and designers who aren't afraid to get their hands dirty with advanced and sometimes challenging CSS concepts.

Scales is a highly scalable CSS architecture, it contains design patterns (scales in nature form patterns), and it is responsive so it scales to the width of the viewport. So clever it hurts.

Deal With It

Techniques used in Scales

  • Mobile-First and Responsive Design
  • SASS and Compass
  • Object Oriented CSS Design Patterns
  • Vertical Rhythm and Modular Scale
  • BEM (Block, Element, Modifier)-style naming convention

Browser Support

Scales uses box-sizing: border-box;, and display: table-cell;, neither of which are supported in IE7 and under. Thus, Scales is only for IE8+ and any modern browser.



Make sure you have the dependencies installed on your system and then either clone Scales or download and unpack the latest version and put it into the root directory of your project.

On the command line, you simply need to cd into your project directory and run:

$ compass watch

Whenever you save an .scss file, Compass will compile to css/style.css. You can change this location in the config.rb file. You can also change the output style and many other options.

By default, the output is set to :compact, but for production use, you should change it to :compressed. Scales has a lot of comments that you are going to want removed for performance reasons.

Getting Started

This documentation is meant to point you to the files that are most important to understand when you are getting started. The real documentation is in the Scales .scss files themselves. Spend some time browsing around the files so you know everything Scales is capable of. Start with scales/scales.scss, style.scss, and _vars.scss.


Once you have everything set up, you should start by looking at scales/scales.scss. This is where all of the base styles, design patterns, and utilities get imported. You can comment out individual design patterns that you don't intend to use and they wont be included in the outputted CSS. You can also add new design patterns that you might come up with. Other than that, you should leave this file alone so nothing breaks!


Next, take a look at style.scss. This is the file that imports everything before Compass compiles to css/style.css. At the bottom of the file is where you should import any new .scss files that you create.

I recommend creating a directory in your project called "partials". Everything in Scales is broken into separate .scss files, so if you want to add your own styles for forms, for example, simply create a new partial in your partials directory and then import it in style.scss.


The next place you should look is _vars.scss. This is where you can change many default values without having to touch anything in the scales/ directory.


This couldn't have been done without the amazing work of Harry Roberts on Inuit.css. A number of the design patterns and techniques in Scales were borrowed from Inuit.css.

I also wanted to thank Nicole Sullivan for her work on OOCSS, without which I would not be the developer I am today.

A special note of thanks also goes out to Vince Speelman, who pushes me constantly to be a better developer and shames me when I try to take the easy route.



Something went wrong with that request. Please try again.