How to subtheme Bootstrap using SASS starterkit and compass.

The boostrap theme we download from drupal.org (https://www.drupal.org/project/bootstrap) has starterkit folder to help us subtheme it. There are three folders which are SASS, LESS and CDN.

We will copy the sass folder and paste in our themes folder. We will rename it as testsubtheme for now. Now rename sass.starterkit file inside the folder to your subtheme name which is testsubtheme.info here.

Next we have to download the latest bootstrap source form – https://github.com/twbs/bootstrap-sass and paste it inside our subtheme folder. Make sure the folder name is bootstrap.

Next we have to compile the sass to get all the styles. We use compass to compile the sass. First we have to create the compass project.

In the command line, change directory to one step above our subtheme folder and write the below command.


compass create testsubtheme

This will create the necessary config files for compass. Create an empty css folder inside our subtheme. Next edit the config.rb file and change the default values in css_dir to “css” and sass_dir to “scss” which is what we have in our bootstrap subtheme.

Now run compass watch to compile the css inside the subtheme.


compass watch

 

Now enable the subtheme from Appearance page. Done.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s