diff --git a/STARTER-README.md b/README-TEMPLATE.md similarity index 65% rename from STARTER-README.md rename to README-TEMPLATE.md index 014d009..a9653a7 100755 --- a/STARTER-README.md +++ b/README-TEMPLATE.md @@ -1,31 +1,31 @@ # NAMESPACE-UP [![Build Status](https://travis-ci.org/GITHUB-USERNAME/NAMESPACE-LOW.svg)](https://travis-ci.org/GITHUB-USERNAME/NAMESPACE-LOW) DESCRIPTION. -[Download NAMESPACE-UP](https://github.com/GITHUB-USERNAME/NAMESPACE-LOW/archive/master.zip) / [View the demo](http://GITHUB-USERNAME.github.io/NAMESPACE-LOW/). +[Download NAMESPACE-UP](https://github.com/GITHUB-USERNAME/NAMESPACE-LOW/archive/master.zip) / [View the demo](http://GITHUB-USERNAME.github.io/NAMESPACE-LOW/) **In This Documentation** 1. [Getting Started](#getting-started) 2. [Installing with Package Managers](#installing-with-package-managers) -3. [Options & Settings](#options-and-settings) -4. [Browser Compatibility](#browser-compatibility) -5. [How to Contribute](#how-to-contribute) -6. [License](#license) -7. [Changelog](#changelog) -8. [Older Docs](#older-docs) +3. [Working with the Source Files](#working-with-the-source-files) +4. [Options & Settings](#options-and-settings) +5. [Browser Compatibility](#browser-compatibility) +6. [How to Contribute](#how-to-contribute) +7. [License](#license) +8. [Changelog](#changelog) +9. [Older Docs](#older-docs) ## Getting Started -Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code. Unit tests are located in the `test` directory. +Compiled and production-ready code can be found in the `dist` directory. The `src` directory contains development code. Unit tests are located in the `test` directory. It's the same build system that's used by [Kraken](http://cferdinandi.github.io/kraken/), so it includes some unnecessary tasks and Sass variables but can be dropped right in to the boilerplate without any configuration. ### 1. Include NAMESPACE-UP on your site. ```html - ``` @@ -33,7 +33,7 @@ NAMESPACE-UP is [built with Sass](http://sass-lang.com/) for easy customization. The `_config.scss` and `_mixins.scss` files are the same ones used in [Kraken](http://GITHUB-USERNAME.github.io/kraken/), so you can drop the `_NAMESPACE-LOW.css` file right into Kraken without making any updates. Or, adjust the variables to suit your own project. -NAMESPACE-UP also requires [classList.js](https://github.com/eligrey/classList.js) and `bind-polyfill.js`, polyfills that extend ECMAScript 5 API support to more browsers. +NAMESPACE-UP also requires [classList.js](https://github.com/eligrey/classList.js), a polyfill that extends ECMAScript 5 API support to more browsers. ### 2. Add the markup to your HTML. @@ -65,6 +65,28 @@ You can install NAMEPSACE-UP with your favorite package manager. +## Working with the Source Files + +If you would prefer, you can work with the development code in the `src` directory using the included [Gulp build system](http://gulpjs.com/). This compiles, lints, and minifies code, and runs unit tests. It's the same build system that's used by [Kraken](http://cferdinandi.github.io/kraken/), so it includes some unnecessary tasks and Sass variables but can be dropped right in to the boilerplate without any configuration. + +### Dependencies +Make sure these are installed first. + +* [Node.js](http://nodejs.org) +* [Ruby Sass](http://sass-lang.com/install) +* [Gulp](http://gulpjs.com) `sudo npm install -g gulp` + +### Quick Start + +1. In bash/terminal/command line, `cd` into your project directory. +2. Run `npm install` to install required files. +3. When it's done installing, run one of the task runners to get going: + * `gulp` manually compiles files. + * `gulp watch` automatically compiles files when changes are made. + * `gulp reload` automatically compiles files and applies changes using [LiveReload](http://livereload.com/). + + + ## Options and Settings NAMESPACE-UP includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings. @@ -103,7 +125,7 @@ Description ``` #### destroy() -Destroy the current `NAMESPACE-LOW.init()`. +Destroy the current `NAMESPACE-LOW.init()`. This is called automatically during the init function to remove any existing initializations. ```javascript NAMESPACE-LOW.destroy(); diff --git a/README.md b/README.md index d53ac9f..b1998bd 100755 --- a/README.md +++ b/README.md @@ -1,12 +1,13 @@ # Gulp Boilerplate [![Build Status](https://travis-ci.org/cferdinandi/gulp-boilerplate.svg)](https://travis-ci.org/cferdinandi/gulp-boilerplate) -My boilerplate for creating new web projects with [Gulp.js](http://gulpjs.com/). Forked from [Todd Motto's GulpOSS](https://github.com/toddmotto/gulp-oss) with some additions from [Mark Goodyear and Big Bite Creative](https://github.com/bigbitecreative/base). +My boilerplate for creating new web projects with [Gulp.js](http://gulpjs.com/). Forked from [Todd Motto's GulpOSS](https://github.com/toddmotto/gulp-oss) with some additions from [Mark Goodyear and Big Bite Creative](https://github.com/bigbitecreative/base) and various tutorials around the web. * Lints and concatenates JS files. * Compiles Sass files and automatically [adds vendor prefixes](https://github.com/ai/autoprefixer). -* Exports both minified and expanded JS and CSS files. +* Exports both minified and expanded JS and CSS files with header info. +* Generates SVG sprites. +* Generates documentation. * Cleans up file directories. -* Adds a header to the top of all JS and CSS files. * Runs Jasmine unit tests and generates reports. * Includes a `.travis.yml` file for continuous integration with [TravisCI](https://travis-ci.org). @@ -15,10 +16,12 @@ My boilerplate for creating new web projects with [Gulp.js](http://gulpjs.com/). **In This Documentation** 1. [Getting Started](#getting-started) -2. [Options & Settings](#options-and-settings) -3. [Unit Testing](#unit-testing) -3. [License](#license) -4. [Changelog](#changelog) +2. [File Structure](#file-structure) +3. [Working with the Source Files](#working-with-the-source-files) +4. [Options & Settings](#options-and-settings) +5. [Continuous Integration](#continuous-integration) +6. [License](#license) +7. [Changelog](#changelog) ## Getting Started @@ -28,19 +31,28 @@ Make sure these are installed first. * [Node.js](http://nodejs.org) * [Ruby Sass](http://sass-lang.com/install) * [Gulp](http://gulpjs.com) `sudo npm install -g gulp` -* [PhantomJS](http://phantomjs.org) ### Quick Start 1. In bash/terminal/command line, `cd` into your project directory. 2. Run `npm install` to install required files. -3. When it's done installing, run `gulp` to get going. +3. When it's done installing, run one of the task runners to get going: + * `gulp` manually compiles files. + * `gulp docs` manually compiles files and generates documentation. + * `gulp watch` automatically compiles files when changes are made. + * `gulp watch:docs` automatically compiles files and geneates docs when changes are made. + * `gulp reload` automatically compiles files and applies changes using [LiveReload](http://livereload.com/). + * `gulp reload:docs` automatically compiles files, generates docs, and applies changes using [LiveReload](http://livereload.com/). -Every time you want to run your tasks, run `gulp`. -### File Structure -Add your files to the appropriate `src` subdirectories. Gulp will process and and compile them into `dist`. Content in subdirectories under the `js` folder will be concatenated. (For example, files in `js/detects` will compile into `detects.js`.) Files directly under `js` will compile individually. +## File Structure + +Add your files to the appropriate `src` subdirectories. Gulp will process and and compile them into `dist`. + +* Content in subdirectories under the `js` folder will be concatenated. For example, files in `js/detects` will compile into `detects.js`. Files directly under `js` will compile individually. +* SVGs in the `svg` directory will compile into `icons.svg`. +* Assets in the `assets` directory will be copied as-is into the `dist` directory. ``` gulp-boilerplate/ @@ -49,20 +61,29 @@ gulp-boilerplate/ | | |—— myplugin.css | | |—— myplugin.min.css | |—— js/ -| | |—— bind-polyfill.js -| | |—— bind-polyfill.min.js | | |—— classList.js | | |—— classList.min.js | | |—— myplugin.js | | |—— myplugin.min.js +| |—— svg/ +| | |—— icons.svg | |—— # static assets +|—— docs/ +| |—— assets/ +| |—— dist/ +| |—— index.html +| |—— # other docs |—— src/ | |—— js/ -| | |—— bind-polyfill.js | | |—— classList.js | | |—— myplugin.js | |—— sass/ -| | |—— myplugin.sass +| | |—— _config.scss +| | |—— _mixins.scss +| | |—— components/ +| | | |—— myplugin.scss +| |—— svg/ +| | |—— # svgs | |—— static/ | | |—— # static assets |—— test/ @@ -77,11 +98,35 @@ gulp-boilerplate/ |—— index.html |—— package.json |—— README.md -|—— STARTER-README.md +|—— README-TEMPLATE.md ``` +## Working with the Source Files + +### Sass + +Sass files are located in `src` > `sass`. Gulp generates minified and unminified CSS files. It also includes [autoprefixer](https://github.com/postcss/autoprefixer), which adds vendor prefixes for you if required by the last two versions of a browser. + +### JavaScript + +JavaScript files are located in the `src` > `js` directory. + +Files placed directly in the js folder will compile directly to `dist` > `js` as both minified and unminified files. Files placed in subdirectories will also be concatenated into a single file. For example, files in `js/detects` will compile into `detects.js`. Files directly under `js` will compile individually. + +#### Unit Testing + +Gulp Boilerplate is set up for unit testing with [Jasmine](http://jasmine.github.io/2.0/introduction.html). Add your tests to `test/spec/spec-myplugin.js`. Adjust filenames and references as needed. + +Unit test results are printed in terminal, but you can also view them in a browser under `test/results/unit-tests.html`. Get a report of how much of your scripts is covered by testing under `test/coverage`. + +### SVGs + +SVG files placed in the `src` > `svg` directory will be compiled into a single SVG sprite called `icons.svg` in the `dist` > `svg` directory. + + + ## Options and Settings ### Updating Project Details @@ -95,30 +140,47 @@ Inside `gulpfile.js` you'll see a variable named `paths`. Adjust the paths to su ```js var paths = { - output : 'dist/', - scripts : { - input : [ 'src/js/*' ], - output : 'dist/js/' - }, - styles : { - input : 'src/sass/**/*.scss', - output : 'dist/css/' - }, - static : 'src/static/**', - test : { - spec : [ 'test/spec/**/*.js' ], - coverage: 'test/coverage/', - results: 'test/results/' - } + input: 'src/**/*', + output: 'dist/', + scripts: { + input: 'src/js/*', + output: 'dist/js/' + }, + styles: { + input: 'src/sass/**/*.{scss,sass}', + output: 'dist/css/' + }, + svgs: { + input: 'src/svg/**/*.svg', + output: 'dist/svg/' + }, + static: 'src/static/**', + test: { + input: 'src/js/**/*.js', + karma: 'test/karma.conf.js', + spec: 'test/spec/**/*.js', + coverage: 'test/coverage/', + results: 'test/results/' + }, + docs: { + input: 'src/docs/*.{html,md,markdown}', + output: 'docs/', + templates: 'src/docs/_templates/', + assets: 'src/docs/assets/**' + } }; ``` -## Unit Testing -Gulp Boilerplate is set up for unit testing with [Jasmine](http://jasmine.github.io/2.0/introduction.html). Add your tests to `test/spec/spec-myplugin.js`. Adjust filenames and references as needed. +## Continuous Integration + +This boilerplate includes a configuration file for [Travis CI](http://docs.travis-ci.com/user/getting-started/), a continuous integration service for GitHub. + +If you sign-up and activate it for your repository, Travis CI will run your build and execute any processes to make sure everything is working as expected. This is particularly useful when working with a team or managing open source projects with multiple contributors. + +The `.travis.yml` file is pre-configured for the boilerplate's build system. Even if you add files or update the Gulp tasks, you shouldn't need to change anything for it to work. -Unit test results are printed in terminal, but you can also view them in a browser under `test/results/unit-tests.html`. Get a report of how much of your scripts is covered by testing under `test/coverage`. ## License @@ -131,6 +193,12 @@ Gulp Boilerplate is licensed under the [MIT License](http://gomakethings.com/mit Gulp Boilerplate uses [semantic versioning](http://semver.org/). +* v1.1.0 - October 18, 2014 + * Added documentation generator. + * Added SVG sprite generator. + * Added LiveReload and change watching tasks. + * Renamed Gulp tasks for better semantics. + * Updated docs. * v1.0.2 - October 2, 2014 * Added CommonJS bug fix. * Updated readme.md to reflect new file structure. diff --git a/dist/css/myplugin.css b/dist/css/myplugin.css index d82ca2d..35528ce 100755 --- a/dist/css/myplugin.css +++ b/dist/css/myplugin.css @@ -1,5 +1,5 @@ /** - * gulp-boilerplate v1.0.2 + * gulp-boilerplate v1.1.0 * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi. * http://github.com/cferdinandi/Plugin * @@ -7,4 +7,3 @@ * http://gomakethings.com/mit/ */ -/* Your content here... */ diff --git a/dist/css/myplugin.css.min.map b/dist/css/myplugin.css.min.map deleted file mode 100755 index 6359417..0000000 --- a/dist/css/myplugin.css.min.map +++ /dev/null @@ -1,2 +0,0 @@ -/** gulp-boilerplate v1.0.2, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */ -{"version":3,"mappings":"","sources":[],"names":[],"file":"myplugin.css"} \ No newline at end of file diff --git a/dist/css/myplugin.min.css b/dist/css/myplugin.min.css index b505131..afa50ee 100755 --- a/dist/css/myplugin.min.css +++ b/dist/css/myplugin.min.css @@ -1 +1 @@ -/** gulp-boilerplate v1.0.2, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */ +/** gulp-boilerplate v1.1.0, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */ diff --git a/dist/js/bind-polyfill.js b/dist/js/bind-polyfill.js deleted file mode 100644 index c241fc1..0000000 --- a/dist/js/bind-polyfill.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * gulp-boilerplate v1.0.2 - * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi. - * http://github.com/cferdinandi/Plugin - * - * Free to use under the MIT License. - * http://gomakethings.com/mit/ - */ - -/* - * Polyfill Function.prototype.bind support for otherwise ECMA Script 5 compliant browsers - * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility - */ - -if (!Function.prototype.bind) { - Function.prototype.bind = function (oThis) { - if (typeof this !== "function") { - // closest thing possible to the ECMAScript 5 - // internal IsCallable function - throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); - } - - var aArgs = Array.prototype.slice.call(arguments, 1); - var fToBind = this; - fNOP = function () {}; - fBound = function () { - return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); - }; - - fNOP.prototype = this.prototype; - fBound.prototype = new fNOP(); - - return fBound; - }; -} \ No newline at end of file diff --git a/dist/js/bind-polyfill.min.js b/dist/js/bind-polyfill.min.js deleted file mode 100644 index 3ba23c6..0000000 --- a/dist/js/bind-polyfill.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/** gulp-boilerplate v1.0.2, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */ -Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var o=Array.prototype.slice.call(arguments,1),n=this;return fNOP=function(){},fBound=function(){return n.apply(this instanceof fNOP&&t?this:t,o.concat(Array.prototype.slice.call(arguments)))},fNOP.prototype=this.prototype,fBound.prototype=new fNOP,fBound}); \ No newline at end of file diff --git a/dist/js/classList.js b/dist/js/classList.js index 66b34a1..3a0399c 100644 --- a/dist/js/classList.js +++ b/dist/js/classList.js @@ -1,5 +1,5 @@ /** - * gulp-boilerplate v1.0.2 + * gulp-boilerplate v1.1.0 * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi. * http://github.com/cferdinandi/Plugin * diff --git a/dist/js/classList.min.js b/dist/js/classList.min.js index 361c0e9..23f4f82 100644 --- a/dist/js/classList.min.js +++ b/dist/js/classList.min.js @@ -1,2 +1,2 @@ -/** gulp-boilerplate v1.0.2, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */ +/** gulp-boilerplate v1.1.0, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */ "document"in self&&!("classList"in document.createElement("_"))&&!function(t){"use strict";if("Element"in t){var e="classList",n="prototype",i=t.Element[n],r=Object,s=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},a=Array[n].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1},o=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},u=function(t,e){if(""===e)throw new o("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new o("INVALID_CHARACTER_ERR","String contains an invalid character");return a.call(t,e)},c=function(t){for(var e=s.call(t.getAttribute("class")||""),n=e?e.split(/\s+/):[],i=0,r=n.length;r>i;i++)this.push(n[i]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},l=c[n]=[],h=function(){return new c(this)};if(o[n]=Error[n],l.item=function(t){return this[t]||null},l.contains=function(t){return t+="",-1!==u(this,t)},l.add=function(){var t,e=arguments,n=0,i=e.length,r=!1;do t=e[n]+"",-1===u(this,t)&&(this.push(t),r=!0);while(++no;o++)e.call(n,t[o],o,t)},s=function(t,e){var n={};return c(t,function(e,i){n[i]=t[i]}),c(e,function(t,i){n[i]=e[i]}),n},u=function(t,e){for(var n=e.charAt(0);t&&t!==document;t=t.parentNode)if("."===n){if(t.classList.contains(e.substr(1)))return t}else if("#"===n){if(t.id===e.substr(1))return t}else if("["===n&&t.hasAttribute(e.substr(1,e.length-2)))return t;return!1},l=function(t){{var e=t.target;u(e,"[data-some-selector]")}};i.destroy=function(){e&&(document.documentElement.classList.remove(e.initClass),document.removeEventListener("click",l,!1),e=null,n=null)};return i.init=function(t){o&&(i.destroy(),e=s(r,t||{}),document.documentElement.classList.add(e.initClass),document.addEventListener("click",l,!1))},i}); \ No newline at end of file diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css new file mode 100755 index 0000000..653830a --- /dev/null +++ b/docs/assets/css/custom.css @@ -0,0 +1,20 @@ +@-webkit-viewport { width: device-width; zoom: 1.0; } +@-moz-viewport { width: device-width; zoom: 1.0; } +@-ms-viewport { width: device-width; zoom: 1.0; } +@-o-viewport { width: device-width; zoom: 1.0; } +@viewport { width: device-width; zoom: 1.0; } + +html { overflow-y: auto; } + +img, audio, video, canvas { + max-width: 100%; + height: auto; +} + +/* Sets body width */ +.container { + max-width: 40em; + width: 88%; + margin-left: auto; + margin-right: auto; +} \ No newline at end of file diff --git a/dist/css/myplugin.css.map b/docs/dist/css/myplugin.css similarity index 64% rename from dist/css/myplugin.css.map rename to docs/dist/css/myplugin.css index 25dd4f4..35528ce 100755 --- a/dist/css/myplugin.css.map +++ b/docs/dist/css/myplugin.css @@ -1,5 +1,5 @@ /** - * gulp-boilerplate v1.0.2 + * gulp-boilerplate v1.1.0 * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi. * http://github.com/cferdinandi/Plugin * @@ -7,10 +7,3 @@ * http://gomakethings.com/mit/ */ -{ -"version": 3, -"mappings": "", -"sources": [], -"names": [], -"file": "myplugin.css" -} \ No newline at end of file diff --git a/docs/dist/css/myplugin.min.css b/docs/dist/css/myplugin.min.css new file mode 100755 index 0000000..afa50ee --- /dev/null +++ b/docs/dist/css/myplugin.min.css @@ -0,0 +1 @@ +/** gulp-boilerplate v1.1.0, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */ diff --git a/docs/dist/js/classList.js b/docs/dist/js/classList.js new file mode 100644 index 0000000..3a0399c --- /dev/null +++ b/docs/dist/js/classList.js @@ -0,0 +1,176 @@ +/** + * gulp-boilerplate v1.1.0 + * My Gulp.js boilerplate for creating new web projects, by Chris Ferdinandi. + * http://github.com/cferdinandi/Plugin + * + * Free to use under the MIT License. + * http://gomakethings.com/mit/ + */ + +/* + * classList.js: Cross-browser full element.classList implementation. + * 2014-01-31 + * + * By Eli Grey, http://eligrey.com + * Public Domain. + * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. + */ + +/*global self, document, DOMException */ + +/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ + +if ("document" in self && !("classList" in document.createElement("_"))) { + + (function (view) { + + "use strict"; + + if (!('Element' in view)) return; + + var + classListProp = "classList", + protoProp = "prototype", + elemCtrProto = view.Element[protoProp], + objCtr = Object, + strTrim = String[protoProp].trim || function () { + return this.replace(/^\s+|\s+$/g, ""); + }, + arrIndexOf = Array[protoProp].indexOf || function (item) { + var + i = 0, + len = this.length; + for (; i < len; i++) { + if (i in this && this[i] === item) { + return i; + } + } + return -1; + }, + // Vendors: please allow content code to instantiate DOMExceptions + DOMEx = function (type, message) { + this.name = type; + this.code = DOMException[type]; + this.message = message; + }, + checkTokenAndGetIndex = function (classList, token) { + if (token === "") { + throw new DOMEx( + "SYNTAX_ERR", + "An invalid or illegal string was specified" + ); + } + if (/\s/.test(token)) { + throw new DOMEx( + "INVALID_CHARACTER_ERR", + "String contains an invalid character" + ); + } + return arrIndexOf.call(classList, token); + }, + ClassList = function (elem) { + var + trimmedClasses = strTrim.call(elem.getAttribute("class") || ""), + classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [], + i = 0, + len = classes.length; + for (; i < len; i++) { + this.push(classes[i]); + } + this._updateClassName = function () { + elem.setAttribute("class", this.toString()); + }; + }, + classListProto = ClassList[protoProp] = [], + classListGetter = function () { + return new ClassList(this); + }; + // Most DOMException implementations don't allow calling DOMException's toString() + // on non-DOMExceptions. Error's toString() is sufficient here. + DOMEx[protoProp] = Error[protoProp]; + classListProto.item = function (i) { + return this[i] || null; + }; + classListProto.contains = function (token) { + token += ""; + return checkTokenAndGetIndex(this, token) !== -1; + }; + classListProto.add = function () { + var + tokens = arguments, + i = 0, + l = tokens.length, + token, + updated = false; + do { + token = tokens[i] + ""; + if (checkTokenAndGetIndex(this, token) === -1) { + this.push(token); + updated = true; + } + } + while (++i < l); + + if (updated) { + this._updateClassName(); + } + }; + classListProto.remove = function () { + var + tokens = arguments, + i = 0, + l = tokens.length, + token, + updated = false; + do { + token = tokens[i] + ""; + var index = checkTokenAndGetIndex(this, token); + if (index !== -1) { + this.splice(index, 1); + updated = true; + } + } + while (++i < l); + + if (updated) { + this._updateClassName(); + } + }; + classListProto.toggle = function (token, force) { + token += ""; + + var + result = this.contains(token), + method = result ? force !== true && "remove" : force !== false && "add"; + + if (method) { + this[method](token); + } + + return !result; + }; + classListProto.toString = function () { + return this.join(" "); + }; + + if (objCtr.defineProperty) { + var classListPropDesc = { + get: classListGetter, + enumerable: true, + configurable: true + }; + try { + objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); + } catch (ex) { // IE 8 doesn't support enumerable:true + if (ex.number === -0x7FF5EC54) { + classListPropDesc.enumerable = false; + objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); + } + } + } else if (objCtr[protoProp].__defineGetter__) { + elemCtrProto.__defineGetter__(classListProp, classListGetter); + } + + }(self)); + +} \ No newline at end of file diff --git a/docs/dist/js/classList.min.js b/docs/dist/js/classList.min.js new file mode 100644 index 0000000..23f4f82 --- /dev/null +++ b/docs/dist/js/classList.min.js @@ -0,0 +1,2 @@ +/** gulp-boilerplate v1.1.0, by Chris Ferdinandi | http://github.com/cferdinandi/Plugin | Licensed under MIT: http://gomakethings.com/mit/ */ +"document"in self&&!("classList"in document.createElement("_"))&&!function(t){"use strict";if("Element"in t){var e="classList",n="prototype",i=t.Element[n],r=Object,s=String[n].trim||function(){return this.replace(/^\s+|\s+$/g,"")},a=Array[n].indexOf||function(t){for(var e=0,n=this.length;n>e;e++)if(e in this&&this[e]===t)return e;return-1},o=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},u=function(t,e){if(""===e)throw new o("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new o("INVALID_CHARACTER_ERR","String contains an invalid character");return a.call(t,e)},c=function(t){for(var e=s.call(t.getAttribute("class")||""),n=e?e.split(/\s+/):[],i=0,r=n.length;r>i;i++)this.push(n[i]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},l=c[n]=[],h=function(){return new c(this)};if(o[n]=Error[n],l.item=function(t){return this[t]||null},l.contains=function(t){return t+="",-1!==u(this,t)},l.add=function(){var t,e=arguments,n=0,i=e.length,r=!1;do t=e[n]+"",-1===u(this,t)&&(this.push(t),r=!0);while(++no;o++)e.call(n,t[o],o,t)},s=function(t,e){var n={};return c(t,function(e,i){n[i]=t[i]}),c(e,function(t,i){n[i]=e[i]}),n},u=function(t,e){for(var n=e.charAt(0);t&&t!==document;t=t.parentNode)if("."===n){if(t.classList.contains(e.substr(1)))return t}else if("#"===n){if(t.id===e.substr(1))return t}else if("["===n&&t.hasAttribute(e.substr(1,e.length-2)))return t;return!1},l=function(t){{var e=t.target;u(e,"[data-some-selector]")}};i.destroy=function(){e&&(document.documentElement.classList.remove(e.initClass),document.removeEventListener("click",l,!1),e=null,n=null)};return i.init=function(t){o&&(i.destroy(),e=s(r,t||{}),document.documentElement.classList.add(e.initClass),document.addEventListener("click",l,!1))},i}); \ No newline at end of file diff --git a/docs/dist/static.md b/docs/dist/static.md new file mode 100755 index 0000000..b66745a --- /dev/null +++ b/docs/dist/static.md @@ -0,0 +1 @@ +A place to include files that should be copied over as-is... \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..f89230d --- /dev/null +++ b/docs/index.html @@ -0,0 +1,42 @@ + + + + + + My Plugin + + + + + + + + + +
+ + + +
+ + +

