At INsReady Inc., we have been practising the theming workflow below for more than a year. Therefore, it's good to write down the documentation for sharing and future training purposes.

Background information: for Drupal theming, we do the development work on a dev server (see Building Nginx (Microcaching) + MariaDB/MySQL + PHP-FPM + Debian 6 + APC + Memcache + Drupal 7 server), instead of theming on a local laptop. In other words, we only edit the CSS/Sass files locally, and upload them to a remote server for previewing. I know many people have their own different workflows. But, having a central dev server for theming is great for us; because once you use a base theme like Zen, MOST of Drupal theming work is probably within two files: custom CSS/SASS file and custom jQuery file. So, theming on one server is easier for development, collaboration among themers (other people can test on many screens as well as many browsers) and collaboration with clients (they can see the staged changes right away). If you are wondering how this method could connect with the rest of Dev/Staging/Production infrastructure (and even with mobile development), then please find me at a Drupal meetup or Drupal Happy Hour event.

Anyway, some people will have the method of Drupal theming similar to us, therefore, I hope the documentation below is useful.

1. You should already know Sass and Compass, or at least you are going to try it out, following this blog. So, let's simply install them. First, install Ruby:

   sudo aptitude install ruby-full rubygems1.8

2. Install Sass and Compass

   sudo gem install sass
   sudo gem install compass

3. Install two new gems – the Net::SSH and Net::SFTP gems for pushing changes to the remote server

   sudo gem install net-ssh
   sudo gem install net-sftp

4. Create a Compass project and using the configuration file attached

   compass create test
   cd test
   rm config.rb sass/* stylesheets -r # Remove the standard files. Your sub-theme will contain all other files you need.
   # Download our config.rb file (which will have the ability to push changes to the remote server) to the folder

5. Edit the downloaded config.rb file, fill the section below with your server login information

   # SFTP Connection Details - Does not support alternate ports os SSHKeys, but could with mods
   remote_theme_dir_absolute = '/srv/www/insready.com/public_html/sites/all/themes/sub-theme/css' # Put your Drupal sub theme CSS folder path here
   sftp_host = 'example.com' # Can be an IP
   sftp_user = 'username' # SFTP Username

   Please notice that we don't have sftp_pass => 'password' in this file; It is because we use SSH Key authentication. If you need to use password authentication, you can add

   sftp_pass => 'password' # SFTP Password

   then change the next line to

   Net::SFTP.start( sftp_host, sftp_user, :password => sftp_pass ) do |sftp|

6. All you have to manage locally on your laptop is the configuration file config.rb and a custom Sass file such as custom.scss. Any change you make to the custom.scss will be compiled first as custom.css, then automatically upload to your remote site's sub-theme folder. Now, start working

   Compass watch
   # Save the change .... then refresh your browser to see the effect

*Please notice that the configuration ONLY push the change after the compilation, which means the custom.css file, to the remote server. Therefore, you need once a while to upload the original custom.scss file to your remote sub theme folder and you should do so everyday after you done working just like committing the code to a repository. (If anyone has an idea to automate this part of the process, please share with us.)

Files: config.rbTag: Drupal Planet