h5bp + twitter bootstrap integration

readme.md

h5bp + twitter bootstrap integration

Shell script to quickly setup a project using html5boilerplate and twitter bootstrap.

description

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.

Bootstrap's reset is droped in profit of h5bp's normalize.

A single style.css file is used, h5bp's style.css is renamed to h5bp.css, 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.

Following assumes you have both git and npm (so node too) installed and available in your path.

install

h5bp-plus-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

usage

Just run h5bp-plus-boostrap. You'll be prompted for a directory name, then by npm when the npm init is run.

Directory structure

→ build
|  → config
|  → tools
→ css
|  → less
→ examples
→ img
→ js
|  → libs
|  → mylibs

1. Get html5boilerplate project (clone, zip file, use of h5bp-cake createproject)
2. Get twitter bootsrap (clone, zipfile) somewhere else on your system.
3. Copy bootstrap's lib/ folder to css/less/ (or any other path you'd like, following assumes css/less/)
4. Go in css/less, edit the bootstrap.less file and remove the @import "reset.less"; line.
5. Go in css, rename h5bp's style.css to h5bp.css.
6. Create a new css/style.css file.

Add 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');

7. Create a new css/app.css. This file is where you'll put your site's specific CSS rules.
8. Init an npm package for your website (npm init and follow instructions).
9. Tweak package.json, add a "private": true props so that you don't accidently publish to npm registry. You may kill off any of the props except from name/version ones.
10. Add less as package.json's depdendency (npm install less --save)
11. Add an npm script to trigger the less build:

package.json:

{
  "name": "foobar",
  "description": "fancy description",
  "version": "0.0.1",
  "dependencies": {
    "less": "~1.1.5"
  },
  "scripts": {
    "less": "./node_modules/.bin/lessc --compress ./css/less/bootstrap.less > css/bootstrap.css"
  }
}

Command is ./node_modules/.bin/lessc --compress ./css/less/bootstrap.less > css/bootstrap.css.

h5bp-twitter-bootstrap

#!/bin/sh


echo "

  Cool, let's start.

"

src=$PWD


if [ $# -eq 1 ]
then
  # get a name for new project from command line arguments
  name="$1"
fi

# get a name for new project from input
while [ -z $name ]
do
  echo "To create a new project, enter a new directory name"
  read name || exit
done

[ -d $name ] && echo "Directory $name already exists" && exit 1

echo "\n1. Get html5boilerplate project (clone, zip file, use of h5bp-cake createproject)"
! [ -d .tmp/h5bp ] && git clone https://github.com/h5bp/html5-boilerplate.git .tmp/h5bp
cd .tmp/h5bp && git pull && cd $src

echo "\n2. Get twitter bootsrap (clone, zipfile) somewhere else on your system."
! [ -d .tmp/bootstrap ] && git clone https://github.com/twitter/bootstrap.git .tmp/bootstrap
cd .tmp/bootstrap && git pull && cd $src

echo "\n3. Create html5boilerplate directory/file structure by running build/createproject.sh"
cd .tmp/h5bp && ./build/createproject.sh project && cd $src
mkdir -p $name
echo "Created directory: $name"
cd .tmp/h5bp && cp -r -- css js img build *.html *.xml *.txt *.png *.ico .htaccess "../../$name"
echo "Created h5bp project's structure: $name"
cd $src

echo "\n4. Copy bootstrap's 'lib' folder to 'css/less/' (or any other path you'd like, following assumes 'css/less/')"
cp -vr .tmp/bootstrap/lib $name/css/less
echo "Create bootsrap's less directory in css/less"

echo "\n5. Go in 'css/less', edit the bootstrap.less file and remove the '@import \"reset.less\";' line."
cp $name/css/less/bootstrap.less $name/css/less/bootstrap.less.orig
sed '/reset/d' $name/css/less/bootstrap.less.orig | sed '/Reset/d' > $name/css/less/bootstrap.less

echo "\n6. Go in 'css', rename h5bp's 'style.css' to 'h5bp.css'."
cd $name/css && mv style.css h5bp.css && cd $src

echo "\n7. Create a new 'css/style.css' file, add the following:"
echo "

/* =============================================================================
   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');

" > $name/css/style.css


echo "\n8. Init npm package for the website"
cd $name && npm init

echo "You may want to tweak the package.json file, only name/version are mandatory."

echo "\n9. Add less as package.json's dependency (npm install less --save)"
npm install less --save

echo "\n10. Add an npm script to trigger the less build."
mv package.json package.json.orig
awk 'f==1{print last}{last=$0;f=1}END{print "  , \"scripts\": {\n    \"less\": \"./node_modules/.bin/lessc --compress ./css/less/bootstrap.less > css/bootstrap.css\"\n  }\n"$0}' package.json.orig > package.json
cd $src

echo "\n11. Cleaning out temporary dirs."
rm -rf .tmp

echo "\n\nAll done!"
echo "

Check out the $name directory.

Simply run 'npm run-script less' to trigger the less compile step.

"

package.json

{
  "author": "mklabs",
  "name": "h5bp-twitter-bootstrap",
  "description": "Shell script to quickly setup a project using html5boilerplate and twitter bootstrap",
  "version": "0.0.1",
  "bin": "./h5bp-twitter-bootstrap"
}