public
Created — forked from mklabs/bootstrap-plugins.txt

h5bp + twitter bootstrap integration

  • Download Gist
bootstrap-plugins.txt
1 2 3 4 5 6 7 8 9 10 11 12
bootstrap-tooltip.js
bootstrap-popover.js
bootstrap-alert.js
bootstrap-button.js
bootstrap-carousel.js
bootstrap-collapse.js
bootstrap-dropdown.js
bootstrap-modal.js
bootstrap-scrollspy.js
bootstrap-tab.js
bootstrap-transition.js
bootstrap-typeahead.js
h5bp-twitter-bootstrap
Shell
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258
#!/usr/bin/env bash
 
 
src=$PWD
ant_build_script_remote=git://github.com/h5bp/ant-build-script.git
h5bp_remote=git://github.com/h5bp/html5-boilerplate.git
bootstrap_remote=git://github.com/twitter/bootstrap.git
 
ant_build_script_branch=master
h5bp_branch=master
bootstrap_branch=2.0-wip
 
# list of bootstrap plugins to be prompted
PLUGINS=$(cat bootstrap-plugins.txt)
 
# the less cmd to run to compiles bootstrap's css files
LESS_CMDS="#!/usr/bin/env bash
 
mkdir css/bs/
./node_modules/.bin/lessc css/less/bootstrap.less css/bs/bootstrap.css
./node_modules/.bin/lessc css/less/responsive.less css/bs/bootstrap-responsive.css
./node_modules/.bin/lessc --compress css/less/bootstrap.less css/bs/bootstrap.min.css
./node_modules/.bin/lessc --compress css/less/responsive.less css/bs/bootstrap-responsive.min.css
 
# edit the few lines below to not include responsive's css into final bootstrap css
 
cat css/bs/bootstrap.css css/bs/bootstrap-responsive.css >> css/bootstrap.css
cat css/bs/bootstrap.min.css css/bs/bootstrap-responsive.min.css >> css/bootstrap.min.css
 
"
 
# need help ? if no args and help flags
if [ "$1" == '-h' ]
then
cat <<EOF
 
Usage:
 
h5bp-twitter-bootstrap [-h] [dirname]
 
EOF
exit
fi
 
 
echo "
 
Cool, let's start.
 
"
 
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 "
1a. Get html5boilerplate project (git clone into ./tmp/h5bp)
"
 
if ! [ -d .tmp/h5bp ]
then git clone $h5bp_remote .tmp/h5bp || exit 1
fi
 
cd .tmp/h5bp
[ $(git branch | grep "*" | sed s/*//) != $h5bp_branch ] &&
# not the current branch, attempt to create new branch
git checkout -b $h5bp_branch origin/$h5bp_branch ||
# if already created, then attempt to checkout
git checkout $h5bp_branch
 
git pull && cd $src
 
echo "
1b. Get h5bp/ant-build-script project (git clone into ./tmp/ant-build-script)
"
 
if ! [ -d .tmp/ant-build-script ]
then git clone $ant_build_script_remote .tmp/ant-build-script || exit 1
fi
 
cd .tmp/ant-build-script
[ $(git branch | grep "*" | sed s/*//) != $ant_build_script_branch ] &&
# not the current branch, attempt to create new branch
git checkout -b $ant_build_script_branch origin/$ant_build_script_branch ||
# if already created, then attempt to checkout
git checkout $ant_build_script_branch
 
git pull && cd $src
 
echo "
2. Get twitter bootstrap project (git clone into ./tmp/bootstrap).
"
if ! [ -d .tmp/bootstrap ]
then git clone $bootstrap_remote .tmp/bootstrap || exit 1
fi
 
