Currently script working only for
7.x-3.0
! There is an issue for this bug. If you want to support project please fill free to make fork and then pull-request.
Drupal Bootstrap SASS
Using SASS in Drupal Bootstrap theme. Based on blog Using SASS in Bootstrap Drupal theme. Without last section Imagemin.
Purpose of this script is to repeat all step in above blog to create drupal theme based on bootstrap theme with all changes necessary to work with SASS/Compass and Grunt.
Tested on Ubuntu 14.04.
Requirements
Before you start make sure you have necessary tools.
$ sudo apt-get install -y build-essential wget ruby ruby-dev nodejs npm
Also you should have awk
and sed
alredy installed. Check with
$ type awk sed
Install Grunt globally
$ sudo npm install -g grunt-cli
Install Compass
$ sudo gem install --no-ri --no-rdoc compass
Installation
- Prepare your Drupal page as always if you didn't done this already
- Download and unpack Bootstrap theme (
drush dl -y bootstrap
)- Current script working only with version 3.0 so use
drush dl -y bootstrap-7.x-3.0
- Current script working only with version 3.0 so use
- Clone this repo inside your main
themes/
directory (<drupaldir>/sites/all/themes
)$ cd <drupaldir>/sites/all/themes
$ git clone https://github.com/sobi3ch/drupal-bootstrap-sass.git
cd
to it ($ cd drupal-bootstrap-sass
)- Make sure scripts are executable:
$ chmod +x build-boostrap-sass.sh get-tag.awk
- Run
./build-boostrap-sass.sh
- Pass your human readable sub-theme name (
YOUR-CUSTOM-SUB-THEME
) - Wait until build finish..
- Then
cd ../YOUR-CUSTOM-SUB-THEME
and runnpm install
(if you have errors like EACCESS then try run command with root privilegessudo npm install
), this will install grunt dependencies. - Finally enable your custom sub-theme eather via UI or drush (
drush en -y YOUR-CUSTOM-SUB-THEME
drush vset theme_default YOUR-CUSTOM-SUB-THEME
- Congratulations!
Usage
- Inside your theme run
$ grunt
. This will start watching your Sass files. - Start editing
sites/all/themes/<YOUR-CUSTOM-SUB-THEME>/assets/sass/style.scss
. Put your custom sass on the end of the file. Each time you safestyle.scss
, all styles will be rebuilded automatically. Reload your page, and check your changes.
Rest of grunt tasks can be seen via $ grunt -h
. Check blog for more details.
Comments/suggestions welcome.