h5bp + twitter bootstrap integration (no npm required)

readme.md

/usr/bin/bash script to quickly setup a project using html5boilerplate and twitter bootstrap.

Description

This script is a 1-2-3 application able to create a new H5BP project folder in few seconds using the latest versions of H5BP, H5BP Ant build script and Twitter's Bootscrap.

More infos about the script

Based upon mklab's "h5bp + twitter bootstrap integration" script idea: https://gist.github.com/1422879 . It's not a fork, even if it uses the same CSS custom files. I've created this script as the mklab's one was messing with the already-created repository clones... and 'cause I love creating BASH scripts :)

I am new to the HTML5 Boilerplate & CSS/LESS frameworks & etc. I started just reading an article on a web magazine. Even though I have to learn loads of new stuff, I'm in the BASH playground by a while. This script allows you to easily grab the latest H5BP, H5BP Ant Build script and Bootstrap versions using GIT.

Unlike the original script, this doesn't need Node.js, even though it will require the lessc in the PATH env variable in order to pre-compile the Bootscrap's (and your) LESS css (i.e. lessc correctly installed).

What the script produces

A custom H5BP basic setup including Bootscrap, ready to be used without any further edit by the web developer.

Directory structure

→ .repo
|  → ant-build-script
|  → bootstrap
|  → h5bp
→ <project folder>
|  → build
|  | → config
|  | → tools
|  → css
|  | → less

The .repo folder contains the git repository clones of the various projects, while the project folder can be moved safely. It is suggested to run the script always in the same directory in order to use again the same repository clones.

Script steps

• Clone / update the HTML5 Boilderplate repository in .repo/h5bp
• Clone / update the HTML5 ant build script in .repo/ant-build-script
• Clone / update the Twitter's Bootstrap repository in .repo/bootsrtap
• Create the temp folder .repo/combined and copy the H5BP and H5BP build script files
• Execute the build script's createproject.sh creating the ./<project folder>, then delete the temp folder .repo/combined
• Copy the Bootstrap's LESS files into ./<project folder>/css/less
• Rename the H5BP's style.css to h5bp.css, create app.css (the one to edit), then mix the Bootstrap's, H5BP's and project's stylesheets into ./<project folder>/css/style.css
• Concatenate the Bootstrap's jQuery plugins into ./<project folder>/js/plugins.js, automatic and interactive step (note: a hack is required to concatenate the popover plugin as last one, as it requires tooltip first. NEED A BETTER SOLUTION)
• Compile the Bootstrap's less stylesheet and save it as ./<project folder>/css/bootstrap.css

Usage

First time only: chmod +x h5bp-bootstrap.sh Then: ./h5bp-bootstrap.sh project_name

A project_name folder will appear, and it will be ready for work (you can move it wherever you want). Use the Bootstrap's classes and plugins as you wish, edit css/style.css only if you want to add other CSS files (with @import), use css/app.css as your main stylesheet file. The build script includes the bootstrap's installation by default.

Final notes

Do not use whitespace in the project name (mandatory), and if possible run the script in a directory with no spaces too (should be fine though). Suggestions are appreciated.

h5bp-bootstrap.sh

#!/bin/bash

function echoStep {
	echo -e "\n\t$1\n"
}


type lessc >/dev/null 2>&1 || { echoStep "I require lessc but it's not installed or it's not in PATH. Please install it before continuing."; exit; }

lessc=$(which lessc)
starting_dir=$(pwd)

repo_dir="$starting_dir/.repo"
h5bp_git="git://github.com/h5bp/html5-boilerplate.git"
h5bp_ant_git="git://github.com/h5bp/ant-build-script.git"
bootstrap_git="git://github.com/twitter/bootstrap.git"

if [ $# -eq 1 ]; then
	project_dir="$starting_dir/$1"
	project_name="$1"
else
	echoStep "Usage: $0 target_folder_relative_path"
	exit
fi

if ! [ -d $repo_dir ]; then
	mkdir -p $repo_dir
fi

##########################################
echoStep "1. Getting HTML5 Boilerplate"
if ! [ -d $repo_dir/h5bp ]; then
	git clone $h5bp_git $repo_dir/h5bp
else
	cd $repo_dir/h5bp
	git pull
	cd $starting_dir
fi
##########################################

##########################################################
echoStep "2. Getting HTML5 Boilerplate ant build script"
if ! [ -d $repo_dir/ant-build-script ]; then
	git clone $h5bp_ant_git $repo_dir/ant-build-script
else
	cd $repo_dir/ant-build-script
	git pull
	cd $starting_dir
fi
##########################################################

####################################################
echoStep "3. Getting Twitter's Bootstrap"
if ! [ -d $repo_dir/bootstrap ]; then
	git clone $bootstrap_git $repo_dir/bootstrap
else
	cd $repo_dir/bootstrap
	git pull
	cd $starting_dir
fi
####################################################

if [ -d $project_dir ]; then
	echoStep "The project folder already exists. Exit."
	exit
fi
###################################################
echoStep "4. Copying H5BP files"
cd $repo_dir/h5bp

if [ -d "$repo_dir/combined" ]; then
	rm -r "$repo_dir/combined"
fi

mkdir -p "$repo_dir/combined/build"

cp -r css js img *.html *.xml *.txt *.png *.ico .htaccess "$repo_dir/combined/"

cd $repo_dir/ant-build-script
cp -r config tools *.xml *.sh "$repo_dir/combined/build/"
###################################################

#####################################################
echoStep "5. Setting up the ant build script project"
cd "$repo_dir/combined/build"
chmod +x createproject.sh
./createproject.sh --src $repo_dir/combined --dst $starting_dir $project_name
cd $starting_dir
rm -r "$repo_dir/combined"
#####################################################

#########################################################
echoStep "6. Copying Bootstrap's LESS folder to css/less and images in img/"
cp -r $repo_dir/bootstrap/less $project_dir/css/less
cp $repo_dir/bootstrap/img/* $project_dir/img/
#########################################################

#####################################################
echoStep "7. Creating the mixing CSS files"
echo "Creating app.css..."
echo "
/* =============================================================================
   App specific CSS file.
   
   This is usually where the site/app's CSS specific rules are setup. Note that you could
   do exactly the same using less by adding a '@import "app.less";' at the end of
   css/less/bootstrap.less file.

========================================================================== */
" > $project_dir/css/app.css

mv -v $project_dir/css/style.css $project_dir/css/h5bp.css

echo "Creating style.css"
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');
" > $project_dir/css/style.css
cd $starting_dir
#####################################################

############################################
echoStep "8. Setting up bootstrap's plugins"
mkdir -p $project_dir/js
cd $repo_dir/bootstrap/js/
for f in *.js;
do
	while [ "$yn" != "y" -a "$yn" != "n" ]
	do
		read -p "Want $f? : (y/n) " yn
	done
	
	if [ "$yn" == "y" ];
	then
		# Hack: concatenate popover after all the others (needs tooltip)
		if [ $f == "bootstrap-popover.js" ];
		then
			last="$f"
		else
			cat $f >> $project_dir/js/plugins.js
		fi
	fi
	
	unset yn
done
if [ -n "${last:+x}" ];
then
	# Hack (part 2)
	cat $last >> $project_dir/js/plugins.js
fi

cd $starting_dir
###########################################

echoStep "9. Compiling Bootstrap's LESS stylesheets"
lessc $project_dir/css/less/bootstrap.less > $project_dir/css/bootstrap.css
echoStep "In order to recompile the less files, run this command: lessc css/less/bootstrap.less > css/bootstrap.css"