cd .tmp/bootstrap
[ $(git branch | grep "*" | sed s/*//) != $bootstrap_branch ] &&
# not the current branch, attempt to create new branch
git checkout -b $bootstrap_branch origin/$bootstrap_branch ||
# if already created, then attempt to checkout
git checkout $bootstrap_branch
 
git pull && cd $src
 
 
echo "
3. Create html5boilerplate directory/file structure by running build/createproject.sh
"
cd .tmp/h5bp && ../ant-build-script/createproject.sh project && cd $src
mkdir -p $name
echo "Created directory: $name"
cd .tmp/h5bp && cp -r -- css js img *.html *.xml *.txt *.png *.ico .htaccess "../../$name"
echo "Created h5bp project's structure: $name"
cd $src
 
echo "
4. Copy bootstrap's 'less' folder to 'css/less/' (or any other path you'd like, following assumes 'css/less/')
"
cp -vr .tmp/bootstrap/less $name/css/less
echo "Create bootstrap's less directory in css/less"
 
# Commenting out the reset bootstrap drop. By default, the whole bootstrap's css files is used and h5bp's one
# is renamed into h5bp.css. The style.css file importing the css assets does not use h5bp.css.
 
# 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 "
5. Create the app.css file
"
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.
 
========================================================================== */
 
" > $name/css/app.css
 
echo "
6. Go in 'css', rename h5bp's 'style.css' to 'h5bp.css'.
"
cd $name/css && mv style.css h5bp.css && cd $src
 
echo "
7. Create a new 'css/style.css' file:
"
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 bootstrap's style first,
then your specific CSS files.
 
Following assumes an app.css to put specific CSS rules.
 
Both unminified and minified version of bootstrap's css will be generated by the
less script command. You may want to switch the bootstrap.css to bootstrap.min.css
 
========================================================================== */
 
@import url('bootstrap.css');
@import url('app.css');
 
" > $name/css/style.css
 
echo "
8. Processing of bootstrap's plugins, you'll be prompted for each files in
.tmp/bootstrap/js/ directory. Simply put a y/n to tell wheter you want them
included and concat'd to the js/plugins.js file.
 
Note that popover plugin requires tooltip to be included fist, so be sure to
tell this script to include both tooltip / popover. You'll be prompted for
tooltip plugin at first.
"
 
 
cd .tmp/bootstrap/js/
for f in $PLUGINS; do
 
while [ "$yepnope" != "y" -a "$yepnope" != "n" -a "$yepnope" != "yep" -a "$yepnope" != "nope" ]
do
read -p "$f >> $name/js/plugins.js: (yep) " yepnope || exit
[ -z $yepnope ] && yepnope="yep"
 
[ "$yepnope" == "y" -o "$yepnope" == "n" ] ||
[ "$yepnope" == "yep" -o "$yepnope" == "nope" ] ||
echo "Incorrect value"
done
 
[ "$yepnope" == "y" -o "$yepnope" == "yep" ] && cat $f >> $src/$name/js/plugins.js
unset yepnope
done
cd $src
 
 
echo "
9. Init npm package for the website
"
cd $name && npm init || exit 0
 
echo "You may want to tweak the package.json file, only name/version are mandatory."
 
echo "
10. Add less as package.json's dependency (npm install less --save)
"
npm install less --save || exit 0
 
echo "
11. Add an npm script to trigger the less build.
"
mv package.json package.json.orig
cat package.json.orig | sed "$ s/}/ , \"scripts\": { \"less\": \"sh build-bootstrap.sh\" } }/g" > package.json
echo "$LESS_CMDS" > build-bootstrap.sh
cd $src
 
echo "
12. Leaving out temporary dirs (.tmp/). You may want to remove this dir or let it be so that
next builds will pull instead of clones (significantly faster).
 
This is relative to the current working directory though: $src
"
 
 
echo "
13. Running a first compile step to generate $name/css/bootstrap.css
"
cd $name && npm run-script less || exit 0
 
echo "
 
All done!
 
Check out the $name directory.
 
Simply run 'npm run-script less' to trigger the less compile step.
 
"
package.json
JSON
1 2 3 4 5 6 7
{
"author": "mklabs",
"name": "h5bp-twitter-bootstrap",
"description": "Shell script to quickly setup a project using html5boilerplate and twitter bootstrap",
"version": "0.0.2",
"bin": "./h5bp-twitter-bootstrap"
}
readme.md
Markdown

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, 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.

install

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

usage

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 init is run.

Running h5bp-twitter-bootstrap -h will output usage below:

Usage:

  h5bp-twitter-bootstrap [-h] [dirname]

Directory structure

→ 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 to css/less/ (or any other path you'd like, following assumes css/less/)
  • Creates an empty app.css file.
  • Go in css, rename h5bp's style.css to h5bp.css.
  • Create a new css/style.css file.

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 init and follow instructions).
    • You may want to tweak the package.json file, 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.
  • 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.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.