diff --git a/Gruntfile.js b/Gruntfile.js index 4be9ef8..3df4241 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -155,6 +155,17 @@ module.exports = function(grunt) { } }, + svgstore: { + options: { + prefix : 'icon-', // This will prefix each 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). diff --git a/README.md b/README.md index c942add..9450194 100644 --- a/README.md +++ b/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 ```` + +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 ```` tag! + +````html + + + +```` + +### 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. diff --git a/assets/fonts/README.md b/assets/fonts/README.md new file mode 100644 index 0000000..934851b --- /dev/null +++ b/assets/fonts/README.md @@ -0,0 +1 @@ +This is where all of your fonts should be stored. diff --git a/assets/fonts/font-awesome/fontawesome-webfont.woff b/assets/fonts/font-awesome/fontawesome-webfont.woff deleted file mode 100644 index 400014a..0000000 Binary files a/assets/fonts/font-awesome/fontawesome-webfont.woff and /dev/null differ diff --git a/assets/fonts/font-awesome/fontawesome-webfont.woff2 b/assets/fonts/font-awesome/fontawesome-webfont.woff2 deleted file mode 100644 index 4d13fc6..0000000 Binary files a/assets/fonts/font-awesome/fontawesome-webfont.woff2 and /dev/null differ diff --git a/assets/img/README.md b/assets/img/README.md new file mode 100644 index 0000000..deef589 --- /dev/null +++ b/assets/img/README.md @@ -0,0 +1 @@ +This is where any theme based images, such as background patterns, placeholder images etc. should be stored. diff --git a/assets/img/favicon/README.md b/assets/img/favicon/README.md new file mode 100644 index 0000000..326b2ad --- /dev/null +++ b/assets/img/favicon/README.md @@ -0,0 +1 @@ +This is where the favicons should be stored. diff --git a/assets/img/favicon/favicon-32x32.png b/assets/img/favicon/favicon-32x32.png deleted file mode 100644 index de9c078..0000000 Binary files a/assets/img/favicon/favicon-32x32.png and /dev/null differ diff --git a/assets/img/icons/README.md b/assets/img/icons/README.md new file mode 100644 index 0000000..095ef47 --- /dev/null +++ b/assets/img/icons/README.md @@ -0,0 +1 @@ +This is where all of the SVG icons should be placed. diff --git a/assets/img/icons/svg-defs.svg b/assets/img/icons/svg-defs.svg new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/modules/_buttons.scss b/assets/scss/modules/_buttons.scss index 118fc70..eb41099 100644 --- a/assets/scss/modules/_buttons.scss +++ b/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; -} diff --git a/footer.php b/footer.php index 678fc39..6ec1755 100644 --- a/footer.php +++ b/footer.php @@ -33,5 +33,10 @@ + +
+ +
+ diff --git a/header.php b/header.php index 81b67f9..3c7cc25 100644 --- a/header.php +++ b/header.php @@ -25,7 +25,6 @@ > -