Content...

+
+
+ + + + + + + + + \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index bfa3eb9..afc05d7 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,42 +1,83 @@ -// Gulp Packages +/** + * Gulp Packages + */ + +// General var gulp = require('gulp'); -var plumber = require('gulp-plumber'); -var clean = require('gulp-clean'); +var fs = require('fs'); +var del = require('del'); var lazypipe = require('lazypipe'); -var rename = require('gulp-rename'); +var plumber = require('gulp-plumber'); var flatten = require('gulp-flatten'); var tap = require('gulp-tap'); +var rename = require('gulp-rename'); var header = require('gulp-header'); +var footer = require('gulp-footer'); +var watch = require('gulp-watch'); +var livereload = require('gulp-livereload'); +var package = require('./package.json'); + +// Scripts and tests var jshint = require('gulp-jshint'); var stylish = require('jshint-stylish'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); +var karma = require('gulp-karma'); + +// Styles var sass = require('gulp-ruby-sass'); var prefix = require('gulp-autoprefixer'); var minify = require('gulp-minify-css'); -var karma = require('gulp-karma'); -var package = require('./package.json'); -// Paths to project folders +// SVGs +var svgmin = require('gulp-svgmin'); +var svgstore = require('gulp-svgstore'); + +// Docs +var markdown = require('gulp-markdown'); +var fileinclude = require('gulp-file-include'); + + +/** + * Paths to project folders + */ + var paths = { - output : 'dist/', - scripts : { - input : [ 'src/js/*' ], - output : 'dist/js/' + input: 'src/**/*', + output: 'dist/', + scripts: { + input: 'src/js/*', + output: 'dist/js/' + }, + styles: { + input: 'src/sass/**/*.{scss,sass}', + output: 'dist/css/' }, - styles : { - input : 'src/sass/**/*.scss', - output : 'dist/css/' + svgs: { + input: 'src/svg/**/*.svg', + output: 'dist/svg/' }, - static : 'src/static/**', - test : { - spec : [ 'test/spec/**/*.js' ], + static: 'src/static/**', + test: { + input: 'src/js/**/*.js', + karma: 'test/karma.conf.js', + spec: 'test/spec/**/*.js', coverage: 'test/coverage/', results: 'test/results/' + }, + docs: { + input: 'src/docs/*.{html,md,markdown}', + output: 'docs/', + templates: 'src/docs/_templates/', + assets: 'src/docs/assets/**' } }; -// Template for banner to add to file headers + +/** + * Template for banner to add to file headers + */ + var banner = { full : '/**\n' + @@ -55,9 +96,13 @@ var banner = { ' */\n' }; -// Lint, minify, and concatenate scripts -gulp.task('scripts', ['clean'], function() { +/** + * Gulp Taks + */ + +// Lint, minify, and concatenate scripts +gulp.task('build:scripts', ['clean:dist'], function() { var jsTasks = lazypipe() .pipe(header, banner.full, { package : package }) .pipe(gulp.dest, paths.scripts.output) @@ -68,9 +113,8 @@ gulp.task('scripts', ['clean'], function() { return gulp.src(paths.scripts.input) .pipe(plumber()) - .pipe(flatten()) .pipe(tap(function (file, t) { - if ( file.stat.isDirectory() ) { + if ( file.isDirectory() ) { var name = file.relative + '.js'; return gulp.src(file.path + '/*.js') .pipe(concat(name)) @@ -81,10 +125,10 @@ gulp.task('scripts', ['clean'], function() { }); // Process, lint, and minify Sass files -gulp.task('styles', ['clean'], function() { +gulp.task('build:styles', ['clean:dist'], function() { return gulp.src(paths.styles.input) .pipe(plumber()) - .pipe(sass({style: 'expanded', noCache: true})) + .pipe(sass({style: 'expanded', noCache: true, 'sourcemap=none': true})) .pipe(flatten()) .pipe(prefix('last 2 version', '> 1%')) .pipe(header(banner.full, { package : package })) @@ -95,15 +139,27 @@ gulp.task('styles', ['clean'], function() { .pipe(gulp.dest(paths.styles.output)); }); +// Generate SVG sprites +gulp.task('build:svgs', ['clean:dist'], function () { + return gulp.src(paths.svgs.input) + .pipe(svgmin()) + .pipe(svgstore({ + fileName: 'icons.svg', + prefix: 'icon-', + inlineSvg: true + })) + .pipe(gulp.dest(paths.svgs.output)); +}); + // Copy static files into output folder -gulp.task('static', ['clean'], function() { +gulp.task('copy:static', ['clean:dist'], function() { return gulp.src(paths.static) .pipe(plumber()) .pipe(gulp.dest(paths.output)); }); // Lint scripts -gulp.task('lint', function () { +gulp.task('lint:scripts', function () { return gulp.src(paths.scripts.input) .pipe(plumber()) .pipe(jshint()) @@ -111,30 +167,146 @@ gulp.task('lint', function () { }); // Remove prexisting content from output and test folders -gulp.task('clean', function () { - return gulp.src([ - paths.output, - paths.test.coverage, - paths.test.results - ], { read: false }) - .pipe(plumber()) - .pipe(clean()); +gulp.task('clean:dist', function () { + del.sync([ + paths.output, + paths.test.coverage, + paths.test.results + ]); }); // Run unit tests -gulp.task('test', function() { - return gulp.src([paths.scripts.input + '/../**/*.js'].concat(paths.test.spec)) +gulp.task('test:scripts', function() { + return gulp.src([paths.test.input].concat([paths.test.spec])) .pipe(plumber()) - .pipe(karma({ configFile: 'test/karma.conf.js' })) + .pipe(karma({ configFile: paths.test.karma })) .on('error', function(err) { throw err; }); }); -// Combine tasks into runner +// Generate documentation +gulp.task('build:docs', ['default', 'clean:docs'], function() { + return gulp.src(paths.docs.input) + .pipe(plumber()) + .pipe(fileinclude({ + prefix: '@@', + basepath: '@file' + })) + .pipe(tap(function (file, t) { + if ( /\.md|\.markdown/.test(file.path) ) { + return t.through(markdown); + } + })) + .pipe(header(fs.readFileSync(paths.docs.templates + '/_header.html', 'utf8'))) + .pipe(footer(fs.readFileSync(paths.docs.templates + '/_footer.html', 'utf8'))) + .pipe(gulp.dest(paths.docs.output)); +}); + +// Copy distribution files to docs +gulp.task('copy:dist', ['default', 'clean:docs'], function() { + return gulp.src(paths.output + '/**') + .pipe(plumber()) + .pipe(gulp.dest(paths.docs.output + '/dist')); +}); + +// Copy documentation assets to docs +gulp.task('copy:assets', ['clean:docs'], function() { + return gulp.src(paths.docs.assets) + .pipe(plumber()) + .pipe(gulp.dest(paths.docs.output + '/assets')); +}); + +// Remove prexisting content from docs folder +gulp.task('clean:docs', function () { + return del.sync(paths.docs.output); +}); + +// Watch for changes to files +gulp.task('listen', function () { + watch(paths.input, function (files) { + gulp.start('default'); + }); +}); + +// Watch for changes to files and docs +gulp.task('listen:docs', function () { + watch(paths.input, function (files) { + gulp.start('docs'); + }); +}); + +// Spin up livereload server and listen for file changes +gulp.task('server', function () { + livereload.listen(); + watch(paths.input, function (files) { + gulp.start('default'); + gulp.start('refresh'); + }); +}); + +// Spin up livereload server and listen for file and documentation changes +gulp.task('server:docs', function () { + livereload.listen(); + watch(paths.input, function (files) { + gulp.start('docs'); + gulp.start('refresh:docs'); + }); +}); + +// Run livereload after file change +gulp.task('refresh', ['default'], function () { + livereload.changed(); +}); + +// Run livereload after file or documentation change +gulp.task('refresh:docs', ['docs'], function () { + livereload.changed(); +}); + + +/** + * Task Runners + */ + +// Compile files (default) gulp.task('default', [ - 'lint', - 'clean', - 'static', - 'scripts', - 'styles', - 'test' + 'lint:scripts', + 'clean:dist', + 'copy:static', + 'build:scripts', + 'build:svgs', + 'build:styles', + 'test:scripts' +]); + +// Compile files and generate documentation +gulp.task('docs', [ + 'default', + 'clean:docs', + 'build:docs', + 'copy:dist', + 'copy:assets' +]); + +// Compile files when something changes +gulp.task('watch', [ + 'listen', + 'default' +]); + +// Compile files and generate docs when something changes +gulp.task('watch:docs', [ + 'listen:docs', + 'docs' +]); + +// Compile files and livereload pages when something changes +gulp.task('reload', [ + 'server', + 'default' +]); + +// Compile files, generate docs, and livereload pages when something changes +gulp.task('reload:docs', [ + 'server:docs', + 'docs' ]); \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index dd81576..0000000 --- a/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - NAMESPACE-UP - - - - - - - - - - - - - -
- -

