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.
- 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
- Install Sass and Compass
sudo gem install sass
sudo gem install compass
- 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
- Create a Compass project and using the configuration file attached
compass create 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
- 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|
- 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
# 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.)