Added grunt svgstore task to Gruntfile

Gruntfile.js

@@ -155,6 +155,17 @@ module.exports = function(grunt) {
             }
         },
 
+        svgstore: {
+          options: {
+            prefix : 'icon-', // This will prefix each <g> ID
+          },
+          default : {
+              files: {
+                'assets/img/icons/svg-defs.svg': ['assets/img/icons/*.svg'],
+              }
+            }
+        },
+
         // End Grunt Config
     });
 
@@ -174,6 +185,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-imagemin');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-browser-sync');
+    grunt.loadNpmTasks('grunt-svgstore');
 
     /**
     * Default task(s).

README.md

@@ -11,27 +11,67 @@ The purpose of these theme is to be a starting point for theme creation on build
 * [Sass](http://www.sass-lang.com)
 
 ## How to build
-1. Clone this repo and place within your 'wp-content/themes' folder.
+1. Clone this repo and place within your '/wp-content/themes/' folder.
 ````
-$ cd wp-project-folder/wp-content/themes
+$ cd /wp-project-folder/wp-content/themes/
 $ git clone github.com/benbrehaut/halos.git
 $ cd halos
 ````
 2. While within the theme root, run;
 ````
 npm install
+````
+
+3. Open the ``Gruntfile.js`` file and change the proxy name in BrowserSync (line :31) to your name of your MAMP site.
+
+4. Then run the grunt command to start development!
+````
 grunt
 ````
 
+This will open up a new BrowserSync session and start watching our files for changes and compiling and uglifying the JavaScript files.
+
+## Tasks
+
+### BrowserSync
+###### Default task
+BrowserSync is a useful tool for having your changes made when coding reload your tab automatically. On start of Grunt, BrowserSync will start a new session and provide you a local address (``localhost:3000``) and a external address (``192.168.30.##:3000``) which you can use to view your site on another device which isn't your computer.
+
+BrowserSync watches for changes made to all ``.php``, ``.css`` and ``.js`` files, so any changes will be applied automatically.
+
+Make sure you have changed the proxy name in the BrowserSync settings in the ``Gruntfile.js`` for BrowserSync to work.
+
 ### Styles
-All Sass files are located within ``assets/scss``, with the ``style.scss`` outputting into ``assets/css/style.css`` This can be changed with ``Grunt.js`` file if you wish, but is probably best to keep it to this default location.
+###### Default task
+All Sass files are located within ``/assets/scss``, with the ``style.scss`` outputting into ``/assets/css/style.css`` This can be changed with ``Grunt.js`` file if you wish, but is probably best to keep it to this default location.
 
 * ``style.css`` is blank on purpose, and is required by WordPress to register this as a theme.
-* ``assets/scss/style.scss`` is our main stylesheet, which will compile everything inside it into ``assets/css/style.css``
+* ``/assets/scss/style.scss`` is our main stylesheet, which will compile everything inside it into ``/assets/css/style.css``
 
 ### Scripts
-All JavaScript files are located with ``assets/js``, the ``main.js`` file is the main Javascript file for the theme, with external third party libraries within the ``libs`` folder. All files within this will be concatenated into the ``scripts.js`` file, includeding the ``main.js`` file, which is then concatenated and compressed into ``scripts.min.js``
+###### Default task
+All JavaScript files are located with ``/assets/js``, the ``main.js`` file is the main Javascript file for the theme, with external third party libraries within the ``libs`` folder. All files within this will be concatenated into the ``scripts.js`` file, includeding the ``main.js`` file, which is then concatenated and compressed into ``scripts.min.js``
+
+* ``/assets/js/main.js`` is the main JavaScript file. This is where you should write all of your JavaScript.
+* ``/assets/js/scripts.js`` is the uncompressed and concatenated JavaScript file from all of the files within the ``/assets/js/libs/*.js`` folder and ``/assets/js/main.js`` file.
+* ``/assets/js/scripts.min.js`` is our compressed version of the ``/assets/js/scripts.js`` file.
+
+### SVG Icons
+###### Non default task
+Instead of putting the full SVG code, we can reference them using ``<use xlink:href="#icon-name"></use>``
+
+Place all of the icons within the ``/assets/img/icons/`` folder, and then run the command ``grunt svgstore`` which will then generate the ``svg-defs.svg`` file. This is linked at the bottom of the ``footer.php`` file.
+
+You can then use the icons with the ``<use></use>`` tag!
+
+````html
+<svg class="icon">
+  <use xlink:href="#icon-name-of-icon-file"></use>
+</svg>
+````
+
+### Image Minification
+###### Non default task
+If you require images within the theme, you can minify the images without the lose of quality.
 
-* ``assets/js/main.js`` is the main JavaScript file. This is where you should write all of your JavaScript.
-* ``assets/js/scripts.js`` is the uncompressed and concatenated JavaScript file from all of the files within the ``assets/js/libs/*.js`` folder and ``assets/js/main.js`` file.
-* ``assets/js/scripts.min.js`` is our compressed version of the ``assets/js/scripts.js`` file.
+Run the command ``grunt imagemin`` which will minify all .jpg's, .png's and .gif's. The files will be replaced automatically with the new minified version.

assets/fonts/README.md

@@ -0,0 +1 @@
+This is where all of your fonts should be stored.

assets/img/README.md

@@ -0,0 +1 @@
+This is where any theme based images, such as background patterns, placeholder images etc. should be stored.

assets/img/favicon/README.md

@@ -0,0 +1 @@
+This is where the favicons should be stored.

assets/img/icons/README.md

@@ -0,0 +1 @@
+This is where all of the SVG icons should be placed.

assets/scss/modules/_buttons.scss

@@ -1,15 +1,3 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 // Buttons
 // - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.btn {
-    margin: 0;
-    border: 0;
-    display: inline-block;
-    padding: rem-calc(8 24);
-    text-decoration: none;
-    background-color: transparent;
-    text-transform: uppercase;
-    font-size: rem-calc(14);
-    letter-spacing: 1px;
-}

footer.php

@@ -33,5 +33,10 @@
 </footer>
 <!-- /site-footer -->
 
+<!-- SVG Icons -->
+<div class="element-hidden">
+    <?php include_once('assets/img/icons/svg-defs.svg'); ?>
+</div>
+<!-- /SVG Icons -->
 <?php wp_footer(); ?>
 </body>

header.php

@@ -25,7 +25,6 @@
     <?php wp_head(); ?>
 </head>
 <body <?php body_class('site'); ?>>
-
 <!-- IE 9 < warning -->
 <!--[if lte IE 9]>
 	<div class="site-notice">

package.json

@@ -33,6 +33,7 @@
     "grunt-contrib-watch": "^1.0.0",
     "grunt-postcss": "^0.8.0",
     "grunt-sass": "^1.2.1",
+    "grunt-svgstore": "^1.0.0",
     "time-grunt": "^1.4.0"
   }
 }