Shell script to quickly setup a project using html5boilerplate and twitter bootstrap.
html5boilerplate + twitter bootstrap is a super combo.
Here is what I usually do to setup a project using html5boilerplate and twitter bootstrap. Following assumes a build process and relies on bootstrap's less files, it also requires both git and npm (so node too) installed and available in your path.
A single style.css file is used and h5bp's style.css is renamed to h5bp.css (not used in profit of bootstrap's css reset). Bootstrap less compile step outputs to bootstrap.css and an app.css is there to setup site's specific CSS rules.
The style.css file relies on @import, so it assumes the use of a build
process, to inline and minify these import in a single file.
Bootstrap's plugins can be concat'd to js/plugins.js, you'll be prompted for
each js/*.js file in the js/ dir of bootstrap's repo.
h5bp-twitter-bootstrap is a simple (and dumb) shell script, so you can drop it somewhere in your $PATH. It's particularly handy if you have a collection of dotfiles and bin helpers.
Relatadely, it is bundled as an npm package, so you may use npm instead to perform the install.
Through npm:
npm install https://gist.github.com/gists/1422879/download -g
Just run h5bp-twitter-boostrap. You'll be prompted for
- a directory name (if not setup through dirname cli option)
- for each bootstrap's JS plugins
- by npm when the
npm initis run.
Running h5bp-twitter-bootstrap -h will output usage below:
Usage:
h5bp-twitter-bootstrap [-h] [dirname]
→ build
| → config
| → tools
→ css
| → less
→ img
→ js
| → libs
- Get html5boilerplate project (git clone into ./tmp/h5bp)
- Get twitter bootsrap (git clone into ./tmp/bootstrap)
- Create html5boilerplate directory/file structure by running build/createproject.sh
- Copy bootstrap's
less/folder tocss/less/(or any other path you'd like, following assumescss/less/) - Creates an empty app.css file.
- Go in
css, rename h5bp'sstyle.csstoh5bp.css. - Create a new
css/style.cssfile.
And adds the following:
/* =============================================================================
CSS App imports.
These imports are inlined and minified by the build script. If
you don't intend to use a build script, do not use @import
statements. Use a single style.css file with h5bp's style first,
then bootstrap.css, then your specific CSS files.
h5bp's style first.
========================================================================== */
@import url('h5bp.css');
@import url('bootstrap.css');
@import url('app.css');
- Create a new
css/app.css. This file is where you'll put your site's specific CSS rules. - Processing of bootstrap's plugins, you'll be prompted for each files in .tmp/bootstrap/js/ directory. Simply put a y/n (or yep/nope that'll work too) to tell wheter you want them included and concat'd to the js/plugins.js file.
- Inits an npm package for your website (
npm initand follow instructions).- You may want to tweak the package.json file, add a
"private": trueprops so that you don't accidently publish to npm registry. You may kill off any of the props except from name/version ones.
- You may want to tweak the package.json file, add a
- Add less as package.json's depdendency (npm install less --save).
- Add an npm script to trigger the less build:
package.json:
{
"name": "foobar",
"description": "fancy description",
"version": "0.0.1",
"dependencies": {
"less": "~1.2.1"
},
"scripts": {
"less": "./node_modules/.bin/lessc --compress ./css/less/bootstrap.less > css/bootstrap.css"
}
}
The command is ./node_modules/.bin/lessc --compress ./css/less/bootstrap.less > css/bootstrap.css.
- Finally, actually triggers the npm less script and compiles the css/bootstrap.css for the first time.
Once done, you may run npm run-script less to rebuild the css if needed.
Cool, this ties in nicely with http://qr.ae/7aQuA