TuxedoCSS and the Rails Asset Pipeline

3.19.2017

---

A colleague of mine from school, Erica Nafziger, created an awesome CSS framework called TuxedoCSS. Knowing her skills at design, I had to try it out. It is super helpful and looks great (this site was not done with it, in case you're wondering...), so I recommend checking it out. The base color palettes and typography options are especially great, but it also incorporates an intuitive grid system (with the option to use flexbox), a great side nav, and a template for a hero section (among many other things).

Naturally, when trying it out, I wanted to do so in the context of a Rails app. But it turns out that I needed to learn a bit more about the Rails Asset Pipeline in order to do.

There are two options to get TuxedoCSS. One is to download the minified CSS files (there is also some JS, but I'll just be focusing on the stylesheets), and the other is to download the full SASS files. As someone who gravitates towards doing less custom styling over more, I started out with just the minified file. But I soon found myself want to customize things a bit more, something Tuxedo makes super easy through well commented and organized SASS files.

I copied the SASS files into my stylesheets folder, but quickly ran into a problem - my global SASS variables weren't loading! Why not? Well, shockingly, "Cascading Style Sheets" is not just a fancy name. The pipeline had concatenated code blocks including variables before they were defined.

So okay, I thought, I'll just import the _globals.scss file into my application.scss and load that first. But that doesn't actually work, because of the line:

*= require_tree

I had always taken this for granted, but this is the line that actually does the concatenation for you. As this was sitting above my globals import, the program was trying to load everything in no special order and breaking. So, I took that and require_self out, and instead imported each scss file into application.scss individually like so.

@import "reset";

@import "global";

@import "mediaQueries";

@import "fonts";

@import "grid";

@import "hero";

@import "nav";

@import "sidebar";

@import "buttons";

@import "forms";

@import "footer";

@import "helpers";

@import "animations";

Which was actually already written in a styles.scss file included in the download of Tuxedo, I just hadn't realized that! Once I did that, everything worked great. And when adding any other stylesheets, all you have to do is import them at the bottom of the list.

Once I figured out what to do, it was really quite easy to implement. I hope other Rails developers (and developers in general!) will read this and give TuxedoCSS a shot. I am thinking I will turn it into a gem someday, but perhaps someone will beat me to it (let me know if you do!).