assets

#Theme Assets ##less/css BootstrapBlocks makes use of less, and includes a Grunt script that compiles everything into one minified css file: style.min.css. All css/less files are located in assets/css/:

• /bootstrap/ - This directory contains all of the Bootstrap less files.
• /fonts/ - Place all font files in this directory. By default, contains Ico Moon files.
• /app.less - This contains all the custom styles for your app. You'll write most of your theme less into this file. At the top, you'll find a number of @imports, which allow you to use Bootstrap mixins and utilities within your less.
• /drupal.less - Adds some default styling for Drupal elements (like forms, autocompletes, lists, etc).
• /icons.css - Icon classes from Ico Moon. See the section on custom icons for more information.
• /style.min.css - This is the file that everything compiles too.

##Javascript All Javascript in BootstrapBlocks is located in assets/js/ and organized as follows:

• /plugins/ - All jQuery plugins should be placed in this folder. They will get picked up by Grunt and compiled into scripts.min.js
• /plugins/bootstrap/ - Bootstrap javascript files are located in this folder.
• /vendor/ - Includes non-plugin vendor javscript files, such as Modernizr.
• /main.js - Put all of your custom theme js in here. By default, this includes an iOS orientation fix, but that's it.
• /scripts.min.js - All javascript (excepting the js in the /vendor/ direcotry) is compiled/minified into this file.

##Images Images related to your theme should be placed in the /assets/img/ directory. The image folder contains an /hd/ directory for larger versions of your image files that can be loaded conditionally (media queries) for hi-res devices. All icon image files should be placed in the /icons/ directory.

##Grunt BootstrapBlocks ships with Grunt, which allows theme developers to easily use less/js in their themes without having to worry about how everything compiles and minifies. Gruntfile.js and grunt.js files are provided, but you'll need to have to do a few things initialy to set up Grunt within your project.

• Install Grunt Globally - If Grunt is not installed on your machine, install it.
  • Make sure nodejs/npm is installed.
  • Run npm install -g grunt-cli. This will install grunt globally.
• Install Grunt in Your Theme - cd to the theme root and run npm install. This will install all the npm packages that Grunt needs to properly run.
• Usage - You can keep Grunt running while you are editing your theme so that every time you save a .less or .js file, Grunt will recompile/minify everything. To do so, cd to the theme root and run grunt watch. I often keep Grunt watching my code in a terminal tab seperate from the one I'm currently working in. You can alternativly run grunt every time you make changes that you want to compile/minify.

##Icons The /assets/css/icons.less file and the items within /assets/css/fonts are files provided by Ico Moon. When you create a new icon set (Start from the svg included in BootstrapBlocks) you can simply replace those files with the respective files from Ico Moon. When you re-add the icons.less file from Ico Moon, make sure you set the icon font name to "@icon-font-name", that way the icon font name (as set in /assets/css/bootstrap/variables.less) will be consistent throughout all less files.