Boilerplate provides the files necessary to start a front-end web development project. JSON files to help install all dependancies quickly with npm and bower but also a basic directory to use that works with the gulpfile.js, making it easy to get up and running writing markup templates with PugJS, RequireJS and Sass. Boilerplate also comes with modernizr and normalize.css. Yeoman generators are also an option once yeoman in installed globally.
Run the following command inside the CLI to begin using Boilerplate inside your project
$ npm install
$ bower install
$ npm start
$ npm run serve
$ npm run http
$ npm run cleanThe commmand npm start initiates the task gulp build which runs all tasks that compile to the dist folder and then public folder. npm run serve initiates browsersync server (http://localhost:3000) which will open the site inside the dist folder and will watch for changes inside the src folder making it appropriate for development. npm run http will run a basic node server (http://localhost:8080) that will run the site inside the public folder but will not watch for changes therefore only for viewing the site for production. Finally, npm run clean removes the dist and public folder.
## Global NPM packages
Below are packages installed globally with npm to use with the command line interface. Refer to each tool's website for installation instructions.
├── bower@1.8.0
├── generator-h5bp@1.4.0
├── grunt-cli@1.2.0
├── gulp-cli@1.2.2
├── less@2.7.2
├── modernizr@3.3.1
├── npm@4.4.0
├── npm-check@5.4.0
├── pug-cli@1.0.0-alpha6
├── requirejs@2.3.3
└── stylus@0.54.5
└── yo@1.8.5
## Directory Structure
This is the directory structure that can be used with npm modules and gulpfile.js.
```bash
.
├── dist
│ ├── css
│ ├── js
│ ├── minify
│ ├── sourcemaps
│ └── templates
│ ├── fixed_nav
│ ├── grid
│ ├── nfixed_nav
│ └── syntax
├── src
│ ├── css
│ ├── js
│ │ └── lib
│ │ └── modules
│ ├── pug
│ │ ├── base
│ │ ├── components
│ │ └── template_base
│ └── sass
│ ├── base
│ ├── components
│ ├── layout
│ ├── utils
│ └── vendors
└── tools
Use this guide for possible files used inside the guide from above. This example comes from Mangree Framework.
.
├── README.md
├── bower.json
├── dist
│ ├── css
│ │ ├── index.css
│ │ ├── main.css
│ │ └── prism.css
│ ├── js
│ │ ├── bundle.js
│ │ ├── modernizr.js
│ │ ├── prism.js
│ │ └── rjs_bundle.js
│ ├── minify
│ ├── sourcemaps
│ │ ├── bundle.js.map
│ │ └── main.css.map
│ └── templates
│ ├── fixed_nav
│ │ └── fixed_nav.html
│ ├── grid
│ │ └── grid.html
│ ├── index.html
│ ├── nfixed_nav
│ │ └── nfixed_nav.html
│ └── syntax
│ └── syntax.html
├── gulpfile.js
├── package.json
├── src
│ ├── css
│ │ └── prism.css
│ ├── js
│ │ ├── lib
│ │ │ └── modules
│ │ │ ├── nav_color.js
│ │ │ ├── navmod.js
│ │ │ └── smoothscroll.js
│ │ └── require.config.js
│ ├── pug
│ │ ├── base
│ │ │ ├── _basic.pug
│ │ │ ├── _footer.pug
│ │ │ └── _head.pug
│ │ ├── components
│ │ │ ├── _fixed_nav.pug
│ │ │ ├── _grid.pug
│ │ │ ├── _nfixed_nav.pug
│ │ │ └── _syntax-highlighting.pug
│ │ ├── fixed_nav.pug
│ │ ├── grid.pug
│ │ ├── index.pug
│ │ ├── nfixed_nav.pug
│ │ ├── syntax.pug
│ │ └── template_base
│ │ ├── _temp_footer.pug
│ │ └── _temp_head.pug
│ └── sass
│ ├── base
│ │ ├── _colors.sass
│ │ ├── _reset.sass
│ │ ├── _special.sass
│ │ ├── _syntax_highlighting.sass
│ │ └── _typography.sass
│ ├── components
│ │ ├── _buttons.scss
│ │ └── _navigation.sass
│ ├── layout
│ │ ├── _grid.sass
│ │ └── _header.scss
│ ├── main.sass
│ ├── utils
│ │ └── _variables.sass
│ └── vendors
│ └── _vendor.scss
└── tools
├── almond.js
├── app.build.js
├── modernizr-config.json
└── rjs.build.jsIf you are not to familiar with using gulp, globs, and node but want to make sure the directory works with the files provided, try to use the directory structure list above as a guide. Gulp can be run from the shell as a global command or via npm scripts.
$ npm run gsass #watches only sass changes
$ npm run gpug #watches only pug changes
$ npm run gall #watches pug, sass, and requirejs changesBoilerplate can use Yeoman to download the html5 boilerplate or any other as desired. Run the following command to install the yo generator.
$ yo h5bpBoilerplate can also use Bower to install and manage front-end dependancies such as RequireJS, etc. Boilerplate comes with a bower.json that will install all of the dependancies for you. Follow the commands below on your terminal to do this.
$ npm install -g bower
$ bower installOr you can install dependancies individually
$ bower install <package>- HTML5 Boilerplate
- Use on its own to establish a starting point in your web dev workflow. Use other components as needed. By using bower to have a copy of the HTML5 boilerplate it can updated and then use only what is need in the project such as the directories and config files.
- Visit these site for information on using this boilerplate
- creativeblog.com
- Normalize.css
- A way to start styles fresh without using browser defaults and to help them be cross-browser compatible.
- RequireJS
- Work on your Javascript with modules and load a single file inside your index.html while using the require.js file to help pull all your modules at once. You can then optimize (minify/concatenante) your files into a single one with r.js, a optimization tool for RequireJS.
To use node modules you need to install it first. NPM comes as part of your nodeJS install. You can install NodeJS either by downloading it from the wabsite or with a package manager. In mac follow these steps:
Install Homebrew
Then install a formula
$ brew install nodeThis installs node and npm. You can also go the nvm route, which is the node version manager if you plan to work on node more. In this case you can have a global node installed and then install nvm to manage more versions but a few things change like where your npm global modules are installed and where your node versions are installed. But see nvm documentation for information.
This is a debatable subject but it is an alternative to installing gulp/grunt as global packages to use in the CLI (command line interface). The package.json in Boilerplate contains npm scripts that runs commands by looking at the currently installed dependancies. Here is an example with modernizr as a development dependancy.
Install modernizr as a devDependacy
$ npm install modernizr --save-dev "devDependencies": {
"modernizr": "^3.3.1"
},Make sure the dependacy and the command desired is added to script object.
"scripts": {
"modernizr": "modernizr -c modernizr-config.json -u"
},There are two ways to run this dependancy through the command line with npm. One is by including the path and second is to use the scripts:
returns: Modernizr build saved to /Users/rootuser/boilerplate/modernizr.js`
$ ./node_modules/.bin/modernizr -c modernizr-config.json -uOR retunrs same as above but is less crowded
$ npm run modernizrHere are the available commands using npm scripts.
runs the requirejs optimizer r.js and creates a single file rjs_bundle.js inside dist/js/
$ npm run rjswatches only sass changes
$ npm run gsasswatches only pug changes
$ npm run gpugwatches pug, sass, and requirejs changes
$ npm run gallBash is the command line interface (CLI) for mac but you may be using another depending on your operating system. The reason this is added here is because Boilerplate serves the developer a starting point for setting his dev workflow if there not one currently. Here a few useful tools to use on your terminal.
Assuming you have Homebrew installed:
tree - program that shows a directory list as a tree format
$ brew install treethen run a command to show only directories but not one
$ tree -I 'node_modules'(RequireJS)[http://www.requirejs.org/] is an AMD javascript loader that enables the use of multiple scripts as files called modules and helps make writing logic easier. In Boilerplate, requirejs can be used to load modules as decribed in their documentation but also global files such as modernizr, prism, jquery, underscorejs, etc.
Include global files inside the following folder
├── src │ ├── css │ ├── js │ │ └── lib │ │ └── require.config.js
Then add the following code to the require.config.js file
requirejs.config({
//other options ,
shim: {//using shim to load "browser globals" see: http://www.requirejs.org/docs/api.html#config-shim
'prism': {
exports: 'Prism'
}
}
});