Last updated 15 August 2014. Created on 4 January 2014.
Edited by katyrose, pirog. Log in to edit this page.

Please see the new documentation for Kalatheme 3.0 on Github:
Documentation below may be out of date for Kalatheme 3.0 install. Proceed at your own risk.

Most hardcore developers prefer using a CSS preprocessor over a GUI based tool. For those people we have the SASS Kalatheme project on github. You can check out the installation documentation over there.

Here is some more info about this project

Sass Kalatheme

This is a Kalatheme subtheme template that integrates with Sass, Compass, and Bootstrap Sass. It is meant to serve as an example for starting a new subtheme to create a custom design. So you can download it and change the name, then get to work! The Sass starter files are based on our Sass/Compass jumpstart project, Sassamuna.

Note On Bootstrap Versions

Currently, Sass Kalatheme is set up for Bootstrap 3. If you're using Bootstrap 2, you can download the release for 2.3.2.


Set Up

To get started, follow these steps:

  • Download Sass Kalatheme to your sites/all/themes directory.
  • Rename its directory, .info file, etc. to your custom theme's name.
  • Download Bootstrap 3 to sites/all/libraries/[new-theme]_bootstrap (e.g. if your theme is called mytheme, you'd want a libraries folder called mytheme_bootstrap).
  • If you have Bundler, run $ bundle in sites/all/themes/[new-theme] to install Bootstrap-Sass.
  • If you don't, download Bootstrap-Sass to sites/all/themes/[new-theme]/vendor, naming its directory "bootstrap-sass".
  • In your new theme's bootstrap directory, customize the variables and imports as you want. See its README for more details.
  • Open bootstrap/config.rb and change "kalathemebootstrap" in the cssdir and javascriptsdir settings to [new-theme]bootstrap.
  • Run "compass compile" to overwrite the css in sites/all/libraries/[new-theme]_bootstrap/css with your customized Bootstrap styles.
  • Do your custom Sass styling work in the theme's scss folder.
  • Run "compass compile" in the theme's root directory to generate your custom css.

Looking for support? Visit the forums, or join #drupal-support in IRC.