Simple whitelabeling

The LESS compiler resolves @import references on a 'first hit' basis,
allowing us to provide simple custom-theme support by providing a
directory with a higher resolution priority.

- Renamed the 'styles' directory to 'theme'
- Updated grunt-contrib-less version
- Added README for the super curious
- Moved files around to place files into their respective directories
- Added custom theme .less files to .gitignore
- Update build.

Change-Id: Ic55a6b463a993f58fc7f71ad51fe65b04601ed78

.gitignore

@@ -9,3 +9,4 @@ npm-debug.log
 reports
 cover
 .tox
+src/theme/custom/**.less

Gruntfile.js

@@ -42,6 +42,7 @@ module.exports = function (grunt) {
 
     var dir = {
         source: './src',
+        theme: './src/theme',
         test: './test',
         output: './dist',
         report: './reports',
@@ -138,17 +139,22 @@ module.exports = function (grunt) {
          */
         less: {
             options: {
-                paths: [
-                    dir.bower + '/bootstrap/less',
-                    dir.bower + '/font-awesome/less/'
-                ],
+                paths: function(mainPath) {
+                    return [
+                        mainPath,
+                        dir.theme + '/custom/',
+                        dir.theme + '/storyboard/',
+                        dir.bower + '/bootstrap/less/',
+                        dir.bower + '/font-awesome/less/'
+                    ];
+                },
                 cleancss: true,
                 strictMath: true,
                 strictUnits: true
             },
             theme: {
                 files: {
-                    'dist/styles/main.css': dir.source + '/styles/main.less'
+                    'dist/styles/main.css': dir.theme + '/main.less'
                 }
             }
         },
@@ -371,7 +377,7 @@ module.exports = function (grunt) {
             },
             less: {
                 files: [
-                    dir.source + '/styles/**/*.less'
+                    dir.theme + '/**/*.less'
                 ],
                 tasks: ['less:theme']
             },

package.json

@@ -26,7 +26,7 @@
         "grunt-usemin": "2.0.2",
         "grunt-contrib-htmlmin": "0.1.3",
         "grunt-contrib-cssmin": "0.7.0",
-        "grunt-contrib-less": "0.9.0",
+        "grunt-contrib-less": "0.11.0",
         "grunt-karma": "0.6.2",
         "grunt-contrib-connect": "0.5.0",
         "grunt-contrib-watch": "0.5.3",

src/theme/base/custom_font_icons.less

@@ -16,8 +16,8 @@
 
 @font-face {
   font-family: custom_font_icons;
-  src: url(../fonts/custom_font_icons.eot);
-  src: url(../fonts/custom_font_icons.eot?#iefix) format("embedded-opentype"), url(../fonts/custom_font_icons.woff) format("woff"), url(../fonts/custom_font_icons.ttf) format("truetype");
+  src: url(../../fonts/custom_font_icons.eot);
+  src: url(../../fonts/custom_font_icons.eot?#iefix) format("embedded-opentype"), url(../../fonts/custom_font_icons.woff) format("woff"), url(../../fonts/custom_font_icons.ttf) format("truetype");
   font-weight: 400;
   font-style: normal
 }

src/theme/custom/README.md

@@ -0,0 +1,31 @@
+# Custom Themes for StoryBoard
+This folder provides an extension mechanism by which you can apply your own
+custom bootstrap theme to StoryBoard. By creating your own theme.less file in
+this directory, your own custom adjustments will be used to compile bootstrap.
+
+## Quickstart
+*  Copy `./src/theme/storyboard/theme.less` to `./src/theme/custom/theme.less`
+*  Edit your new `theme.less`
+*  Run `grunt build` or `grunt server`
+
+You can override any variables supported in the bootstrap native variables file.
+ At this time, StoryBoard does not include its own variables.
+
+## How it works
+
+This folder is included in the dependency resolution path for our LESS files, in
+ the following order.
+
+* `./src/theme/main.less`
+* `./src/theme/custom/`
+* `./src/theme/storyboard/`
+* `./bower_components/bootstrap/less/`
+* `./bower_components/font-awesome/less/`
+
+This means that you can override any file directly imported into main.less by
+adding your own version of this file. You can also add your own file inclusions
+by using `@import` directives in your own theme file. Note that `@include`
+resolves first from the current directory before checking the resolution path.
+
+All files in this directory with the `*.less` extension are included in our
+`.gitignore`, so updating your codebase will not override those files.

src/theme/main.less

@@ -23,15 +23,15 @@
 // Library inclusions
 @import './bootstrap.less';
 @import './font-awesome.less';
-// Variables
-@import './variables.less';
+// Theme
+@import './theme.less';
 // Addons to the bootstrap theme.
-@import './bootstrap_addons.less';
+@import './base/bootstrap_addons.less';
 // Add our own custom icon font.
-@import './custom_font_icons.less';
+@import './base/custom_font_icons.less';
 // Module specific styles
-@import './body.less';
-@import './logged_in.less';
-@import './auth.less';
-@import './discussion.less';
-@import './typography.less';
+@import './base/body.less';
+@import './base/logged_in.less';
+@import './base/auth.less';
+@import './base/discussion.less';
+@import './base/typography.less';