NAMESPACE-UP

-

description

-

NAMESPACE-UP on GitHub

- - - -
- - - - - - - - - - \ No newline at end of file diff --git a/package.json b/package.json old mode 100755 new mode 100644 index 999eb93..3e3ceaa --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gulp-boilerplate", - "version": "1.0.2", + "version": "1.1.0", "description": "My Gulp.js boilerplate for creating new web projects", "main": "./dist", "author": { @@ -13,27 +13,34 @@ "url": "http://github.com/cferdinandi/Plugin" }, "devDependencies": { - "gulp": "~3.8.0", - "gulp-autoprefixer": "0.0.7", - "gulp-clean": "^0.2.4", - "gulp-concat": "~2.2.0", - "gulp-flatten": "~0.0.2", - "gulp-tap": "~0.1.1", - "gulp-header": "^1.0.2", + "gulp": "^3.8.0", + "node-fs": "^0.1.7", + "del": "^0.1.3", + "lazypipe": "^0.2.2", + "gulp-plumber": "^0.6.2", + "gulp-flatten": "^0.0.2", + "gulp-tap": "^0.1.1", + "gulp-rename": "^1.1.0", + "gulp-header": "^1.1.1", + "gulp-footer": "^1.0.5", + "gulp-watch": "^1.1.0", + "gulp-livereload": "^2.1.1", "gulp-jshint": "^1.6.1", - "gulp-karma": "0.0.4", - "gulp-minify-css": "~0.3.4", - "gulp-plumber": "~0.6.2", - "gulp-rename": "~1.1.0", - "gulp-ruby-sass": "~0.7.1", - "gulp-uglify": "~0.3.0", "jshint-stylish": "^0.2.0", - "lazypipe": "0.2.2", - "karma": "^0.12.16", + "gulp-concat": "^2.2.0", + "gulp-uglify": "^0.3.0", + "gulp-karma": "^0.0.4", "karma-coverage": "^0.2.4", - "karma-jasmine": "~0.2.0", + "karma-jasmine": "^0.2.0", "karma-phantomjs-launcher": "^0.1.4", - "karma-spec-reporter": "0.0.13", - "karma-htmlfile-reporter": "~0.1" + "karma-spec-reporter": "^0.0.13", + "karma-htmlfile-reporter": "^0.1", + "gulp-ruby-sass": "^0.7.1", + "gulp-minify-css": "^0.3.4", + "gulp-autoprefixer": "^0.0.7", + "gulp-svgmin": "^0.4.6", + "gulp-svgstore": "^2.0.0", + "gulp-markdown": "^1.0.0", + "gulp-file-include": "^0.5.1" } } diff --git a/src/docs/_templates/_footer.html b/src/docs/_templates/_footer.html new file mode 100644 index 0000000..473696c --- /dev/null +++ b/src/docs/_templates/_footer.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/docs/_templates/_header.html b/src/docs/_templates/_header.html new file mode 100644 index 0000000..05dca00 --- /dev/null +++ b/src/docs/_templates/_header.html @@ -0,0 +1,24 @@ + + + + + + My Plugin + + + + + + + + + +
+ + + +
diff --git a/src/docs/_templates/_nav.html b/src/docs/_templates/_nav.html new file mode 100644 index 0000000..51ea942 --- /dev/null +++ b/src/docs/_templates/_nav.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/docs/assets/css/custom.css b/src/docs/assets/css/custom.css new file mode 100755 index 0000000..653830a --- /dev/null +++ b/src/docs/assets/css/custom.css @@ -0,0 +1,20 @@ +@-webkit-viewport { width: device-width; zoom: 1.0; } +@-moz-viewport { width: device-width; zoom: 1.0; } +@-ms-viewport { width: device-width; zoom: 1.0; } +@-o-viewport { width: device-width; zoom: 1.0; } +@viewport { width: device-width; zoom: 1.0; } + +html { overflow-y: auto; } + +img, audio, video, canvas { + max-width: 100%; + height: auto; +} + +/* Sets body width */ +.container { + max-width: 40em; + width: 88%; + margin-left: auto; + margin-right: auto; +} \ No newline at end of file diff --git a/src/docs/index.html b/src/docs/index.html new file mode 100644 index 0000000..03fcc17 --- /dev/null +++ b/src/docs/index.html @@ -0,0 +1,3 @@ +@@include('_templates/_nav.html') + +

