Starting a new Bootstrap Subtheme for Drupal 7 and Sass
Everybody knows what Bootstrap is, there is a module for Drupal that includes all the goodies of Bootstrap into Drupal, however, every experimented Drupal themer knows that we can not use a contrib theme directly if we need customization, we need to create a new subtheme.
This guide is to explain how to create a bootstrap subtheme using SASS.
The first step is download the Drupal Bootstrap module, decompress it and place it in your theme folder (site/all/theme is the usual).
https://www.drupal.org/project/bootstrap/
Inside of the bootstrap theme there is a stater kit folder, one for CDN usage, other for less and the last one for SASS, copy the sass folder and place it into the theme folder, at the same level where the bootstrap theme is.
If you run a ls in the DRUPAL_ROOT you must see something like this.
$ ls sites/all/themes/
adminimal_theme bootstrap sass
Rename the sass folder to your theme name, the name that you want following the drupal naming conventions, for the sample I’ll call it mysubtheme.
$ ls sites/all/themes/
adminimal_theme bootstrap mysubtheme
Enter to the folder, mysubtheme, and find the file named sass.starterkit. Rename this file to your theme name and with the extension .info, for the sample will be mysubtheme.info.
Once you have it renamed, edit this file, set the name equals to your theme name and set a description for it.
The next step is to download, inside of your subtheme folder, the bootstrap framework for sass, download it and decompress it:
https://github.com/twbs/bootstrap-sass
The last step is configure sass, in 42mate we use compass to compile our sass files, to use it install compass in your machine first.
Once is installed, create a new file in the sub theme folder called config.rb and set this content into it:
relative_assets = true
css_dir = "css"
sass_dir = "scss"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :nested
environment = :development
Use :expanded instead of :nested to respect Drupal’s coding standards (nested is more readable when working).
Use :production instead of :development to compile for release.
With the file created, now you can run compass init, This command creates the sass folder and any other folders you may need.
$compass init
A new folder must be created if all is well configured, the css folder will contain the compiled css.
At this point, if you run an ls command inside of your subtheme folder you’ll see
$ ls
bootstrap config.rb css favicon.ico logo.png mysubthem.info README.md screenshot.png scss template.php templates
The last step is to go, as admin with the UI, to Appearance, look for your sub theme (mysubtheme in this case) and enabled it an set it as default.
If all went good, you have to see your site with a Bootstrap like appearance and you re ready to hack your theme.
Some Links that might help you to know more:
https://www.drupal.org/docs/7/theming/creating-a-sub-theme
