I wanted a Sass framework built my way, so I wrote one.

Rainier is a lightweight Sass framework for building the responsive web. It’s modular and comes with basic features (grid, typography, buttons, etc.) but is built to be extended and modified. It has typography based on relative units and it isn’t bloated with clunky JavaScript components you’ll never use.

The History

It’s April 9th, 2016 and I’ve been building websites for almost two years. When I was first learning HTML and CSS, Bootstrap was a tool I relied on heavily. I was amazed at how quickly it allowed me to scaffold pages with its responsive grid system and components. All I needed to do was add a few classes and boom – instantly structure and organization were brought to my website.

Despite Bootstrap’s usefulness, as I worked and learned I began to tire of seeing the same ubiquitous style. The framework is widely used because of its versatility and a result you can find it almost everywhere if you’re quick to recognize it. Indeed, ‘Bootstrap style’ is nearly a pejorative term given the ubiquity of sites sporting the same bland, grey components.

In July of 2015 I canned my original Bootstrap-based website in favor of a new design. To expedite the build process I opted to use a Sass framework called Skel. Skel was built on Sass, an amazing CSS preprocessor that adds useful features like variables and imports to allow you to write DRY, modular styles. Skel also came with built-in typography and styling for basic elements like buttons and links. The grid system was simple and helped me easily build a new responsive site.

Although I had a positive experience using Skel last summer, there were also aspects of it that I didn’t care for. I found the Sass source to be overly complex for the tasks it was accomplishing, sometimes sacrificing readability for efficiency in the form of complex functions and mixin usage. I also wasn’t a huge fan of how closely Skel integrates its styles and JavaScript. Some modules of Skel promote specifying layout settings like container width and grid gutters in the JavaScript itself, which I found odd. I don’t mean to nitpick or be hypercritical – I think Skel is an amazing and useful piece of software – it’s just that in using it I occasionally noticed design choices and thought, “hmm, if I were building a tool like this I would do that differently.”

So I did.

The Plan

I wanted to build a lightweight tool to jump-start template and website building. In contrast to the monolithic Bootstrap I was looking for something to serve as a jumping off point, an easily-extendable framework that I could modify as needed for each project. Sass was a must-have – the ability to abstract colors and sizing into a theme file would make it easy to modify the look and feel of the framework every time I used it. I also wanted the typography and media queries to be based on relative units (ems and rems). I’ve found that relative type provides several benefits over pixels, particularly the ability to adapt flexibly when the user zooms the page.

A helpful framework would need to have a responsive grid and built-in styling for common components like buttons, images, typography, forms, and tables. Ideally the use of JavaScript would be limited, only sprinkled as necessary to enable core components.

Rainier

And that brings us to Rainier. I released version 1.0 under the MIT license in March of 2016. The demo page showcases Rainier’s styles and the GitHub repo has all the nitty gritty details.

I’m caught up in another fun side project at the moment, but when that wraps up shortly I’m planning to churn out some templates with this new thing I’ve built. Of course there’s lots of room for improvement, but I’ve enjoyed all the time I’ve spent on Rainier so far and learned a ton in the process. Enjoy!

April 9, 2016