Content...

\ No newline at end of file diff --git a/src/js/bind-polyfill.js b/src/js/bind-polyfill.js deleted file mode 100644 index e6a8f6b..0000000 --- a/src/js/bind-polyfill.js +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Polyfill Function.prototype.bind support for otherwise ECMA Script 5 compliant browsers - * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility - */ - -if (!Function.prototype.bind) { - Function.prototype.bind = function (oThis) { - if (typeof this !== "function") { - // closest thing possible to the ECMAScript 5 - // internal IsCallable function - throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); - } - - var aArgs = Array.prototype.slice.call(arguments, 1); - var fToBind = this; - fNOP = function () {}; - fBound = function () { - return fToBind.apply(this instanceof fNOP && oThis ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); - }; - - fNOP.prototype = this.prototype; - fBound.prototype = new fNOP(); - - return fBound; - }; -} \ No newline at end of file diff --git a/src/sass/_config.scss b/src/sass/_config.scss new file mode 100644 index 0000000..a5031d7 --- /dev/null +++ b/src/sass/_config.scss @@ -0,0 +1,66 @@ +// @section Configuration Settings +// Adjust colors, font stacks, breakpoints and sizing. +// +// Typographic Scale +// (For math purposes. Actual font sizes in ems.) +// 1px, 4px, 5px, 8px, 9px, 11px, 12px, 13px, 15px, 16px, 19px, 21px, 24px, 28px, 32px, 48px, 64px, 80px, 96px +// line height: 1.5em on small screens, 1.5625em on big screens +// + +// Colors +$color-primary: #0088cc; +$color-black: #272727; +$color-white: #ffffff; + +$color-success: #377f31; // Green +$color-danger: #880e14; // Red +$color-warning: #dba909; // Yellow +$color-code: #dd1144; + +$color-gray-dark: #808080; +$color-gray-light: #e5e5e5; + + +// Font Stacks +$font-primary: "Helvetica Neue", Arial, sans-serif; +$font-secondary: Georgia, Times, serif; +$font-monospace: Menlo, Monaco, "Courier New", monospace; + + +// Breakpoints +$bp-xsmall: 20em; +$bp-small: 30em; +$bp-medium: 40em; +$bp-large: 60em; +$bp-xlarge: 80em; + + +// Sizing +$font-base: 100%; +$font-xlarge-screens: 125%; +$spacing: 1.5625em; +$container-max: 80em; +$container-width: 88%; + + +// Grid +$grid-margins: 1.4%; +$grid-sizes: ( // name: width + fourth: 25%, + third: 33.33333333333%, + half: 50%, + two-thirds: 66.666666666667%, + three-fourths: 75%, + full: 100% +); +$grid-breakpoints: ( // breakpoint, prefix, include offsets (boolean) + ($bp-xsmall, ".row-start-xsmall", false), + ($bp-small, ".row-start-small", false), + ($bp-medium, null, true) +); + + +// Icons +$icons: ( // name, character, color + ("logo", "\e600", null), +); \ No newline at end of file diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss new file mode 100644 index 0000000..a130c67 --- /dev/null +++ b/src/sass/_mixins.scss @@ -0,0 +1,36 @@ +// +// MIXINS & FUNCTIONS +// A few simple Sass helpers. +// + +// @font-face mixin +// Order of the includes matters, and it is: normal, bold, italic, bold+italic. +// Forked from Bourbon. https://github.com/thoughtbot/bourbon/ +@mixin font-face($font-family, $file-path, $weight: normal, $style: normal) { + @font-face { + font-family: $font-family; + font-weight: $weight; + font-style: $style; + + src: url('#{$file-path}.eot'); + src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), + url('#{$file-path}.woff') format('woff'), + url('#{$file-path}.ttf') format('truetype'), + url('#{$file-path}.svg##{$font-family}') format('svg'); + } +} + +// Strip units from values +@function strip-unit($num) { + @return $num / ($num * 0 + 1); +} + +// Calculate ems from pixels +@function calc-em($px, $base: 16) { + $px: strip-unit($px); + $base: strip-unit($base); + @if $px == 1 { + @return 0.0725em; + } + @return ($px / $base) * 1em; +} \ No newline at end of file diff --git a/src/sass/components/_myplugin.scss b/src/sass/components/_myplugin.scss new file mode 100644 index 0000000..02ba25f --- /dev/null +++ b/src/sass/components/_myplugin.scss @@ -0,0 +1 @@ +// Add styles here... \ No newline at end of file diff --git a/src/sass/myplugin.scss b/src/sass/myplugin.scss index eadccd8..ffac6a2 100644 --- a/src/sass/myplugin.scss +++ b/src/sass/myplugin.scss @@ -1 +1,5 @@ -/* Your content here... */ \ No newline at end of file +// Import styles for compiling +@import + "config", + "mixins", + "components/myplugin"; diff --git a/src/svg/svg.md b/src/svg/svg.md new file mode 100755 index 0000000..13c6d0b --- /dev/null +++ b/src/svg/svg.md @@ -0,0 +1 @@ +A place to include SVGs that should be compiled into an SVG sprite... \ No newline at end of file