kick out the jams, motherfuckers

Well, I finally broke down and integrated Twitter Bootstrap with the existing UI of my blog. To be fair, it DEFINITELY needed some work, and I just didn't have the time to get into the existing Sass SCSS framework and figure everything out. But as Bootstrap turned 2.0, I found myself longing for a responsive UI (so I wouldn't have to "deal with" mobile), a standard reset, great typography defaults, and nice buttons/form elements to play with should I need them. The answer was simple. I needed Bootstrap.

Bootstrap is written in the LESS framework, which kinda sucks because I prefer SCSS since I work with Rails apps all day. Thankfully, someone made a gem that ports the Bootstrap framework over to Sass for easy modification. Now, if I want to modify the very variables and mixins that power the framework, I can do so. That's really cool.

Another sort-of invisible addition that I made that actually makes all this possible is I am now compiling all assets on the server side automatically using Sprockets, better known as "the asset pipeline" in Rails. It has all the same benefits as the asset pipeline...and all of its shortcomings as well (and then some!). My has gone through a heavy transformation based on this gist I found for loading Sprockets and Bootstrap onto a non-Rails application. Because I'm using Sprockets to dynamically load stylesheet, JavaScript and image assets, I can develop without recompiling the stylesheets every time. My JavaScript files are minified and compressed before going into production for optimal performance. All of this is happening with the power of Ruby and Rack. Since this static site is being served as a small Rack application, I can take advantage of the stack for logging purposes, compiling static assets, and possibly other things coming soon down the pipeline...

Here's a more detailed version of what was changed...

Bootstrap in Sass provides a number of advantages over the previous buggy UI. A global, standard reset is in place as well as new typographic changes and spacing. We're also taking advantage of Bootstrap-2.0's "responsive" grid, and the site looks great in both desktop and mobile browsers of practically any size.

I've also completely refactored the aging CSS framework into one based more on elements rather than roles. It is not complete yet. There's an additional file called "support" which is responsible for holding all mixins and variables.

We are also now loading Bootstrap through Sprockets, thanks to a I ripped off of


Gotta give some shoutouts @mdo and @fat for building such an awesome CSS framework, Thomas McDonald for porting it to Sass, and @sstephenson for the amazingly useful Sprockets framework. Much love.

Posted on .