Skip to content
The Goldilocks Approach is "a good starting point for responsive web design that takes device resolution out of the equation" for CSS. This is a port to SASS. (
CSS Ruby
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


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

The Goldilocks Approach in Sass

I really like The Goldilocks Approach for making responsive designs in CSS. I also really like SASS. As such, this project is a straight port from CSS to both SASS and SCSS. I've packaged the whole thing as a basic Compass project.


I'm assuming if you're using this, you have SASS and Compass and all that installed on your computer. If so, you can just clone the repo and get started.


The Goldilocks approach makes use of a couple of things available in Bourbon Sass but not in the base SASS mix.

In the file _bear_defaults.scss, I've included some commented lines that can replace the longer contexts. With Bourbon installed, the file looks like:

$baby_bear_max_width: 30em;
$mummy_bear_max_width: 30em;
$daddy_bear_max_width: 60em;

$leading: golden-ratio(1em, 1);
$body_font_family: $georgia;

@mixin cf {
	@include clearfix;

But, obviously only use that if you've already installed Bourbon.

You can’t perform that action at this time.