HTML5 Skeletor is a simple fully responsive HTML5 front end template that you can use as a starting point for your HTML5 projects large or small. It also has a complete GruntJS workflow.
Layout and Responsiveness provided by Skeleton (A Beautiful Boilerplate for Responsive, Mobile-Friendly Development) - www.getskeleton.com
Includes Bower Package Management to download and install the core libraries and their correct versions (currently jquery, modernizr, yepnope)
Other 3rd party libraries and plugins can also be added locally along with the Package Libraries mentioned above (currently contains jquery.loadie to show cool page loading animation)
Using YepNope to load your JS files (which can be broken into 'modules') and init your website
The JS core includes the Standard Garber-Irish Implementation design pattern
Includes a QUnit based Unit and Integration test template which can be run in the browser or in headless mode using PhantomJS
Includes a complete GruntJS dev work flow, this currently has the following grunt tasks:
- Does the same as 'build' below
- Applies JSHint to the core js files, lint errors need to be fixed to proceed
- Executes the Unit and Integration tests in headless mode using PhantomJS, tests need to pass to proceed to next step
- Uglifies and merges all your JS file modules into a single JS file script.js (Your 3rd party scripts are put into its own file called libraries.js)
- Creates a flat build of your files (placed in /build)
- Does what 'build' does as well as packaging your build into a single zip file (placed in /deploy)
- This is where you work from, it serves your app using localhost
- Bower Package Management is used here to download and install the core libraries to make sure everyone uses the same versions
- This is the 1st step to run before using 'package' or 'build' as you need the Bower fetched libraries
test _ Runs the QUnit based Unit and Integration tests in standalone/headless mode using PhantomJs
- These rules are described to your app locally using the .jshintrc config file
- By having these rules in a separate file, your rules become 'portable' to your app developers who can share the rules between them and improve them if needed
- The .jshintrc config file evolves separately in this repo - [JSHint Config Template] (https://github.com/newbreedofgeek/jshint-config-template) and you can choose to update to newer versions if you want (1.0.0 is the config version being used currently in HTML5 Thor)
- the JSHint checks are built into the 'build' and 'package' steps, but if you want to run it on it's own you can do so with the 'grunt jshint' command
- To learn more on how to prevent your custom variables and coding style from appearing as errors etc, visit this [readme] (https://github.com/newbreedofgeek/jshint-config-template) or read the [JSHint documentation] (http://jshint.com/docs/)
$ git clone https://github.com/newbreedofgeek/html5-skeletor.git
- Navigate to the html5-skeletor folder
$ cd html5-skeletor
- Install dependencies
$ npm install
- Serve the working folder using localhost
$ grunt serve
- Open http://localhost:8000 to view your working app
Note: If you don't want the grunt workflow and you only want the pure HTML5 responsive front end template, you only need to clone the repo and work off the /src folder
- src/ Where you work from
- build/ Where your build files live
- deploy/ Where your build files are packaged for deployment
- The demo shows the last version that had major UI updates (Patches and task/build updates are not shown as they wont be visible in the ui)
7.0.0 - (7/02/2014) - We use cssmin to minify and concat your css files now.
6.1.0 - (7/02/2014) JSHint now runs using the .jshintrc file for portability. Although this in NOT a breaking change, the JSHint steps may fail due to more strict rules, if so you can tweak the .jshintrc file to fix them.
6.0.0 - (24/01/2014) Converted this to a template for Websites and therefore removed the web app demo and replaced with new branding and demo website. The Web app is still available in HTML5-thor (check in my other repos)
5.0.0 - (19/11/2013) Added QUnit based Unit and Integration tests that are now part of the Grunt workflow (using PhantomJS) for the build and package tasks. There is also a new task called 'test' (e.g. grunt test) that runs the tests in standalone/headless mode.
- 5.0.1 - (6/12/2013) Fixed incorrect clone URL in readme file
4.0.0 - (8/11/2013) Added JSHint to lint the core js files of the app. These errors need to be fixed before you can build or deploy.
3.0.0 - (4/9/2013) Added Bower Package Management to download and install the core libraries and their correct versions (currently jquery, modernizr, yepnope)
- 3.0.1 - (9/9/2013) Included all directories as a guide
2.0.0 - (30/7/2013) Added a grunt task to serve your working app at localhost:8000, also cleaned up the other grunt workflow tasks which makes it not backward compatible with the previous version.
1.1.0 - (25/7/2013) Added a grunt task to zip your build folder and place it in a deploy folder
1.0.0 - (22/7/2013) Added simple GruntJS build workflow to produce a build that uglifies and combines your JS files and uses conditional HTML to call the new files.
- 1.0.1 - (22/7/2013) Fixed incorrect demo url
- 1.0.2 - (22/7/2013) Remove the 'build' folder from .gitignore as it makes sense to show it
0.1.0 - (21/7/2013) Initial release. This did not have the GruntJS build workflow and was a vanilla HTML5 responsive front end template. Use this if you don't want GruntJS.