├── .editorconfig
├── .gitattributes
├── .gitignore
├── .jscsrc
├── .jshintrc
├── .travis.yml
├── AUTHORS
├── CHANGELOG.md
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── apple-touch-icon.png
├── docs
    ├── TOC.md
    ├── concat.md
    ├── css.md
    ├── extend.md
    ├── faq.md
    ├── grunt.md
    ├── html.md
    ├── html5-boilerplate.md
    ├── js.md
    ├── pages.md
    ├── tests.md
    ├── toolchain.md
    ├── usage.md
    └── writing-tests.md
├── grunt
    ├── config.js
    ├── karma.conf.js
    ├── load-grunt-config.js
    ├── options
    │   ├── browserify.js
    │   ├── clean.js
    │   ├── concat.js
    │   ├── connect.js
    │   ├── copy.js
    │   ├── imagemin.js
    │   ├── jscs.js
    │   ├── jshint.js
    │   ├── karma.js
    │   ├── modernizr.js
    │   ├── pleeease.js
    │   ├── replace.js
    │   └── watch.js
    ├── plugins
    │   └── .gitignore
    └── tasks
    │   └── .gitignore
├── package.json
├── pages.json
├── src
    ├── 404.html
    ├── apple-touch-icon-precomposed.png
    ├── browserconfig.xml
    ├── crossdomain.xml
    ├── css
    │   ├── base
    │   │   ├── helpers.css
    │   │   └── variables.css
    │   ├── elements
    │   │   └── typography.css
    │   ├── layout
    │   │   ├── base.css
    │   │   ├── footer.css
    │   │   ├── header.css
    │   │   └── main.css
    │   └── main.css
    ├── favicon.ico
    ├── humans.txt
    ├── img
    │   └── .gitignore
    ├── js
    │   ├── main.js
    │   └── plugins
    │   │   ├── console.js
    │   │   └── tracking.js
    ├── logo.svg
    ├── modules
    │   └── module
    │   │   ├── module.css
    │   │   ├── module.html
    │   │   ├── module.js
    │   │   └── module.spec.js
    ├── robots.txt
    ├── templates
    │   ├── footer.html
    │   ├── header.html
    │   └── index.html
    ├── tile-wide.png
    └── tile.png
