While we at Redfin don't really yet have a full on base theme for every project, one thing we do use is our "bundler shell." This forms the basis of any Drupal 7 or 8 theme we build, and in fact, is really just the framework for the front-end (that is, this shell is useful outside of the realm of Drupal, actually).
First things first - here's the code.
Let's go ahead and begin the dissection...
The Gemfile
The Gemfile comes from Bundler, which is an amazing dependency management tool for front-end stuff, namely Ruby Gems. Here, we mention the repository we need, and which gems to get. You can then run bundle install in order to install the requisite version of gems specified in the Gemfile.lock. (If you're at all familiar with Composer, this should sound familiar, because Bundler was a huge inspiration for Composer.) Then, we can start our normal compass commands by adding bundle exec in front of them, and it will ensure you've installed everything correctly before it starts to watch the sass folder, and compile to the css folder.
bundle exec compass watch
The 'sass' folder
Our Sass folder structure leans on a single but simple style.scss, which includes a number of things.
Up top, we include any compass imports, followed by any external vendor imports, namely Formalize and Susy. Combining Susy with Breakpoint we can rapidly build responsive layouts that just make sense.
We use Chris Eppstein's sass globbing plugin to import an entire folder of partials with one line.
@import "folder/*";
In this way, we then allow the project to grow folders out organically. Typically we end up with folders like:
- nodes
- views
- paragraphs
- misc (or "components")
- regions
Even as I write this, we're discussing how to better standardize this list.
Configuration
The last thing to check out is the config.rb file. This is a standard sass/compass file that you need, but I do want to call particular attention to the last line, where we mention sourcemap=true.
This little bit of magic gives your Chrome Inspector (or other Dev Tool of choice) the ability to identify which line of the sass partial--not the compiled css--the styles are coming from, so you know right where to go to change them.
Leveling Up
The last piece of our front-end stack is Browsersync, which we'll cover in a future post!