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
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this 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.