└── test
    └── main.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | end_of_line = lf
 8 | indent_style = space
 9 | indent_size = 2
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true
13 | 
14 | [.htaccess]
15 | indent_style = space
16 | indent_size = 4
17 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Include your project-specific ignores in this file
 2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
 3 | 
 4 | *.sass-cache
 5 | *.sublime-*
 6 | 
 7 | dist
 8 | node_modules
 9 | src/*.html
10 | test/coverage
11 | test/dist
12 | 


--------------------------------------------------------------------------------
/.jscsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "preset": "airbnb",
 3 |   "disallowSpaceAfterObjectKeys": {
 4 |     "allExcept": ["method"]
 5 |   },
 6 |   "disallowSpacesInAnonymousFunctionExpression": false,
 7 |   "disallowSpacesInFunctionDeclaration": false,
 8 |   "disallowSpacesInFunctionExpression": false,
 9 |   "disallowSpacesInNamedFunctionExpression": false,
10 |   "requireCommaBeforeLineBreak": false,
11 |   "requirePaddingNewLinesBeforeLineComments": false,
12 |   "requireTrailingComma": false,
13 | }
14 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | /**!
 2 |  * See http://www.jshint.com/docs/options/ for all available options.
 3 |  */
 4 | {
 5 |   /**
 6 |    * Enforcing options
 7 |    * See http://www.jshint.com/docs/options/#enforcing-options
 8 |    */
 9 |   "bitwise": true,
10 |   "camelcase": true,
11 |   "curly": true,
12 |   "eqeqeq": true,
13 |   "immed": true,
14 |   "latedef": true,
15 |   "newcap": true,
16 |   "noarg": true,
17 |   "strict": true,
18 |   "trailing": true,
19 |   "undef": true,
20 |   "unused": true,
21 | 
22 |   /**
23 |    * Relaxing options
24 |    * See http://www.jshint.com/docs/options/#relaxing-options
25 |    */
26 |   "eqnull": true,
27 |   "esnext": true,
28 |   "smarttabs": true,
29 | 
30 |   /**
31 |    * Environments
32 |    * See http://www.jshint.com/docs/options/#environments
33 |    */
34 |   "browser": true,
35 |   "jquery": true,
36 |   "node": true,
37 | 
38 |   /**
39 |    * Globals
40 |    * See http://www.jshint.com/docs/
41 |    */
42 |   "globals": {
43 |     "ga": true,
44 | 
45 |     // RequireJS
46 |     "define": true,
47 |     "module": true,
48 |     "require": true,
49 |     "requirejs": true,
50 | 
51 |     // Jasmin
52 |     "jasmine": true,
53 |     "afterEach": true,
54 |     "beforeEach": true,
55 |     "describe": true,
56 |     "expect": true,
57 |     "it": true,
58 |     "sinon": true
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "0.10"
 4 |   - "0.12"
 5 | before_script:
 6 |   - export DISPLAY=:99.0
 7 |   - sh -e /etc/init.d/xvfb start
 8 |   - npm i -g grunt-cli
 9 |   - npm i
10 | cache:
11 |   directories:
12 |     - node_modules
13 | 


--------------------------------------------------------------------------------
/AUTHORS:
--------------------------------------------------------------------------------
1 | Hans-Christian Reinl <info@drublic.de> (http://drublic.de/)
2 | Anselm Hannemann <hello@anselm-hannemann.com> (http://helloanselm.com/)
3 | Cătălin Mariș (https://twitter.com/alrra)
4 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | * Fix JSCS error in the console.js plugin script file
  4 | * Update clearfix to a more simple, leaner one
  5 | 
  6 | ### v2.0.0
  7 | * Update node modules
  8 | * Add JSCS module to grunt build workflow
  9 | * Fix bug with jshint config in grunt watch task (#141)
 10 | * Remove unused banner config in grunt config
 11 | * Use config.js.hintFiles for files that should be linted
 12 | * Optimize SVG logo
 13 | * Add ES6 modules to JS + build workflow
 14 | * Remove unused `@date` definitions
 15 | * Update Apache Server Configs to v2.14.0
 16 | * Remove node dependency `xtend` in favor of `node-deep-extend` (#132)
 17 | * Add HTML to modules folder and parse module html (#129)
 18 | * Update npm dependencies to latest versions
 19 | * Include better tracking via Google Analytics in a separate file
 20 | * Fetch the `.htaccess` file via `npm`
 21 | * Add a modules folder for all components on a page
 22 | * Re-add .htaccess: server-configs-apache in version 2.11.0
 23 | * Remove conditional comments for old IE
 24 | * Drop IE8 support: update jQuery to v2.1.1
 25 | * Remove Bower and use npm for all dependencies
 26 | * Remove Sass and replace with Pleeease
 27 | * Update karma tasks to better reflect actual propose
 28 | * Copy files that are needed in dest via grunt copy
 29 | * Use grunt-sass with libsass for speed
 30 | 
 31 | #### Pre v2
 32 | * Delete unnecessary property in `.bowerrc`
 33 | 
 34 | ### 1.4.0 (20 November 2014)
 35 | * Update dependencies from bower and npm
 36 | * Update Apache Server Configs to v2.11.0
 37 | * Rename Apple touch icon to `apple-touch-icon.png` and add<br>
 38 |   `<link>` in `templates/header.html`
 39 |   ([h5bp/html5-boilerplate#1622](https://github.com/h5bp/html5-boilerplate/pull/1622))
 40 | * Removed obsolete sourcemapping option
 41 | * Update `apple-touch-icon-precomposed.png`
 42 |   ([h5bp/html5-boilerplate#1599](https://github.com/h5bp/html5-boilerplate/pull/1599))
 43 | * Remove `trailing` JSHint option
 44 | * Upgrade `console.log` / `console.warn` (#112)
 45 | * Remove timestamp logging when running Karma
 46 | * Integrate jit-grunt
 47 | * Remove proxy from Karma configuration since it is not needed
 48 | * Remove `connect:test` task from Grunt
 49 | * Order .jshintrc options alphabetically
 50 | * Update 404 to latest from HTML5 Boilerplate
 51 | * Make structure for test suites easier to unterstand
 52 | * Add `auto` to the Google Universal Analytics tracker create method
 53 | * Add `timeline` and `timelineEnd` to the list of `console` methods
 54 | 
 55 | ### 1.3.0 (4 June 2014)
 56 | * Update to Apache Server Configs v2.4.0
 57 | * Add `lang=""` to `<html>`
 58 | * Use `<!doctype html>` instead of `<!DOCTYPE html>`
 59 | * Update component jQuery to 1.11.1
 60 | * Update component Modernizr to v2.8.0
 61 | * Update npm packages to their latest version
 62 | 
 63 | ### 1.2.0 (2 April 2014)
 64 | * Update component normalize.scss to v3.0.1
 65 | * Use INIT logo for tiles and icons (#105)
 66 | * Use load-grunt-tasks instead of matchdep
 67 | * Add config option to add custom concat tasks (#87)
 68 | * Use load-grunt-tasks instead of matchdep
 69 | * Clean up Karma configuration and make coverage working with new version
 70 | * Add `grunt/tasks` folder for own tasks
 71 | * Add directory `grunt/plugins` to include plugins for Grunt config
 72 | * Rename `tasks` to `grunt`
 73 | * Update bower components to lastest version
 74 | * Update dependencies to latest version
 75 | * Add Sass 3.3 sourcemaps support (#99)
 76 | * Fix output style again
 77 | * Revert "Use libsass instead of Ruby Sass"
 78 | * Fix non-compressed output on Sass files in build (#101)
 79 | * Move karma.config.js file to `tasks` directory
 80 | * Add `/browserconfig.xml` file and tile images
 81 | 
 82 | ### 1.1.1 (04 March 2014)
 83 | * Fix Grunt-Modernizr task for latest update
 84 | * Update npm dependencies to latest versions
 85 | * Use constant instead of string for Karma log level
 86 | * Fix path of jQuery in config.js in order of v1.11.0 update
 87 | * Update jQuery to v1.11.0
 88 | * Update normalize-scss to v3.0.0
 89 | * Fix npm postinstall script for win32 systems (#89)
 90 | * Update to Apache Server Configs v2.2.0
 91 | 
 92 | ### 1.1.0 (29 January 2014)
 93 | * Further optimize `apple-touch-icon-precomposed`
 94 | * Add `Disallow:` to `robots.txt`
 95 | * Update 404 to reduce uncopressed size
 96 | * Update Bower packages and npm dependencies to latest
 97 | * Update to Apache Server Configs v2.1.0
 98 | * Simplified default template markup (#81)
 99 | * Add time-grunt to measure grunt's execution time
100 | * Use libsass instead of Ruby Sass
101 | * Clean up karma.conf.js
102 | * Use xtend instead of deprecated Grunt dependency Lodash
103 | * Update Grunt to 0.4.2
104 | * Minor updates of IE 6, 7 support
105 | * Removing .ir class, as it was done on HTML5 Boilerplate
106 | 
107 | ### 1.0.2 (11 December 2013)
108 | * Minor updates to .htaccess
109 | * Clean up Gruntfile
110 | * Remove grunt-concurrent
111 | * Update Modernizr to v2.7.1
112 | 
113 | ### 1.0.1 (26 November 2013)
114 | * Update dependencies and devDependencies
115 | * Move Karma tests in `grunt build` without using concurrent (#62)
116 | * Remove regexp option from JSHint options
117 | * Fix broken link in template
118 | 
119 | ### 1.0.0 (20 November 2013)
120 | 
121 | #### Additions
122 | * Use Bower for package management and replace vendor packages (#24)
123 | * Add Karma as Test Suite
124 | * Add test integration with Jasmine
125 | * Add default markup (#31)
126 | * Add Grunt task to optimize images (#26)
127 | * Move all Grunt tasks into own file
128 | * Add node-matchdep to automatically fetch dependencies
129 | * Add a build step for HTML files (#5)
130 | * Add an option to use templates for content
131 | * Add documentation about how to write modules with Sass
132 | * Add default logo.svg
133 | 
134 | #### Updates
135 | * Update Modernizr to 2.7.0
136 | * Update RequireJS to 2.1.9
137 | * Update to Apache Server Configs v2.0.0
138 | * Update jQuery to 1.10.2
139 | * Update normalize.css to 2.1.2 (removes IE 6 and 7 support)
140 | * Use Sass-Mixins v0.6.0
141 | * Update to Google Universal Analytics
142 | * Update 404 template to latest version from HTML5 Boilerplate
143 | 
144 | #### Removals
145 | * Remove CC for IE7
146 | * Remove Chrome Frame support (#28)
147 | * Use only one Apple Touch Icon
148 | 
149 | #### Other
150 | * Restructre copying of files and dist-folder structure (#11)
151 | * Remove media-query files in favor of inline media-queries
152 | * Add AUTHORS file instead of specifiying it in package.json
153 | * Use a variable for main text color (#30)
154 | * Add .bowerrc configuration file for Bower
155 | * Add folder CSS to .gitignore
156 | 
157 | ### 0.9.1 (04 April 2013)
158 | 
159 | * Add grunt-concurrent to run tasks concurrently (#22)
160 | * Update normalize.css to 1.1.2
161 | * Update jQuery to 1.10.1
162 | 
163 | ### 0.9.0 (18 April 2013)
164 | 
165 | * Add Travis CI
166 | * Include RequireJS
167 | * Rename log.js to console.js
168 | 
169 | ### 0.8.3 (09 April 2013)
170 | 
171 | * Update .htaccess to reflect latest changes
172 | * Remove Google Analytics protocol check (see h5bp/html5-boilerplate#1319)
173 | * Update normalize.css to version 1.1.1
174 | * Update versions of Grunt modules
175 | 
176 | ### 0.8.2 (26 February 2013)
177 | 
178 | * Add node server with grunt-contrib-connect
179 | * Remove WEBrick server
180 | 
181 | ### 0.8.1 (05 February 2013)
182 | 
183 | * Update jQuery to version 1.9.1 including source map
184 | 
185 | ### 0.8.0 (27 January, 2013)
186 | 
187 | * Add source-maps for JavaScript files (See #9 and #10)
188 | * Add wildcard option for jQuery version (#8)
189 | 
190 | ### 0.7.0 (21 January, 2013)
191 | 
192 | * Improve log.js removing function name for noop
193 | * Update favion to lastest with HiDPI version
194 | * Update jQuery to version 1.9.0 including source map
195 | * Update to lastest styles from HTML5 Boilerplate
196 | * Update normalize.css to version 1.1.0
197 | * Update to reflect latest changes in Grunt
198 | 
199 | ### 0.6.0 (06 November, 2012)
200 | 
201 | * Update .htaccess to HTML5 Boilerplate's latest version
202 | * Update log.js to reflect HTML5 BP's latest log stub method
203 | * Update Gruntfile and package.json to work with latest draft of Grunt 0.4.0
204 | 
205 | ### 0.5.0 (26 September, 2012)
206 | 
207 | * Rename production-package to "dist"
208 | * Update jQuery to 1.8.2
209 | * Add grunt-modernizr task
210 | * Add .jshintrc file
211 | * Add CONTRIBUTING.md file
212 | 
213 | ### 0.4.0 (10 September, 2012)
214 | 
215 | * Add Changelog
216 | * Update jQuery and Modernizr to latest versions
217 | * Update .editorconfig with more options
218 | * Update humans.txt file
219 | 
220 | ### 0.3.0 (23 August, 2012)
221 | 
222 | * Update normalize.css to 1.0.1, image-replacement, docs and other stuff to
223 | 	reflect HTML5 Boilerplate 4.0.0 structure better
224 | 
225 | ### 0.2.0 (26 July, 2012)
226 | 
227 | * Include a Grunt-task for HTML-validation
228 | * Add seperate Grunt-tasks for development and production
229 | 
230 | ### 0.1.0 (9 July, 2012)
231 | 
232 | * Include HTML5 Boilerplate
233 | * Add .editorconfig file
234 | * Include SCSS-file-structure
235 | * Add initial Gruntfile.js and package.json
236 | * Include MIT License
237 | * Include ruby-server
238 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to init
 2 | 
 3 | If you got something that's worth including into the project please
 4 | [submit a Pull Request](https://github.com/use-init/init/issues) or
 5 | [open an issue](https://github.com/use-init/init/issues) for further discussion.
 6 | 
 7 | [@necolas](https://github.com/necolas)
 8 | [wrote down some good guidelines](https://github.com/necolas/issue-guidelines)
 9 | for contributing to his projects. Please keep these in mind when contributing to
10 | this project. <3
11 | 
12 | Please use the `.editorconfig`-file in order to set the right usage of
13 | tabs/spaces in your editor. Visit [editorconfig.org](http://editorconfig.org/)
14 | for more information.
15 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * General Grunt setup
  3 |  */
  4 | 'use strict';
  5 | 
  6 | var deepExtend = require('deep-extend');
  7 | var loadGruntConfig = require('./grunt/load-grunt-config');
  8 | 
  9 | /*
 10 |  * Call Grunt configuration
 11 |  */
 12 | module.exports = function (grunt) {
 13 | 
 14 |   // Measure time of grunt tasks
 15 |   require('time-grunt')(grunt);
 16 | 
 17 |   /**
 18 |    * Configuration: All data from package.json, grunt/options and
 19 |    * grunt/plugins
 20 |    */
 21 |   var config = deepExtend({
 22 |       pkg: require('./package')
 23 |     },
 24 |     loadGruntConfig('grunt/options'),
 25 |     loadGruntConfig('grunt/plugins')
 26 |   );
 27 | 
 28 |   // Load project configuration
 29 |   grunt.initConfig(config);
 30 | 
 31 |   // Load all npm tasks through jit-grunt (all tasks from node_modules)
 32 |   require('jit-grunt')(grunt);
 33 | 
 34 |   // Load your own tasks
 35 |   grunt.task.loadTasks('./grunt/tasks');
 36 | 
 37 |   /**
 38 |    * A task to generate pages
 39 |    */
 40 |   // Tasks for generating static pages
 41 |   grunt.registerTask('pages:dev', [
 42 |     'concat',
 43 |     'replace:dev',
 44 |     'clean:temp'
 45 |   ]);
 46 | 
 47 |   grunt.registerTask('pages:build', [
 48 |     'concat',
 49 |     'replace:build',
 50 |     'clean:temp'
 51 |   ]);
 52 | 
 53 |   /**
 54 |    * A task for development
 55 |    */
 56 |   grunt.registerTask('serve', ['connect:serve', 'watch']);
 57 | 
 58 |   grunt.registerTask('dev', [
 59 |     'jshint',
 60 |     'jscs',
 61 |     'pleeease:dev',
 62 |     'copy',
 63 |     'replace:htaccess',
 64 |     'browserify:dev',
 65 |     'pages:dev'
 66 |   ]);
 67 | 
 68 |   // Default task
 69 |   grunt.registerTask('default', ['dev']);
 70 | 
 71 |   /**
 72 |    * A task for building your pages
 73 |    */
 74 |   grunt.registerTask('build', [
 75 |     'jshint',
 76 |     'jscs',
 77 |     'modernizr:build',
 78 |     'pleeease:build',
 79 |     'imagemin',
 80 |     'copy',
 81 |     'replace:htaccess',
 82 |     'browserify:build',
 83 |     'karma:unit',
 84 |     'pages:build'
 85 |   ]);
 86 | 
 87 |   /**
 88 |    * Testing
 89 |    */
 90 |   // A task for testing development code
 91 |   grunt.registerTask('test', [
 92 |     'browserify:test',
 93 |     'karma:unit'
 94 |   ]);
 95 | 
 96 |   grunt.registerTask('test:all', [
 97 |     'karma:all'
 98 |   ]);
 99 | 
100 |   /**
101 |    * Travis CI task
102 |    */
103 |   grunt.registerTask('travis', [
104 |     'jshint',
105 |     'karma:travis'
106 |   ]);
107 | 
108 | };
109 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2013-2015 Hans Christian Reinl, http://drublic.de
 2 | 
 3 | Permission is hereby granted, free of charge, to any person
 4 | obtaining a copy of this software and associated documentation
 5 | files (the "Software"), to deal in the Software without
 6 | restriction, including without limitation the rights to use,
 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
 8 | copies of the Software, and to permit persons to whom the
 9 | Software is furnished to do so, subject to the following
10 | conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # <img src="https://rawgit.com/use-init/init/master/src/logo.svg" alt="INIT" title="INIT" width="200">
  2 | 
  3 | This project is based upon
  4 | [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate) and adds more
  5 | structure for CSS and JavaScript files, includes build tasks and a whole lot
  6 | more.
  7 | 
  8 | [![Build Status](https://secure.travis-ci.org/use-init/init.svg?branch=master)](http://travis-ci.org/use-init/init)
  9 | [![Dependency Status](https://david-dm.org/use-init/init.svg)](https://david-dm.org/use-init/init)
 10 | [![devDependency Status](https://david-dm.org/use-init/init/dev-status.svg)](https://david-dm.org/use-init/init#info=devDependencies)
 11 | [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
 12 | 
 13 | 
 14 | ## Dependencies
 15 | 
 16 | You will need to install Node.js, if you haven't already.
 17 | 
 18 | After you've set this stuff up please run
 19 | 
 20 | 	$ npm install -g grunt-cli
 21 | 
 22 | This installs the Grunt command line tools.
 23 | Afterwards please run
 24 | 
 25 | 	$ npm install
 26 | 
 27 | in your project's directory.
 28 | This will install all the things you need for running the grunt-tasks
 29 | automatically.
 30 | 
 31 | ### Troubleshooting
 32 | 
 33 | If running the install does not work, please try running it as with
 34 | admin-rights:
 35 | 
 36 | 	$ sudo npm install -g grunt-cli
 37 | 
 38 | 
 39 | ## Browser support
 40 | 
 41 | * Chrome
 42 | * Firefox 4+
 43 | * Internet Explorer 9+
 44 | * Opera 12+
 45 | * Safari 5+
 46 | 
 47 | 
 48 | ## Yeoman Generator-INIT
 49 | 
 50 | INIT is also available as [Yeoman Generator](http://yeoman.io/generators.html)
 51 | and is called [`generator-init`](https://github.com/use-init/generator-init).
 52 | See the repository for detailed instruction and more information.
 53 | 
 54 | 
 55 | ## Contribute
 56 | 
 57 | Please help making this project better and [contribute](CONTRIBUTING.md) with
 58 | your knowledge.
 59 | 
 60 | 
 61 | ## CSS
 62 | 
 63 | We are use vanilla CSS but enhance the experience using
 64 | [Pleeease](http://pleeease.io/) as a post processor.
 65 | 
 66 | However all `.css`-files are compiled into one file called `main.css` in the
 67 | `dist`-folder. There is a productive-version (means minified), too.
 68 | 
 69 | 
 70 | ## JS
 71 | 
 72 | We use jQuery, Modernizr (custom build via Grunt) and RequireJS.
 73 | 
 74 | Please use JSHint for your JavaScript before you commit. You can use the
 75 | Grunt-task `jshint` for this. It is also integrated in `grunt watch`.
 76 | 
 77 | 
 78 | ## Creating a Build
 79 | 
 80 | Please use [Grunt.js](https://github.com/gruntjs/grunt) for building a
 81 | production-state of a website. The `Gruntfile.js` has tasks for concatenating
 82 | and minifing CSS and JavaScript.
 83 | 
 84 | Additional information on this project is stored in `package.json`.
 85 | 
 86 | 
 87 | ## Development
 88 | 
 89 | This package is developed and maintained by
 90 | [Hans Christian Reinl](http://drublic.de/),
 91 | [Anselm Hannemann](http://helloanselm.com/) and
 92 | [more contributors](https://github.com/use-init/init/graphs/contributors).
 93 | 
 94 | 
 95 | ## Credits
 96 | 
 97 | The INIT logo was designed by Jan von Beckerath at [NIMIUS](http://nimius.net)
 98 | and optimized by [Stefan Nitzsche](http://www.stn.my/).
 99 | 
100 | 
101 | ## License
102 | 
103 | Please be aware of the licenses of each component we use in this project.
104 | Everything else that has been developed by the contributions to this project is
105 | under [MIT License](LICENSE.md).
106 | 


--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-init/init/15280229fd011a2466ed20fe18dfea161338a312/apple-touch-icon.png


--------------------------------------------------------------------------------
/docs/TOC.md:
--------------------------------------------------------------------------------
 1 | # INIT documentation
 2 | 
 3 | ## Getting started
 4 | 
 5 | * [General purpose & Starting Point](usage.md) — Overview of the project contents.
 6 | * [FAQ](faq.md) — Frequently asked questions, along with their answers.
 7 | 
 8 | ## Contents of INIT
 9 | 
10 | * [Toolchain](toolchain.md) — The tools we use: GruntJS, RequireJS and more.
11 | * [HTML5 Boilerplate](html5-boilerplate.md) — More about the famous front-end template.
12 | * [HTML Pages](pages.md) – How to build your HTML markup with INIT.
13 | * [CSS](css.md) — How to use CSS in INIT.
14 | * [JavaScript](js.md) — A guide to the default JavaScript with RequireJS.
15 | * [Build process](grunt.md) - A detailed guide to the GruntJS configs.
16 | * [Testing](tests.md) — How to test your code with INIT.
17 | * [Custom File Concatenation](concat.md) — How to concatenate your files with INIT.
18 | 
19 | ## Extend INIT
20 | 
21 | * [Extend](extend.md) – You know, there are [lots of plugins](http://gruntjs.com/plugins) available for GruntJS.
22 | 


--------------------------------------------------------------------------------
/docs/concat.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # Concatenate files with INIT
 4 | 
 5 | INIT supports concatenation out of the box through
 6 | [`grunt-contrib-concat`](https://github.com/gruntjs/grunt-contrib-concat).
 7 | This is used by default for concatenating your template partials into a working
 8 | prototype / HTML page.
 9 | 
10 | ## Add custom concat tasks
11 | 
12 | You can add custom tasks to concatenate files. Add your custom concatenations to
13 | the config object in [`config.js`](../js/config.js).
14 | 
15 | A sample custom config object could look like:
16 | 
17 | 	concat: {
18 | 		concatFirst: {
19 | 			src: [
20 | 				'js/part1.js',
21 | 				'js/part2.js'
22 | 			],
23 | 			dest: 'concatenatedfile.js'
24 | 		}
25 | 	},
26 | 
27 | The `src` key references your partials that you want to concatenate. The `dest`
28 | key describes the relative path to the result. The path is set relative from
29 | INIT’s root.
30 | 


--------------------------------------------------------------------------------
/docs/css.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | 
 4 | # CSS
 5 | 
 6 | INIT uses [Pleeease](http://pleeease.io/) as a CSS post processor which enables
 7 | you to write straightforward CSS.
 8 | 
 9 | Here are the major selling points:
10 | 
11 | * Pleeease adds prefixes, based on Autoprefixer
12 | * It provides fallbacks for rem unit, CSS3 pseudo-elements notation
13 | * It adds opacity filter for IE8
14 | * It converts CSS shorthand filters to SVG equivalent
15 | * It packs same media-query in one @media rule
16 | * It inlines @import styles
17 | * It minifies the result
18 | * It enables you to use custom properties (variables)
19 | * It has some color functions for you
20 | 
21 | In INIT we modularize our styles in several components.
22 | Most of the files contain some raw styles or example code so you can just view
23 | the files to understand what they are thought for. Surely you can adapt the
24 | files and contents of the files to your own project-style.
25 | 
26 | ## Concatenation
27 | 
28 | As we use several single CSS-files they need to be concatenated for usage in
29 | your project. This is done by the CSS `@import` rule within the
30 | [`src/css/main.css`](../src/css/main.css) file. As you can see you just type the
31 | folder and name of the file to import it. Please be aware that you must use the
32 | path from the root directory.
33 | 
34 | Notice: Don't forget to import a file in `main.css` if you created a new one in
35 | the CSS structure so it will be added to the output file you use in your
36 | project.
37 | 
38 | ## CSS Output
39 | 
40 | You kick-off the post processor with grunt. To continuously generating the CSS
41 | file on every change you do, run:
42 | 
43 | 	grunt watch
44 | 
45 | This runs the `watch` task with grunt which compiles your CSS. The watch task
46 | outputs a non-minified annotated CSS file which is great for development.
47 | 
48 | To get a compressed, production ready CSS file simply run the following command:
49 | 
50 | 	grunt build
51 | 
52 | See the [documentation about grunt](grunt.md) for more information about this
53 | task.
54 | 
55 | ## Preprocessors
56 | 
57 | We believe the CSS platform offers you everything that is needed to craft great
58 | on-line experiences. CSS preprocessors such as LESS or Sass add a lot of value
59 | for programmers. But there are some pain points which we think make it hard to
60 | use these preprocessors.
61 | 
62 | * CSS is meant to be declarative. Preprocessors add a lot of functions to it
63 |   that are not easy to understand and require higher level thinking. Logicless-
64 |   ness makes CSS simple.
65 | * Specificity is often problematic (e.g. with deep nesting).
66 | * People that are not used to one or the other preprocessor are left behind.
67 |   Everyone knows CSS.
68 | 
69 | Our post-processor enables you to use variables (known as custom properties),
70 | color functions and takes care of vendor prefixing.
71 | 


--------------------------------------------------------------------------------
/docs/extend.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # Extend INIT
 4 | 
 5 | ## General
 6 | 
 7 | INIT is built modular so you can extend the project with your own code or plugins.
 8 | As we are using npm and GruntJS it is straight forward to extend the project with existing components.
 9 | 
10 | ## Examples
11 | 
12 | ### Livereload
13 | 
14 | If you use the livereload app to instantly update your page in the browser you can trigger this via GruntJS.
15 | 
16 | In the [`Gruntfile.js`](../Gruntfile.js) add the following code at the bottom of the `grunt.initConfig`:
17 | 
18 | 	grunt.initConfig({
19 | 		// INIT basic tasks
20 | 
21 | 		livereload: {
22 | 			files: ['dist/**/*.css', 'dist/*.html'],
23 | 			options: { livereload: true }
24 | 		}
25 | 	});
26 | 
27 | If the LiveReload helper App is running on your system by now your code should be updated immediately.
28 | 
29 | ### SVG-Min
30 | 
31 | While we are using the imagemin task by default to optimize all your JPG, PNG, GIF images by compressing them losslessly you can do nearly the same for SVG. What you need is the `grunt-svgmin` package.
32 | 
33 | 1. Add the package by simply adding `"grunt-svgmin": "0.2.0"` to the [`package.json`](../package.json) file to the devDependencies.
34 | 2. If to the Command line / Terminal and enter `$ npm install` to install the package
35 | 3. In the [`Gruntfile.js`](../Gruntfile.js) add the following code to the config section on top of the file:
36 | 
37 | 		// SVG files
38 | 		svg: {
39 | 			src: 'img/',
40 | 			dest: 'dist/img/'
41 | 		},
42 | 
43 | 4. In the [`Gruntfile.js`](../Gruntfile.js) add the following code at the bottom of the `grunt.initConfig`:
44 | 
45 | 		grunt.initConfig({
46 | 			// INIT basic tasks
47 | 
48 | 			svgmin: {
49 | 				dist: {
50 | 					files: [{
51 | 						expand: true,
52 | 						cwd: config.svg.src,
53 | 						src: ['**/*.svg'],
54 | 						dest: config.img.dest,
55 | 						ext: 'min.svg'
56 | 					}]
57 | 				}
58 | 			}
59 | 		});
60 | 
61 | If you need more information, please [read the documentation of the plugin](https://github.com/sindresorhus/grunt-svgmin).
62 | 


--------------------------------------------------------------------------------
/docs/faq.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # FAQ
 4 | 
 5 | ## General
 6 | 
 7 | If you need assistance with the INIT project please have a look at the
 8 | [README](../README.md) and documenation ([TOC.md](TOC.md)) first. If you can't
 9 | find a solution there, please
10 | [create an issue on GitHub](https://github.com/use-init/init/issues) and provide
11 | all details necessary to reproduce your problem.
12 | 
13 | ## FAQ
14 | 
15 | ### I am having issues with Grunt aborting the task
16 | 
17 | It is likely [JSHint](http://www.jshint.com/) encountered problems in your code.
18 | Ensure you stick to the [`.jshintrc`](../.jshintrc) configuration (or change it
19 | as you need it) and check again if the JSHint task outputs any warnings or
20 | errors.
21 | 
22 | You might also make sure that all dependencies are installed propertly. Please
23 | [see the Usage section](usage.md) for more information.
24 | 
25 | Also if you added new CSS files ensure you add them not only as files but also
26 | in [`main.css`](../src/css/main.css) as import with the proper name.
27 | 
28 | ### I am getting a warning about `.jshintrc` config.
29 | 
30 | You might have forgotten to copy the hidden files in your working directory.
31 | Ensure you have `.jshintrc`, `.htaccess`, `editorconfig`, `.gitattributes`,
32 | `.gitignore` and `.travis.yml` in the root of your INIT project folder.
33 | 


--------------------------------------------------------------------------------
/docs/grunt.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # GruntJS
 4 | 
 5 | [GruntJS](http://gruntjs.com/) is a task runner in JavaScript. It usually runs
 6 | tasks you need for development and deployment of a web project.
 7 | 
 8 | ## Used Tasks
 9 | 
10 | * [grunt-contrib-jshint](https://github.com/gruntjs/grunt-contrib-jshint) hints your JavaScript code
11 | * [grunt-contrib-clean](https://github.com/gruntjs/grunt-contrib-clean) cleans your build directory before doing a new build
12 | * [grunt-contrib-copy](https://github.com/gruntjs/grunt-contrib-copy) copies files from the development directories into the build directory
13 | * [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) watches files for changes
14 | * [grunt-pleeease](https://github.com/danielhusar/grunt-pleeease) runs the Pleeease task and builds the CSS files
15 | * [grunt-contrib-requirejs](https://github.com/gruntjs/grunt-contrib-requirejs) runs requireJS and builds the JS files
16 | * [grunt-modernizr](https://github.com/Modernizr/grunt-modernizr) builds a custom Modernizr build based on your used tests
17 | * [grunt-contrib-connect](https://github.com/gruntjs/grunt-contrib-connect) runs a static web server with root on your working directory
18 | * [grunt-imageoptim](https://github.com/JamieMason/grunt-imageoptim) optimizes your images
19 | * [grunt-karma](https://github.com/karma-runner/grunt-karma) runs your JS unit-tests in different browsers
20 | 
21 | ## How Grunt works
22 | 
23 | ### [`package.json`](../package.json)
24 | 
25 | This file includes all metadata of a project and the dependency packages. The file is formatted in JSON format.
26 | The first part includes the metadata of the package as well as a link to the repository URL and website.
27 | Following links to the bug reporting tool, license and additional scripts (in our case we use `grunt travis` for example) you can find all dependency packages listed in here with the used versions.
28 | 
29 | ### [`Gruntfile.js`](../Gruntfile.js)
30 | 
31 | The Gruntfile is the configuration and task command file. In there you can first find a configuration of all used components (usually includes the source and target directories where the task should be applied to).
32 | Then you will find a snippet loading all npm-tasks from package.json automatically. This means when you add a package in package.json it will automatically be loaded in the Gruntfile.
33 | 
34 | ### Run Grunt
35 | 
36 | To execute one of the specified grunt-tasks you need to call it on your command
37 | line.
38 | 
39 | 	$ grunt copy
40 | 
41 | ### Development
42 | 
43 | For development you can run Grunt initially once by calling:
44 | 
45 | 	$ grunt
46 | 
47 | To listen continuously to changes you do in files (e.g. CSS) you can type:
48 | 
49 | 	$ grunt watch
50 | 
51 | ### Creating a build
52 | 
53 | As for deployment you want to only have the production files and might want a
54 | different output (e.g. minified and compressed JS and CSS files) there is a
55 | separate task to make a build:
56 | 
57 | 	$ grunt build
58 | 
59 | This generates the assets with the version number specified in [`package.json`](../package.json).
60 | 


--------------------------------------------------------------------------------
/docs/html.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # HTML
 4 | 
 5 | The HTML structure is mainly based on the famous [HTML5 Boilerplate](http://html5boilerplate.com/). While we use this as a base for our markup we add several things including a default markup for your page layout. This is very simple and it is strongly recommended to adapt this markup to your fits.
 6 | 
 7 | ## Legacy Internet Explorer
 8 | 
 9 | To inform users of older Internet Explorers for which the project has not been optimized anymore we provide a Conditional Comment (by default targeting users of IE8 and lower) with a nice little toolbar appearing on top of your website. You are free to adapt this element via changing the text in the markup or adjusting the style via the [`.browsehappy` CSS class](../src/css/layout/base.css#L:85).
10 | 
11 | To target specific older Internet Explorer versions (up to IE9) you can use Conditional Comments and CSS.
12 | Please refer to the legazy method in HTML5 Boilerplate. Please find the change set [here](https://github.com/kcmckell/html5-boilerplate/commit/6c08acd549efd3c166af5369adedf296b22c9c4d).
13 | 
14 | ## `<head>` Explanations
15 | 
16 | In the `<head>` section we included some default markup which you might want to extend. Here are some tipps about what is added and what you can do.
17 | 
18 | ### Viewport
19 | 
20 | This statement forces the browser to adjust the viewport saying your website is optimized for all devices (Responsive Webdesign).
21 | 
22 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
23 | 
24 | The property `initial-scale=1` is needed for iOS devices forcing the layout to be displayed unscaled. In rare cases you might want to add the property `user-scalable=no` which we strongly do not recommend to use if unless you really know what you are doing and have tested this.
25 | 
26 | ### WebFonts
27 | 
28 | We do not include a webfont integration by default. You can do this by either including it via CSS ([@font-face]()), via external CSS file or via asynchronous JavaScript in the head section.
29 | 
30 | ## DNS Prefetching
31 | 
32 | We strongly encourage you to make use of DNS prefetching for all requests you do. This in modern browsers is simply done by adding a meta tag:
33 | 
34 | 	<link rel="dns-prefetch" href="//yourdomain.com">
35 | 	<link rel="dns-prefetch" href="//use.typekit.net">
36 | 
37 | This indicates to the browser that you will make a request somewhere in your HTML, CSS or JavaScript to one of the listes domains. The protocol does not matter as we let the browser fetch the DNS headers itself for both, http and https protocols. This feature can improve performance a lot.
38 | 
39 | ## Header
40 | 
41 | We provide a header markup including a `<h1>` tag for your title (can be a logo, too) and a menu via the `<nav>` tag. For accessibility we added some roles, `role="banner"` for the title and `role="navigation"` for the menu.
42 | 
43 | ## Main
44 | 
45 | The `<main>` element is the wrapper element for your main content. It also has for accessibility reason the provided ARIA `role="main"`. We don't provide any more structure inside this element.
46 | 
47 | ## Footer
48 | 
49 | A footer is also provided for your copyright notice and additional links on your website.
50 | 
51 | ## JavaScript
52 | 
53 | JavaScript is included in three parts for several reasons explained below.
54 | 
55 | **Modernizr** is added in the `<head>` section of the HTML file as this needs to be executed as soon as possible to be applied to the DOM before the user actually sees the page.
56 | 
57 | **main.js** is our concatenated JS-file we add at the bottom of the HTML-markup just before the closing `</body>` tag. This prevents that loading the JavaScript file blocks the page from rendering in the browser and it is strongly recommended to do it that way.
58 | 
59 | **Inline JavaScript**: Google Analytics is inlined JavaScript placed right after our main.js file and right before the closing body tag. Analytics services should be included inline to ensure they will be executed and don't need an additional request which could fail on messy internet connections.
60 | 


--------------------------------------------------------------------------------
/docs/html5-boilerplate.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # HTML5 Boilerplate documentation
 4 | 
 5 | Please refer to the official [documentation](//github.com/h5bp/html5-boilerplate/blob/master/doc/TOC.md)
 6 | for more information about [HTML5 Boilerplate](http://html5boilerplate.com).
 7 | 
 8 | ## Getting started
 9 | 
10 | * [Usage](//github.com/h5bp/html5-boilerplate/blob/master/dist/doc/usage.md) — Overview of the project contents.
11 | * [FAQ](//github.com/h5bp/html5-boilerplate/blob/master/dist/doc/faq.md) — Frequently asked questions, along with their answers.
12 | 
13 | ## The core of HTML5 Boilerplate
14 | 
15 | * [HTML](//github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md) — A guide to the default HTML.
16 | * [CSS](//github.com/h5bp/html5-boilerplate/blob/master/dist/doc/css.md) — A guide to the default CSS.
17 | * [JavaScript](//github.com/h5bp/html5-boilerplate/blob/master/dist/doc/js.md) — A guide to the default JavaScript.
18 | * [.htaccess](//github.com/h5bp/server-configs-apache/blob/master/dist/.htaccess)
19 |   — All about the Apache web server configs (also see our [alternative server
20 |   configs](//github.com/h5bp/server-configs/blob/master/README.md)).
21 | * [crossdomain.xml](//github.com/h5bp/html5-boilerplate/blob/master/dist/doc/misc.md#crossdomainxml) — An introduction to making use of
22 |   crossdomain requests.
23 | * [Everything else](//github.com/h5bp/html5-boilerplate/blob/master/dist/doc/misc.md).
24 | 
25 | ## Development
26 | 
27 | * [Extending and customizing HTML5 Boilerplate](//github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md) — Going further with
28 |   the boilerplate.
29 | 


--------------------------------------------------------------------------------
/docs/js.md:
--------------------------------------------------------------------------------
1 | [&laquo; back to Table of Contents](TOC.md)
2 | 
3 | ## How you can write JavaScript
4 | 
5 | In [`js/modules/modules.js`](../js/modules/module.js) you will find an example
6 | module written as an ES6 module with RequireJS.
7 | 


--------------------------------------------------------------------------------
/docs/pages.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # Build HTML pages with INIT
 4 | 
 5 | We use [the concat task](concat.md) to stack pages together. In the `src`
 6 | folder we have the `templates` and the `modules` folder which can contain
 7 | markup that you want to use for a page.
 8 | 
 9 | The `template` folder usually contains the frame of the page which stacks
10 | modules together. All modular code (i.e. a navigation, footer, sidebar or
11 | teaser) should be in the `modules`' own folder as HTML partial.
12 | 
13 | To build a proper structure you need to configure your page file (usually
14 | known) as ‘template’. In INIT this configuration is done in the
15 | [`pages.json`](../pages.json) file. Add the partials you want to use in the
16 | proper order and comma-separated into the `src` array.
17 | 
18 | For multiple pages extend the JSON by adding another object (which means page)
19 | to it.
20 | 


--------------------------------------------------------------------------------
/docs/tests.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # Testing Workflow
 4 | 
 5 | We provide tools and helpers for a testing workflow based on Grunt.
 6 | 
 7 | * JSHint – for checking syntax of JavaScript code
 8 | * Jasmine - for unit testing
 9 | * Karma - for running unit tests cross browser
10 | 
11 | All testing frameworks run with GruntJS.
12 | 
13 | All JavaScript files should be checked with JSHint for syntax errors before committing them.
14 | 
15 | ## Running tests
16 | You can run tests by using the Grunt implementation. Just run `$ grunt connect:test karma:test` to run all tests with Karma.
17 | 
18 | For a less extensive unit test with PhantomJS use `$ grunt connect:test karma:unit`.
19 | 
20 | ## How to set up a Jasmine Test suite
21 | Please refer to the [Writing Tests](writing-tests.md) documentation.
22 | 
23 | ### Coverage
24 | Karma tests include a coverage report within the console.
25 | 
26 | ### Testing production code
27 | There is a test for all production code produced via Grunt with Karma. You can run `$ grunt test` to build a production version of your code, the Jasmine tests as a build with r.js and run them against the production package.
28 | 


--------------------------------------------------------------------------------
/docs/toolchain.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # Toolchain
 4 | 
 5 | We use a couple of tools that help us write better code:
 6 | 
 7 | * npm
 8 | * Grunt
 9 | * RequireJS
10 | * Karma (with Jasmine)
11 | 
12 | ## npm
13 | [npm](https://www.npmjs.org/) is a package management utility provided by bower. We use it to load all front-end and development dependencies for our projects.
14 | You can easily install more components. Please refer to npm's docs for more information.
15 | 
16 | ## Grunt
17 | [Grunt](http://gruntjs.com/) is a build tool. We use a couple of tasks to help us build a production-ready version of our code. Please read more about our usage of Grunt [in the according doc](grunt.md).
18 | 
19 | ## RequireJS
20 | [RequireJS](http://requirejs.org/) is a JavaScript module loader that helps your organize your dependency-management within JavaScript.
21 | 
22 | ## Karma
23 | [Karma](http://karma-runner.github.io/) is a testrunner, running JavaScript unit tests in different browsers. INIT makes use of Karma with [Jasmine](http://jasmine.github.io/) as testing library. Please also see [_How to write tests_](writing-tests.md) for more information.
24 | 


--------------------------------------------------------------------------------
/docs/usage.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # General Purpose
 4 | 
 5 | Init is a project based upon HTML5 Boilerplate. It adds more structure to your
 6 | CSS and JavaScript files and helps you start your project faster by reducing
 7 | boilerplate code and tasks.
 8 | 
 9 | Init includes build tasks for your projects, proivdes a test infrastructure and
10 | implements tools to help you creating web pages and apps fast.
11 | 
12 | # Starting Point
13 | 
14 | When starting a new project with init you will need to make sure to install some
15 | dependencies if you haven't already.
16 | 
17 | ## Clone the project
18 | 
19 | 	$ git clone git@github.com:use-init/init.git
20 | 
21 | This will create a local clone of INIT in a subfolder called 'init' in the
22 | directory you choose before in the command line. You can rename the folder name.
23 | 
24 | ## Dependencies
25 | 
26 | * Node.js
27 | 
28 | Apart from that we make use of GruntJS and you might want to install it globally via:
29 | 
30 | 	$ npm i -g grunt-cli
31 | 
32 | Now we need to install the GruntJS modules we want to use within the project and the components that are predefined:
33 | 
34 | 	$ npm i
35 | 
36 | It will create a directory called `node_modules` with the dependencies for our Grunt tasks and Front-End components.
37 | 
38 | ### Troubleshooting
39 | 
40 | If running the install does not work, please try running it as admin:
41 | 
42 | 	$ sudo npm install -g grunt-cli
43 | 
44 | You'll need to enter your admin password.
45 | 


--------------------------------------------------------------------------------
/docs/writing-tests.md:
--------------------------------------------------------------------------------
 1 | [&laquo; back to Table of Contents](TOC.md)
 2 | 
 3 | # Writing JavaScript Unit Tests
 4 | 
 5 | INIT relies on [the library Jasmine version 2](http://jasmine.github.io/) for
 6 | writing JavaScript unit tests. Please see [the full
 7 | documentation](http://jasmine.github.io/2.2/introduction.html) for more
 8 | information on how to use Jasmine.
 9 | 
10 | Jasmine is utilized by Karma which runs all unit tests across different
11 | browsers. You can find Karma's configuration within the `karma.conf.js` file in
12 | `grunt/`.
13 | 
14 | There are three different tasks of interested to run with Grunt:
15 | 
16 | * `grunt test`: Runs all unit tests on a PhantomJS instance. This is meant to be
17 |   the default task for developers to use when running unit tests. You can also
18 |   use the slightly longer but more specific `karma:unit`.
19 | * `grunt test:all`: Runs instances of PhantomJS, Chrome, Safari and Firefox and
20 |   executes your tests. This is an alias for `karma:all`.
21 | * `grunt karma:travis`: Runs all unit tests on a PhantomJS and a Firefox
22 |   instance. Meant to be used with [Travis CI](https://travis-ci.org/).
23 | 
24 | ## Adding a test suite
25 | 
26 | In general you want to write a test suite for each module you write. You can do
27 | this by following this steps:
28 | 
29 | * If you haven't created the module within `src/modules/` yet, do so now.
30 | * Add a file `modulename.spec.js` within `src/modles/modulename/` by copying
31 |   over `module.spec.js` and removing unnecessary stuff.
32 | * Adjust the module import statement to include the module you want to test.
33 | * Add `modulename.spec.js` as `../modules/modulename/modulename.spec.js` in
34 |   `test/main.js` as JS module import.
35 | * Call the created module via `new Modulename()` in `test-main.js`.
36 | * Run tests to ensure everything works just as you expect it.
37 | 
38 | ## Utility
39 | 
40 | There is a utility flag `window.__test` which is set to `true` if you run tests
41 | using Karma. This can come in handy if you want to make a private API testable.
42 | 


--------------------------------------------------------------------------------
/grunt/config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Grunt configuration
 3 |  */
 4 | 'use strict';
 5 | 
 6 | module.exports = {
 7 | 
 8 |   srcDir: 'src/',
 9 |   destDir: 'dist/',
10 | 
11 |   // JavaScript files
12 |   js: {
13 |     files: [
14 |       'src/js/**/*.js',
15 |       'src/modules/**/*.js'
16 |     ],
17 | 
18 |     // All files that should be checked with JSHint
19 |     hintFiles: [
20 |       'Gruntfile.js',
21 |       'src/**/*.js',
22 |       '!src/dist/**/*.js',
23 |       'test/*.js'
24 |     ],
25 | 
26 |     dev: {
27 |       entry: 'src/js/main.js',
28 |       dest: 'src/dist/index.js'
29 |     },
30 |     build: {
31 |       entry: 'src/js/main.js',
32 |       dest: 'dist/<%= pkg.version %>/main.min.js',
33 |     },
34 |     test: {
35 |       entry: 'test/main.js',
36 |       dest: 'test/dist/test.js',
37 |     },
38 |     libs: [
39 |       'node_modules/grunt-modernizr/lib/modernizr-dev.js'
40 |     ]
41 |   },
42 | 
43 |   // CSS files
44 |   css: {
45 |     files: [
46 |       'src/css/**/*.css'
47 |     ],
48 |     src: 'src/css/main.css',
49 |     devDest: 'src/dist/main.css',
50 |     dest: 'dist/<%= pkg.version %>/main.min.css'
51 |   },
52 | 
53 |   // Modernizr files
54 |   modernizr: {
55 |     dev: 'node_modules/grunt-modernizr/lib/modernizr-dev.js',
56 |     devDest: 'dist/js/modernizr.js',
57 |     dest: 'dist/<%= pkg.version %>/modernizr.min.js'
58 |   },
59 | 
60 |   // Images
61 |   img: {
62 |     src: 'src/img/',
63 |     dest: 'dist/img/'
64 |   },
65 | 
66 |   // Apache Server Configs
67 |   htaccess: {
68 |     src: 'node_modules/apache-server-configs/dist/.htaccess',
69 |     dest: 'dist/.htaccess',
70 |   },
71 | 
72 |   tests: {
73 |     specs: [
74 |       'src/modules/**/*spec.js'
75 |     ],
76 |     coverage: 'test/coverage/'
77 |   },
78 | 
79 |   // Versioned references
80 |   replace: {
81 |     build: {
82 |       src: 'temp/**/*.html',
83 |       dest: 'dist/',
84 |       maincss: '<%= pkg.version %>/main.min.css',
85 |       modernizr: '<%= pkg.version %>/modernizr.min.js',
86 |       mainjs: '<script src="<%= pkg.version %>/main.min.js"></script>'
87 |     },
88 | 
89 |     dev: {
90 |       src: 'temp/**/*.html',
91 |       dest: 'src/',
92 |       maincss: 'dist/main.css',
93 |       modernizr: '../node_modules/grunt-modernizr/lib/modernizr-dev.js',
94 |       mainjs: '<script src="dist/index.js"></script>'
95 |     }
96 |   }
97 | };
98 | 


--------------------------------------------------------------------------------
/grunt/karma.conf.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Default configuration for Karma
 3 |  */
 4 | 'use strict';
 5 | 
 6 | // Get configuration of project to get correct files to include
 7 | var projectConfig = require('./config');
 8 | 
 9 | /**
10 |  * Get all files to include in Karma tests
11 |  * @return {Array} Array of all files to include
12 |  */
13 | var getIncludeFiles = function () {
14 |   var files = [];
15 | 
16 |   // Add JavaScript libs
17 |   var filePatterns = projectConfig.js.libs;
18 | 
19 |   // Add tests
20 |   filePatterns.push(projectConfig.js.test.dest);
21 | 
22 |   // Iterate through files
23 |   filePatterns.forEach(function (element) {
24 |     files.push({
25 |       pattern: element,
26 |       included: true
27 |     });
28 |   });
29 | 
30 |   return files;
31 | };
32 | 
33 | /**
34 |  * Exports as Karma configuration
35 |  */
36 | module.exports = function (config) {
37 |   config.set({
38 |     basePath: '../',
39 | 
40 |     singleRun: true,
41 |     colors: true,
42 |     captureTimeout: 7000,
43 | 
44 |     frameworks: ['jasmine'],
45 |     reporters: ['progress'],
46 | 
47 |     plugins: [
48 |       'karma-jasmine',
49 |       'karma-chrome-launcher',
50 |       'karma-firefox-launcher',
51 |       'karma-safari-launcher',
52 |       'karma-phantomjs-launcher'
53 |     ],
54 | 
55 |     logLevel: config.LOG_INFO,
56 | 
57 |     // List of files to load in the browser
58 |     files: getIncludeFiles()
59 |   });
60 | };
61 | 
62 | 


--------------------------------------------------------------------------------
/grunt/load-grunt-config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Load grunt configuration
 3 |  */
 4 | 'use strict';
 5 | 
 6 | /**
 7 |  * Load configuration files for Grunt
 8 |  * @param  {string} path Path to folder with tasks
 9 |  * @return {object}      All options
10 |  */
11 | module.exports = function (path) {
12 |   var glob = require('glob');
13 |   var object = {};
14 |   var key;
15 | 
16 |   glob.sync('*', { cwd: path }).forEach(function (option) {
17 |     key = option.replace(/\.js$/,'');
18 |     object[key] = require('../' + path + '/' + option);
19 |   });
20 | 
21 |   return object;
22 | };
23 | 


--------------------------------------------------------------------------------
/grunt/options/browserify.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Require JS configuration
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | var devFiles = {};
 8 | var buildFiles = {};
 9 | var testFiles = {};
10 | 
11 | devFiles[config.js.dev.dest] = config.js.dev.entry;
12 | buildFiles[config.js.build.dest] = config.js.dev.entry;
13 | testFiles[config.js.test.dest] = config.js.test.entry;
14 | 
15 | module.exports = {
16 |   options: {
17 |     transform: ['babelify']
18 |   },
19 | 
20 |   dev: {
21 |     files: devFiles
22 |   },
23 | 
24 |   build: {
25 |     files: buildFiles
26 |   },
27 | 
28 |   test: {
29 |     files: testFiles
30 |   }
31 | };
32 | 


--------------------------------------------------------------------------------
/grunt/options/clean.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * Remove stuff
3 |  */
4 | 'use strict';
5 | 
6 | module.exports = {
7 |   temp: ['temp']
8 | };
9 | 


--------------------------------------------------------------------------------
/grunt/options/concat.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Concatenate pages
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var deepExtend = require('deep-extend');
 7 | var pages = require('../../pages');
 8 | var config = require('../config');
 9 | var pageName;
10 | var pagePath;
11 | 
12 | // Extend the pages object with the destination path of the page
13 | for (pageName in pages) {
14 |   pagePath = 'temp/' + pageName + '.html';
15 | 
16 |   deepExtend(pages[pageName], { 'dest': pagePath });
17 | }
18 | 
19 | module.exports = deepExtend(pages, config.concat || {});
20 | 


--------------------------------------------------------------------------------
/grunt/options/connect.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Server config
 3 |  */
 4 | 'use strict';
 5 | 
 6 | module.exports = {
 7 |   server: {
 8 |     options: {
 9 |       port: 9001,
10 |       keepalive: true
11 |     }
12 |   },
13 | 
14 |   prod: {
15 |     options: {
16 |       port: 8080,
17 |       keepalive: true,
18 |       base: 'dist'
19 |     }
20 |   },
21 | 
22 |   serve: {
23 |     options: {
24 |       port: 10001,
25 |       open: {
26 |         target: 'http://localhost:10001/src/'
27 |       },
28 |       livereload: true
29 |     }
30 |   }
31 | };
32 | 


--------------------------------------------------------------------------------
/grunt/options/copy.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copy task
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | 
 8 | module.exports = {
 9 |   js: {
10 |     files: [{
11 |       src: config.js.files,
12 |       dest: config.destDir
13 |     }]
14 |   },
15 |   root: {
16 |     files: [{
17 |       expand: true,
18 |       cwd: config.srcDir,
19 |       src: [
20 |         '*.{png,xml,ico,svg,txt}',
21 |       ],
22 |       dest: config.destDir
23 |     }]
24 |   }
25 | };
26 | 


--------------------------------------------------------------------------------
/grunt/options/imagemin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Lossless image optimization
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | 
 8 | module.exports = {
 9 |   images: {
10 |     options: {
11 |       optimizationLevel: 5
12 |     },
13 |     files: [{
14 |       expand: true,
15 |       cwd: config.img.src,
16 |       src: ['**/*.{png,jpg,gif}'],
17 |       dest: config.img.dest
18 |     }]
19 |   }
20 | };
21 | 


--------------------------------------------------------------------------------
/grunt/options/jscs.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Configure JSCS task
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | 
 8 | module.exports = {
 9 |   js: {
10 |     src: config.js.hintFiles,
11 |     options: {
12 |       config: '.jscsrc'
13 |     }
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/grunt/options/jshint.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * JSHint taks configuration
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | 
 8 | module.exports = {
 9 | 
10 |   // All files from config
11 |   all: config.js.hintFiles,
12 | 
13 |   options: {
14 | 
15 |     // Add JSHintRC file with options
16 |     jshintrc: '.jshintrc'
17 |   }
18 | };
19 | 


--------------------------------------------------------------------------------
/grunt/options/karma.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Configuration for Karma test-runner
 3 |  */
 4 | 'use strict';
 5 | 
 6 | module.exports = {
 7 |   options: {
 8 |     configFile: 'grunt/karma.conf.js'
 9 |   },
10 | 
11 |   // Testing in all browsers
12 |   all: {
13 |     options: {
14 | 
15 |       // Start these browsers
16 |       browsers: ['Chrome', 'Firefox', 'Safari', 'PhantomJS']
17 |     }
18 |   },
19 | 
20 |   // PhantomJS
21 |   unit: {
22 |     options: {
23 |       browsers: ['PhantomJS']
24 |     }
25 |   },
26 | 
27 |   // Travis
28 |   travis: {
29 |     options: {
30 | 
31 |       // Use Phantom and Firefox for Travis
32 |       browsers: ['PhantomJS', 'Firefox']
33 |     }
34 |   }
35 | };
36 | 


--------------------------------------------------------------------------------
/grunt/options/modernizr.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Build Modernizr
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | 
 8 | module.exports = {
 9 |   build: {
10 |     devFile: config.modernizr.dev,
11 |     outputFile: config.modernizr.dest,
12 | 
13 |     extra: {
14 |       shiv: true,
15 |       mq: true
16 |     },
17 | 
18 |     // Minify
19 |     uglify: true,
20 | 
21 |     // Files from configuration
22 |     files: {
23 |       src: config.js.files.concat(config.css.files)
24 |     }
25 |   }
26 | };
27 | 


--------------------------------------------------------------------------------
/grunt/options/pleeease.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * CSS
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | 
 8 | /*
 9 |  * Helper
10 |  */
11 | var helper = {};
12 | 
13 | helper.cssDev = {};
14 | helper.cssDev[config.css.devDest] = config.css.src;
15 | 
16 | helper.cssProd = {};
17 | helper.cssProd[config.css.dest] = config.css.src;
18 | 
19 | module.exports = {
20 | 
21 |   // For development
22 |   dev: {
23 |     options: {
24 |       minifier: false,
25 |       next: {
26 |         customProperties: true,
27 |         colors: true
28 |       },
29 |       sourcemaps: true
30 |     },
31 | 
32 |     files: helper.cssDev
33 |   },
34 | 
35 |   // For production
36 |   build: {
37 |     options: {
38 |       next: {
39 |         customProperties: true,
40 |         colors: true
41 |       },
42 |       sourcemaps: true
43 |     },
44 | 
45 |     files: helper.cssProd
46 |   }
47 | };
48 | 


--------------------------------------------------------------------------------
/grunt/options/replace.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * File versioning in build process
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | 
 8 | module.exports = {
 9 |   build: {
10 |     options: {
11 |       patterns: [{
12 |         match: 'maincss',
13 |         replacement: config.replace.build.maincss
14 |       }, {
15 |         match: 'modernizr',
16 |         replacement: config.replace.build.modernizr
17 |       }, {
18 |         match: 'mainjs',
19 |         replacement: config.replace.build.mainjs
20 |       }]
21 |     },
22 | 
23 |     files: [{
24 |       expand: true,
25 |       flatten: true,
26 |       src: config.replace.build.src,
27 |       dest: config.replace.build.dest,
28 |     }]
29 |   },
30 | 
31 |   dev: {
32 |     options: {
33 |       patterns: [{
34 |         match: 'maincss',
35 |         replacement: config.replace.dev.maincss
36 |       }, {
37 |         match: 'modernizr',
38 |         replacement: config.replace.dev.modernizr
39 |       }, {
40 |         match: 'mainjs',
41 |         replacement: config.replace.dev.mainjs
42 |       }]
43 |     },
44 | 
45 |     files: [{
46 |       expand: true,
47 |       flatten: true,
48 |       src: config.replace.dev.src,
49 |       dest: config.replace.dev.dest
50 |     }]
51 |   },
52 | 
53 |   // The following will copy the `.htaccess` file provided by the
54 |   // Apache Server Configs project in the specified `dest` directory,
55 |   // but will also uncomment the `ErrorDocument 404 /404.html` line
56 |   // so that Apache will serve the custom `404.html` page in case of
57 |   // a 404 error.
58 |   htaccess: {
59 |     options: {
60 |       patterns: [{
61 |         match: /# ErrorDocument/g,
62 |         replacement: function () {
63 |           return 'ErrorDocument';
64 |         }
65 |       }]
66 |     },
67 |     files: [{
68 |       src: config.htaccess.src,
69 |       dest: config.htaccess.dest
70 |     }]
71 |   }
72 | };
73 | 


--------------------------------------------------------------------------------
/grunt/options/watch.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Watching for changes
 3 |  */
 4 | 'use strict';
 5 | 
 6 | var config = require('../config');
 7 | 
 8 | module.exports = {
 9 |   css: {
10 |     files: config.css.files,
11 |     tasks: 'pleeease:dev',
12 |     atBegin: true
13 |   },
14 | 
15 |   js: {
16 |     files: [config.js.hintFiles, config.tests.specs],
17 |     tasks: ['jshint', 'jscs', 'karma:unit']
18 |   },
19 | 
20 |   livereload: {
21 |     options: {
22 |       livereload: true
23 |     },
24 |     files: config.css.files
25 |   }
26 | };
27 | 


--------------------------------------------------------------------------------
/grunt/plugins/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-init/init/15280229fd011a2466ed20fe18dfea161338a312/grunt/plugins/.gitignore


--------------------------------------------------------------------------------
/grunt/tasks/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-init/init/15280229fd011a2466ed20fe18dfea161338a312/grunt/tasks/.gitignore


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "init",
 3 |   "title": "INIT",
 4 |   "description": "INIT is an initial boilerplate for front-end projects",
 5 |   "version": "2.0.0",
 6 |   "homepage": "https://github.com/use-init/init",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "git://github.com/use-init/init.git"
10 |   },
11 |   "bugs": {
12 |     "url": "https://github.com/use-init/init/issues"
13 |   },
14 |   "license": "MIT",
15 |   "engines": {
16 |     "node": ">=0.10"
17 |   },
18 |   "dependencies": {
19 |     "apache-server-configs": "2.14.0",
20 |     "jquery": "2.1.4",
21 |     "normalize.css": "3.0.3"
22 |   },
23 |   "devDependencies": {
24 |     "babelify": "^6.4.0",
25 |     "deep-extend": "^0.4.0",
26 |     "glob": "6.0.1",
27 |     "grunt": "0.4.5",
28 |     "grunt-browserify": "^3.8.0",
29 |     "grunt-contrib-clean": "0.7.0",
30 |     "grunt-contrib-concat": "0.5.1",
31 |     "grunt-contrib-connect": "0.11.2",
32 |     "grunt-contrib-copy": "0.8.2",
33 |     "grunt-contrib-imagemin": "1.0.0",
34 |     "grunt-contrib-jshint": "0.11.3",
35 |     "grunt-contrib-watch": "0.6.1",
36 |     "grunt-jscs": "^2.3.0",
37 |     "grunt-karma": "0.12.1",
38 |     "grunt-modernizr": "0.6.1",
39 |     "grunt-pleeease": "^1.4.0",
40 |     "grunt-replace": "0.11.0",
41 |     "jit-grunt": "^0.9.1",
42 |     "karma": "0.13.15",
43 |     "karma-chrome-launcher": "0.2.1",
44 |     "karma-firefox-launcher": "0.1.7",
45 |     "karma-html2js-preprocessor": "0.1.0",
46 |     "karma-jasmine": "0.3.6",
47 |     "karma-phantomjs-launcher": "0.2.1",
48 |     "karma-safari-launcher": "0.1.1",
49 |     "karma-script-launcher": "0.1.0",
50 |     "time-grunt": "1.2.2"
51 |   },
52 |   "keywords": []
53 | }
54 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "index": {
 3 |     "src": [
 4 |       "src/templates/header.html",
 5 |       "src/templates/index.html",
 6 |       "src/modules/module/module.html",
 7 |       "src/templates/footer.html"
 8 |     ]
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/404.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Page Not Found</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <style>
 8 | 
 9 |     * {
10 |       line-height: 1.2;
11 |       margin: 0;
12 |     }
13 | 
14 |     html {
15 |       color: #888;
16 |       display: table;
17 |       font-family: sans-serif;
18 |       height: 100%;
19 |       text-align: center;
20 |       width: 100%;
21 |     }
22 | 
23 |     body {
24 |       display: table-cell;
25 |       vertical-align: middle;
26 |       margin: 2em auto;
27 |     }
28 | 
29 |     h1 {
30 |       color: #555;
31 |       font-size: 2em;
32 |       font-weight: 400;
33 |     }
34 | 
35 |     p {
36 |       margin: 0 auto;
37 |       width: 280px;
38 |     }
39 | 
40 |     @media only screen and (max-width: 280px) {
41 | 
42 |       body, p {
43 |         width: 95%;
44 |       }
45 | 
46 |       h1 {
47 |         font-size: 1.5em;
48 |         margin: 0 0 0.3em;
49 |       }
50 | 
51 |     }
52 | 
53 |   </style>
54 | </head>
55 | <body>
56 |   <h1>Page Not Found</h1>
57 |   <p>Sorry, but the page you were trying to view does not exist.</p>
58 | </body>
59 | </html>
60 | <!-- IE needs 512+ bytes: http://blogs.msdn.com/b/ieinternals/archive/2010/08/19/http-error-pages-in-internet-explorer.aspx -->
61 | 


--------------------------------------------------------------------------------
/src/apple-touch-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-init/init/15280229fd011a2466ed20fe18dfea161338a312/src/apple-touch-icon-precomposed.png


--------------------------------------------------------------------------------
/src/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Please read: http://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
 3 | <browserconfig>
 4 |   <msapplication>
 5 |     <tile>
 6 |       <square70x70logo src="tile.png"/>
 7 |       <square150x150logo src="tile.png"/>
 8 |       <wide310x150logo src="tile-wide.png"/>
 9 |       <square310x310logo src="tile.png"/>
10 |     </tile>
11 |   </msapplication>
12 | </browserconfig>
13 | 


--------------------------------------------------------------------------------
/src/crossdomain.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
 3 | <cross-domain-policy>
 4 | 
 5 | <!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->
 6 | 
 7 | <!-- Most restrictive policy: -->
 8 |   <site-control permitted-cross-domain-policies="none"/>
 9 | 
10 | <!-- Least restrictive policy: -->
11 | <!--
12 |   <site-control permitted-cross-domain-policies="all"/>
13 |   <allow-access-from domain="*" to-ports="*" secure="false"/>
14 |   <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
15 | -->
16 | <!--
17 |   If you host a crossdomain.xml file with allow-access-from domain="*"
18 |   and don’t understand all of the points described here, you probably
19 |   have a nasty security vulnerability. ~ simon willison
20 | -->
21 | 
22 | </cross-domain-policy>
23 | 


--------------------------------------------------------------------------------
/src/css/base/helpers.css:
--------------------------------------------------------------------------------
 1 | /* ==========================================================================
 2 |    Helper classes
 3 |    ========================================================================== */
 4 | 
 5 | /*
 6 |  * Hide visually and from screen readers: h5bp.com/u
 7 |  */
 8 | 
 9 | .hidden {
10 |   display: none !important;
11 |   visibility: hidden;
12 | }
13 | 
14 | /*
15 |  * Hide only visually, but have it available for screen readers: h5bp.com/v
16 |  */
17 | 
18 | .visuallyhidden {
19 |   border: 0;
20 |   clip: rect(0 0 0 0);
21 |   height: 1px;
22 |   margin: -1px;
23 |   overflow: hidden;
24 |   padding: 0;
25 |   position: absolute;
26 |   width: 1px;
27 | }
28 | 
29 | /*
30 |  * Extends the .visuallyhidden class to allow the element to be focusable
31 |  * when navigated to via the keyboard: h5bp.com/p
32 |  */
33 | 
34 | .visuallyhidden.focusable:active,
35 | .visuallyhidden.focusable:focus {
36 |   clip: auto;
37 |   height: auto;
38 |   margin: 0;
39 |   overflow: visible;
40 |   position: static;
41 |   width: auto;
42 | }
43 | 
44 | /*
45 |  * Hide visually and from screen readers, but maintain layout
46 |  */
47 | 
48 | .invisible {
49 |   visibility: hidden;
50 | }
51 | 
52 | /*
53 |  * Clearfix: contain floats
54 |  *
55 |  * For modern browsers
56 |  * Reference: http://cssmojo.com/the-very-latest-clearfix-reloaded/
57 |  */
58 | 
59 | .clearfix::after {
60 |   content: "";
61 |   display: block;
62 |   clear: both;
63 | }
64 | 


--------------------------------------------------------------------------------
/src/css/base/variables.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Variables to be used throughout the project
 3 |  */
 4 | :root {
 5 | 
 6 |   /* Fonts */
 7 |   --font-main: sans-serif;
 8 |   --font-key: Georgia, 'Times New Roman' serif;
 9 | 
10 |   /* <hr> color */
11 |   --hr-color: #ccc;
12 | 
13 |   /* Text selection background color */
14 |   --selection-color: #b3d4fc;
15 | 
16 |   /* Text Color */
17 |   --main-color: #222;
18 | }
19 | 


--------------------------------------------------------------------------------
/src/css/elements/typography.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Typography is specified in here.
 3 |  */
 4 | 
 5 | body {
 6 |   font-family: var(--font-main);
 7 | }
 8 | 
 9 | h1,
10 | h2,
11 | h3,
12 | h4 {
13 |   font-family: var(--font-key);
14 | }
15 | 


--------------------------------------------------------------------------------
/src/css/layout/base.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * HTML5 Boilerplate
 3 |  *
 4 |  * What follows is the result of much research on cross-browser styling.
 5 |  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 6 |  * Kroc Camen, and the H5BP dev community and team.
 7 |  */
 8 | 
 9 | /* ==========================================================================
10 |    Base styles: opinionated defaults
11 |    ========================================================================== */
12 | 
13 | html,
14 | button,
15 | input,
16 | select,
17 | textarea {
18 |   color: var(--main-color);
19 | }
20 | 
21 | body {
22 |   font-size: 1em;
23 |   line-height: 1.4;
24 | }
25 | 
26 | /*
27 |  * Remove text-shadow in selection highlight: h5bp.com/i
28 |  * These selection declarations have to be separate.
29 |  * Customize the background color to match your design.
30 |  */
31 | 
32 | ::-moz-selection {
33 |   background: var(--selection-color);
34 |   text-shadow: none;
35 | }
36 | 
37 | ::selection {
38 |   background: var(--selection-color);
39 |   text-shadow: none;
40 | }
41 | 
42 | /*
43 |  * A better looking default horizontal rule
44 |  */
45 | 
46 | hr {
47 |   display: block;
48 |   height: 1px;
49 |   border: 0;
50 |   border-top: 1px solid var(--hr-color);
51 |   margin: 1em 0;
52 |   padding: 0;
53 | }
54 | 
55 | /*
56 |  * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
57 |  */
58 | 
59 | img {
60 |   vertical-align: middle;
61 | }
62 | 
63 | /*
64 |  * Remove default fieldset styles.
65 |  */
66 | 
67 | fieldset {
68 |   border: 0;
69 |   margin: 0;
70 |   padding: 0;
71 | }
72 | 
73 | /*
74 |  * Allow only vertical resizing of textareas.
75 |  */
76 | 
77 | textarea {
78 |   resize: vertical;
79 | }
80 | 
81 | /* ==========================================================================
82 |    Browse Happy prompt
83 |    ========================================================================== */
84 | 
85 | .browsehappy {
86 |   margin: 0.2em 0;
87 |   background: #ccc;
88 |   color: #000;
89 |   padding: 0.2em 0;
90 | }
91 | 


--------------------------------------------------------------------------------
/src/css/layout/footer.css:
--------------------------------------------------------------------------------
1 | /**
2 |  * All styles related to markup inside the footer
3 |  */
4 | 


--------------------------------------------------------------------------------
/src/css/layout/header.css:
--------------------------------------------------------------------------------
1 | /**
2 |  * All styles related to markup inside the header
3 |  */
4 | 


--------------------------------------------------------------------------------
/src/css/layout/main.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * All styles related to markup inside the main element
 3 |  */
 4 | 
 5 | /* ==========================================================================
 6 |    Print styles.
 7 |    Inlined to avoid the additional HTTP request: h5bp.com/r
 8 |    ========================================================================== */
 9 | @media print {
10 |   * {
11 |     background: transparent !important;
12 |     color: #000 !important; /* Black prints faster: h5bp.com/s */
13 |     box-shadow:none !important;
14 |     text-shadow: none !important;
15 |   }
16 | 
17 |   a,
18 |   a:visited {
19 |     text-decoration: underline;
20 |   }
21 | 
22 |   a[href]:after {
23 |     content: " (" attr(href) ")";
24 |   }
25 | 
26 |   abbr[title]:after {
27 |     content: " (" attr(title) ")";
28 |   }
29 | 
30 |   /*
31 |    * Don't show links that are fragment identifiers,
32 |    * or use the `javascript:` pseudo protocol
33 |    */
34 | 
35 |   a[href^="#"]:after,
36 |   a[href^="javascript:"]:after {
37 |     content: "";
38 |   }
39 | 
40 |   pre,
41 |   blockquote {
42 |     border: 1px solid #999;
43 |     page-break-inside: avoid;
44 |   }
45 | 
46 |   thead {
47 |     display: table-header-group; /* h5bp.com/t */
48 |   }
49 | 
50 |   tr,
51 |   img {
52 |     page-break-inside: avoid;
53 |   }
54 | 
55 |   img {
56 |     max-width: 100% !important;
57 |   }
58 | 
59 |   @page {
60 |     margin: 0.5cm;
61 |   }
62 | 
63 |   p,
64 |   h2,
65 |   h3 {
66 |     orphans: 3;
67 |     widows: 3;
68 |   }
69 | 
70 |   h2,
71 |   h3 {
72 |     page-break-after: avoid;
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/src/css/main.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This project's description goes here
 3 |  *
 4 |  * @author  Some author's name
 5 |  * @version v0.0.0
 6 |  */
 7 | 
 8 | /* Helpers */
 9 | @import url('src/css/base/variables.css');
10 | @import url('node_modules/normalize.css/normalize.css');
11 | @import url('src/css/base/helpers.css');
12 | 
13 | /* Typography and Elements */
14 | @import url('src/css/elements/typography.css');
15 | 
16 | /* Layout */
17 | @import url('src/css/layout/base.css');
18 | @import url('src/css/layout/header.css');
19 | @import url('src/css/layout/main.css');
20 | @import url('src/css/layout/footer.css');
21 | 
22 | /* Modules */
23 | @import url('src/modules/module/module.css');
24 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-init/init/15280229fd011a2466ed20fe18dfea161338a312/src/favicon.ico


--------------------------------------------------------------------------------
/src/humans.txt:
--------------------------------------------------------------------------------
 1 | # humanstxt.org/
 2 | # The humans responsible & technology colophon
 3 | 
 4 | # TEAM
 5 | 
 6 |   <name> -- <role> -- <twitter>
 7 | 
 8 | # THANKS
 9 | 
10 |   <name>
11 | 
12 | # TECHNOLOGY COLOPHON
13 | 
14 |   CSS3, HTML5
15 |   Apache Server Configs, jQuery, Modernizr, Normalize.css
16 | 


--------------------------------------------------------------------------------
/src/img/.gitignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-init/init/15280229fd011a2466ed20fe18dfea161338a312/src/img/.gitignore


--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Module Description
 3 |  *
 4 |  * @author Author Name
 5 |  */
 6 | import Module from '../modules/module/module';
 7 | 
 8 | (function () {
 9 |   'use strict';
10 | 
11 |   console.log(Module);
12 | }());
13 | 


--------------------------------------------------------------------------------
/src/js/plugins/console.js:
--------------------------------------------------------------------------------
 1 | // Enhance console.log / console.warn output in browsers and avoid errors
 2 | // in browsers that lack a console.
 3 | (function () {
 4 |   'use strict';
 5 | 
 6 |   // Avoid `console` errors in browsers that lack a console.
 7 |   var method;
 8 |   var methodsToEnhance = ['log', 'warn'];
 9 |   var noop = function () {};
10 | 
11 |   var methods = [
12 |     'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
13 |     'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
14 |     'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
15 |     'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
16 |   ];
17 | 
18 |   var length = methods.length;
19 |   var console = (window.console = window.console || {});
20 | 
21 |   var methodFunction = function (old) {
22 |     return function () {
23 |       var args;
24 |       var stack = (new Error()).stack.split(/\n/);
25 | 
26 |       // Chrome includes a single "Error" line, FF doesn't.
27 |       if (stack[0].indexOf('Error') === 0) {
28 |         stack = stack.slice(1);
29 |       }
30 | 
31 |       args = [].slice.apply(arguments).concat([stack[1].trim()]);
32 | 
33 |       return old.apply(console, args);
34 |     };
35 |   };
36 | 
37 |   while (length--) {
38 |     method = methods[length];
39 | 
40 |     // Only stub undefined methods.
41 |     if (!console[method]) {
42 |       console[method] = noop;
43 |     }
44 | 
45 |     if (Array.prototype.indexOf && methodsToEnhance.indexOf(method) > -1) {
46 |       console[method] = methodFunction(console[method]);
47 |     }
48 |   }
49 | }());
50 | 


--------------------------------------------------------------------------------
/src/js/plugins/tracking.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Google Analytics tracking inclusion
 3 |  *
 4 |  * You can use the following attributes to define on elements in order to track
 5 |  * those.
 6 |  * - data-ga-action, required
 7 |  * - data-ga-category, required
 8 |  * - data-ga-label
 9 |  * - data-ga-value
10 |  *
11 |  * More information about the Google Universal Analytics:
12 |  * https://developers.google.com/analytics/devguides/collection/analyticsjs/
13 |  * http://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics
14 |  */
15 | import $ from '../node_modules/jquery/dist/jquery.js';
16 | 
17 | export default function () {
18 |   'use strict';
19 | 
20 |   // Add your Google Universal Analytics ID here
21 |   var GA_ID = 'UA-XXXXXXX-X';
22 | 
23 |   var document = window.document;
24 | 
25 |   /* jshint ignore:start */
26 |   // jscs:disable
27 |   (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
28 |   // jscs:enable
29 |   /* jshint ignore:end */
30 | 
31 |   // Create tracker object
32 |   ga('create', GA_ID);
33 | 
34 |   // Send a page view
35 |   // https://developers.google.com/analytics/devguides/collection/analyticsjs/pages
36 |   ga('send', 'pageview');
37 | 
38 |   // Track events
39 |   // https://developers.google.com/analytics/devguides/collection/analyticsjs/events
40 |   $(document).on('click', function (event) {
41 |     var action;
42 |     var category;
43 |     var label;
44 |     var $target = $(event.target);
45 |     var url;
46 |     var value;
47 | 
48 |     if ($target !== undefined && $target.attr('data-ga-action')) {
49 |       action = $target.attr('data-ga-action') || undefined; // required
50 |       category = $target.attr('data-ga-category') || undefined; // required
51 |       label = $target.attr('data-ga-label') || undefined;
52 |       url = $target.attr('href');
53 |       value = parseInt($target.attr('data-ga-value'), 10) || undefined;
54 | 
55 |       if (ga !== undefined && category !== undefined && action !== undefined) {
56 | 
57 |         // Register the event
58 |         ga('send', 'event', category, action, label, value);
59 |       }
60 |     }
61 |   });
62 | }
63 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="910" height="487"><g fill="#0084C0"><path d="M215.5 41l-106 79.69-51.5 37.63 124.94 93.64.21 64.2 32.35 23.97 31.81-23.97-3.31-95-83.58-62.44 55.08-41.4 110.5 83.07v96.45l-110.5 82.29-110.5-82.29v-63.18l-61-45.41v139.22l171.5 127.72 171.5-127.72v-157.54l-171.5-128.93zm0 0"/><path d="M448.28 328v-157.88h38.36v157.88h-38.36zm164.72-125h-57v125h-36.81v-157.88l109.81-.12 24 18-.2 140h-39.8v-125zm73.36 125v-157.88h38.36v157.88h-38.36zm138.49 0h-38.14l.29-125h-45l.11-32.88s103.28.11 103.08 0c-.19-.12 23.81 17.88 23.81 17.88v15h-44l-.15 125zm0 0" opacity=".58"/></g></svg>


--------------------------------------------------------------------------------
/src/modules/module/module.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * An example module: Box
 3 |  *
 4 |  * @author Your Name
 5 |  */
 6 | 
 7 | /*
 8 |  * Configuration
 9 |  * Use module specific variables and prefix them with the namespace.
10 |  *
11 |  * --box-property: value;
12 |  */
13 | :root {
14 | }
15 | 
16 | /*
17 |  * General styling
18 |  * Define general styles as abstract as possible for a module and build variants
19 |  * of your modules if you need to break out of the general style.
20 |  */
21 | 
22 | /*
23 |  * Media Queries
24 |  * If you build mobile first or using another method you need Media Queries to
25 |  * target different screen sizes. These should be included module-wise.
26 |  */
27 | 


--------------------------------------------------------------------------------
/src/modules/module/module.html:
--------------------------------------------------------------------------------
1 | <!-- Place the markup of your module here -->
2 | 


--------------------------------------------------------------------------------
/src/modules/module/module.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * An example module
 3 |  *
 4 |  * @author Author name
 5 |  */
 6 | import $ from '../../../node_modules/jquery/dist/jquery.js';
 7 | 
 8 | // Public API
 9 | export default function () {
10 | 
11 |   // Strict mode to prevent sloppy JS
12 |   'use strict';
13 | 
14 |   // Private variables
15 |   let _eventName = '_test';
16 | 
17 |   return {
18 | 
19 |     // Getter for private variable
20 |     getEventName () {
21 |       return _eventName;
22 |     },
23 | 
24 |     // File an event on initialisation
25 |     init () {
26 |       $(document).trigger(_eventName);
27 |     }
28 |   };
29 | }
30 | 


--------------------------------------------------------------------------------
/src/modules/module/module.spec.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * An example specification for the example module
 3 |  * Loads the module and runs the test suite
 4 |  * Module path is relative to the current path
 5 |  */
 6 | import $ from '../../../node_modules/jquery/dist/jquery.js';
 7 | import Module from './module.js';
 8 | 
 9 | export default function () {
10 |   'use strict';
11 | 
12 |   var module = new Module();
13 | 
14 |   // Test suite INIT
15 |   describe('INIT', function () {
16 | 
17 |     it('is available', function () {
18 |       expect(module).not.toBe(null);
19 |     });
20 | 
21 |     it('has getter for event name', function () {
22 |       expect(module.getEventName()).toBe('_test');
23 |     });
24 | 
25 |     it('fires event on init', function () {
26 |       var eventCalled;
27 | 
28 |       $(document).on(module.getEventName(), function () {
29 |         eventCalled = true;
30 |       });
31 | 
32 |       module.init();
33 | 
34 |       expect(eventCalled).toBeTruthy();
35 |     });
36 |   });
37 | }
38 | 


--------------------------------------------------------------------------------
/src/robots.txt:
--------------------------------------------------------------------------------
1 | # www.robotstxt.org/
2 | 
3 | # Allow crawling of all content
4 | User-agent: *
5 | Disallow:
6 | 


--------------------------------------------------------------------------------
/src/templates/footer.html:
--------------------------------------------------------------------------------
 1 |     </main>
 2 | 
 3 |     <footer>
 4 | 
 5 |     </footer>
 6 | 
 7 |     <!-- Load scripts -->
 8 |     @@mainjs
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/src/templates/header.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html class="no-js" lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 | 
 6 |     <title></title>
 7 |     <meta name="description" content="">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 | 
10 |     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
11 | 
12 |     <link rel="stylesheet" href="@@maincss">
13 |     <script src="@@modernizr"></script>
14 |   </head>
15 |   <body>
16 |     <!--[if lte IE 8]>
17 |       <p class="browsehappy">You are using an <strong>outdated</strong>
18 |         browser. Please
19 |         <a href="http://browsehappy.com/">upgrade your browser</a> to
20 |         improve your experience.</p>
21 |     <![endif]-->
22 | 
23 |     <!-- Add your site or application content here -->
24 |     <header>
25 |       <h1 role="banner">INIT</h1>
26 | 
27 |       <nav role="navigation">
28 |         <ul>
29 |           <li><a href=""></a></li>
30 |         </ul>
31 |       </nav>
32 |     </header>
33 | 
34 |     <main role="main">
35 | 


--------------------------------------------------------------------------------
/src/templates/index.html:
--------------------------------------------------------------------------------
1 | <p>Hello world! This is INIT.</p>
2 | 


--------------------------------------------------------------------------------
/src/tile-wide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-init/init/15280229fd011a2466ed20fe18dfea161338a312/src/tile-wide.png


--------------------------------------------------------------------------------
/src/tile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-init/init/15280229fd011a2466ed20fe18dfea161338a312/src/tile.png


--------------------------------------------------------------------------------
/test/main.js:
--------------------------------------------------------------------------------
 1 | // jshint camelcase: false
 2 | 
 3 | // Include your specs here
 4 | import ModuleSpec from '../src/modules/module/module.spec.js';
 5 | 
 6 | (function () {
 7 |   'use strict';
 8 | 
 9 |   // Make async
10 |   window.__karma__.loaded = function () {};
11 | 
12 |   // Set the flag for test environment
13 |   window.__test = true;
14 | 
15 |   // Execute new specs here
16 |   new ModuleSpec();
17 | 
18 |   window.__karma__.start();
19 | }());
20 | 


--------------------------------------------------------------------------------