Skip to content

Instantly share code, notes, and snippets.

@mklabs

mklabs/bootstrap-plugins.txt

Created December 2, 2011 11:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mklabs/1422879 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mklabs/1422879 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mklabs revised this gist Feb 4, 2012. 1 changed file with 23 additions and 4 deletions.
    27 changes: 23 additions & 4 deletions h5bp-twitter-bootstrap
    View file
    Original file line number Diff line number Diff line change
    @@ -8,10 +8,26 @@ bootstrap_remote=git://github.com/twitter/bootstrap.git

    ant_build_script_branch=master
    h5bp_branch=master
    bootstrap_branch=master
    bootstrap_branch=2.0-wip

    trim() { echo $1; }
    # 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' ]
    @@ -158,6 +174,9 @@ echo "
    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');
    @@ -176,7 +195,6 @@ echo "
    "


    PLUGINS=$(cat bootstrap-plugins.txt)
    cd .tmp/bootstrap/js/
    for f in $PLUGINS; do

    @@ -212,7 +230,8 @@ 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\": \".\/node_modules\/.bin\/lessc --compress .\/css\/less\/bootstrap.less > css\/bootstrap.css\" } }/g" > package.json
    cat package.json.orig | sed "$ s/}/ , \"scripts\": { \"less\": \"sh build-bootstrap.sh\" } }/g" > package.json
    echo "$LESS_CMDS" > build-bootstrap.sh
    cd $src

    echo "
  2. mklabs revised this gist Feb 4, 2012. 2 changed files with 25 additions and 5 deletions.
    12 changes: 12 additions & 0 deletions bootstrap-plugins.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,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
    18 changes: 13 additions & 5 deletions h5bp-twitter-bootstrap
    100644 → 100755
    View file
    Original file line number Diff line number Diff line change
    @@ -2,14 +2,17 @@


    src=$PWD
    ant_build_script_remote=https://github.com/h5bp/ant-build-script.git
    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=master

    trim() { echo $1; }


    # need help ? if no args and help flags
    if [ "$1" == '-h' ]
    then
    @@ -54,7 +57,7 @@ then git clone $h5bp_remote .tmp/h5bp || exit 1
    fi

    cd .tmp/h5bp
    [ $(git branch | grep "*" | sed s/^"* "//) != $h5bp_branch ] &&
    [ $(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
    @@ -71,7 +74,7 @@ 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 ] &&
    [ $(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
    @@ -87,7 +90,7 @@ then git clone $bootstrap_remote .tmp/bootstrap || exit 1
    fi

    cd .tmp/bootstrap
    [ $(git branch | grep "*" | sed s/^"* "//) != $bootstrap_branch ] &&
    [ $(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
    @@ -166,11 +169,16 @@ 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.
    "


    PLUGINS=$(cat bootstrap-plugins.txt)
    cd .tmp/bootstrap/js/
    for f in *.js; do
    for f in $PLUGINS; do

    while [ "$yepnope" != "y" -a "$yepnope" != "n" -a "$yepnope" != "yep" -a "$yepnope" != "nope" ]
    do
  3. @fernandoacorreia fernandoacorreia revised this gist Feb 3, 2012. 1 changed file with 22 additions and 3 deletions.
    25 changes: 22 additions & 3 deletions h5bp-twitter-bootstrap
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,11 @@


    src=$PWD
    ant_build_script_remote=https://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=master

    @@ -44,7 +46,7 @@ done
    [ -d $name ] && echo "Directory $name already exists" && exit 1

    echo "
    1. Get html5boilerplate project (git clone into ./tmp/h5bp)
    1a. Get html5boilerplate project (git clone into ./tmp/h5bp)
    "

    if ! [ -d .tmp/h5bp ]
    @@ -60,6 +62,23 @@ cd .tmp/h5bp

    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).
    "
    @@ -80,10 +99,10 @@ git pull && cd $src
    echo "
    3. Create html5boilerplate directory/file structure by running build/createproject.sh
    "
    cd .tmp/h5bp && ./build/createproject.sh project && cd $src
    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 build *.html *.xml *.txt *.png *.ico .htaccess "../../$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

  4. @fernandoacorreia fernandoacorreia revised this gist Feb 2, 2012. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion h5bp-twitter-bootstrap
    View file
    Original file line number Diff line number Diff line change
    @@ -88,7 +88,7 @@ echo "Created h5bp project's structure: $name"
    cd $src

    echo "
    4. Copy bootstrap's 'lib' folder to 'css/less/' (or any other path you'd like, following assumes 'css/less/')
    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"
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -64,7 +64,7 @@ Running `h5bp-twitter-bootstrap -h` will output usage below:
    * 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 `lib/` folder to `css/less/` (or any other path you'd
    * 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`.
  5. @fernandoacorreia fernandoacorreia revised this gist Feb 2, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion h5bp-twitter-bootstrap
    View file
    Original file line number Diff line number Diff line change
    @@ -90,7 +90,7 @@ cd $src
    echo "
    4. 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
    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
  6. @fernandoacorreia fernandoacorreia revised this gist Feb 2, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions h5bp-twitter-bootstrap
    100755 → 100644
    View file
    Original file line number Diff line number Diff line change
    @@ -52,7 +52,7 @@ then git clone $h5bp_remote .tmp/h5bp || exit 1
    fi

    cd .tmp/h5bp
    [ $(git br | grep "*" | sed s/^"* "//) != $h5bp_branch ] &&
    [ $(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
    @@ -68,7 +68,7 @@ then git clone $bootstrap_remote .tmp/bootstrap || exit 1
    fi

    cd .tmp/bootstrap
    [ $(git br | grep "*" | sed s/^"* "//) != $bootstrap_branch ] &&
    [ $(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
  7. mklabs revised this gist Jan 27, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion h5bp-twitter-bootstrap
    100644 → 100755
    View file
    Original file line number Diff line number Diff line change
    @@ -185,7 +185,7 @@ echo "
    11. Add an npm script to trigger the less build.
    "
    mv package.json package.json.orig
    cat package.json.orig | sed '$ s/}/ , "scripts": {\n "less": ".\/node_modules\/.bin\/lessc --compress .\/css\/less\/bootstrap.less > css\/bootstrap.css"\n }\n}/g' > package.json
    cat package.json.orig | sed "$ s/}/ , \"scripts\": { \"less\": \".\/node_modules\/.bin\/lessc --compress .\/css\/less\/bootstrap.less > css\/bootstrap.css\" } }/g" > package.json
    cd $src

    echo "
  8. mklabs revised this gist Jan 26, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion h5bp-twitter-bootstrap
    View file
    Original file line number Diff line number Diff line change
    @@ -185,7 +185,7 @@ echo "
    11. 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
    cat package.json.orig | sed '$ s/}/ , "scripts": {\n "less": ".\/node_modules\/.bin\/lessc --compress .\/css\/less\/bootstrap.less > css\/bootstrap.css"\n }\n}/g' > package.json
    cd $src

    echo "
  9. mklabs revised this gist Jan 25, 2012. 1 changed file with 4 additions and 6 deletions.
    10 changes: 4 additions & 6 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

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

    @@ -8,10 +7,8 @@ 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.

    Following assumes you have both git and npm (so node too) installed and
    available in your path.
    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
    @@ -21,7 +18,8 @@ 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`.
    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

  10. mklabs revised this gist Jan 25, 2012. 2 changed files with 9 additions and 4 deletions.
    Empty file modified h5bp-twitter-bootstrap
    100755 → 100644
    View file
    Empty file.
    13 changes: 9 additions & 4 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@
    # h5bp + twitter bootstrap integration

    Shell script to quickly setup a project using html5boilerplate and
    twitter bootstrap.
    @@ -71,7 +70,9 @@ Running `h5bp-twitter-bootstrap -h` will output usage below:
    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:
    * Create a new `css/style.css` file.

    And adds the following:


    /* =============================================================================
    @@ -105,7 +106,7 @@ instructions).
    * Add less as package.json's depdendency (npm install less --save).
    * Add an npm script to trigger the less build:

    package.json:
    **package.json:**

    {
    "name": "foobar",
    @@ -118,7 +119,11 @@ package.json:
    "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.


    Command is `./node_modules/.bin/lessc --compress ./css/less/bootstrap.less > css/bootstrap.css`.
    Once done, you may run `npm run-script less` to rebuild the css if needed.

  11. mklabs revised this gist Jan 25, 2012. 3 changed files with 37 additions and 34 deletions.
    8 changes: 5 additions & 3 deletions h5bp-twitter-bootstrap
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ h5bp_remote=git://github.com/h5bp/html5-boilerplate.git
    bootstrap_remote=git://github.com/twitter/bootstrap.git

    h5bp_branch=master
    bootstrap_branch=2.0-wip
    bootstrap_branch=master

    # need help ? if no args and help flags
    if [ "$1" == '-h' ]
    @@ -189,9 +189,11 @@ awk 'f==1{print last}{last=$0;f=1}END{print " , \"scripts\": {\n \"less\": \
    cd $src

    echo "
    12. Cleaning out temporary dirs.
    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
    "
    #rm -rf .tmp


    echo "
    4 changes: 2 additions & 2 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,6 @@
    "author": "mklabs",
    "name": "h5bp-twitter-bootstrap",
    "description": "Shell script to quickly setup a project using html5boilerplate and twitter bootstrap",
    "version": "0.0.1",
    "version": "0.0.2",
    "bin": "./h5bp-twitter-bootstrap"
    }
    }
    59 changes: 30 additions & 29 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,9 @@ 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.

    Following assumes you have 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
    @@ -19,8 +22,7 @@ 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.
    Bootstrap's plugins can be concat'd to `js/plugins.js`.

    ## install

    @@ -37,39 +39,39 @@ Through npm:

    ## usage

    Just run `h5bp-twitter-boostrap`. You'll be prompted for a directory name,
    then by npm when the `npm init` is run.
    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
    → examples
    → img
    → js
    | → libs
    | → mylibs


    1. Get html5boilerplate project (git clone into ./tmp/h5bp)
    2. Get twitter bootsrap (git clone into ./tmp/bootstrap).
    3. Create html5boilerplate directory/file structure by running build/createproject.sh
    4. Copy bootstrap's `lib/` folder to `css/less/` (or any other path you'd
    * 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 `lib/` folder to `css/less/` (or any other path you'd
    like, following assumes `css/less/`)
    5. Create an empty app.css file.
    5. Go in `css`, rename h5bp's `style.css` to `h5bp.css`.
    6. Create a new `css/style.css` file.

    Add the following:
    * 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:


    /* =============================================================================
    @@ -89,15 +91,19 @@ Add the following:
    @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
    * 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
    * 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).
    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:
    * 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:

    @@ -106,7 +112,7 @@ package.json:
    "description": "fancy description",
    "version": "0.0.1",
    "dependencies": {
    "less": "~1.1.5"
    "less": "~1.2.1"
    },
    "scripts": {
    "less": "./node_modules/.bin/lessc --compress ./css/less/bootstrap.less > css/bootstrap.css"
    @@ -116,8 +122,3 @@ package.json:

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

    ##### todos

    * tarball download instead of git clone.
    * also get the bootstrap's JS files, have them handled by a build script.
    * fully integrate with h5bp's build script, or a lighten version.
  12. mklabs revised this gist Jan 25, 2012. 2 changed files with 110 additions and 33 deletions.
    131 changes: 103 additions & 28 deletions h5bp-twitter-bootstrap
    100644 → 100755
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,11 @@


    src=$PWD
    dirname=$(dirname $(readlink -f $0))
    h5bp_remote=git://github.com/h5bp/html5-boilerplate.git
    bootstrap_remote=git://github.com/twitter/bootstrap.git

    h5bp_branch=master
    bootstrap_branch=2.0-wip

    # need help ? if no args and help flags
    if [ "$1" == '-h' ]
    @@ -17,6 +21,7 @@ EOF
    exit
    fi


    echo "
    Cool, let's start.
    @@ -38,34 +43,66 @@ done

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

    echo -e "\n1. Get html5boilerplate project (git clone into ./tmp/h5bp)"
    ! [ -d .tmp/h5bp ] && git clone https://github.com/h5bp/html5-boilerplate.git .tmp/h5bp
    cd .tmp/h5bp && git pull && cd $src
    echo "
    1. 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 br | 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 "
    2. Get twitter bootstrap project (git clone into ./tmp/bootstrap).
    "
    if ! [ -d .tmp/bootstrap ]
    then git clone $bootstrap_remote .tmp/bootstrap || exit 1
    fi

    echo -e "\n2. Get twitter bootsrap project (git clone into ./tmp/h5bp)."
    ! [ -d .tmp/bootstrap ] && git clone https://github.com/twitter/bootstrap.git .tmp/bootstrap
    cd .tmp/bootstrap && git pull && cd $src
    cd .tmp/bootstrap
    [ $(git br | 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

    echo -e "\n3. Create html5boilerplate directory/file structure by running build/createproject.sh"
    git pull && cd $src


    echo "
    3. 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 -e "\n4. Copy bootstrap's 'lib' folder to 'css/less/' (or any other path you'd like, following assumes 'css/less/')"
    echo "
    4. 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 "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 -e "\n5. Go in 'css/less', edit the bootstrap.less file and remove the '@import \"reset.less\";' line."
    # 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 -e "\n5. Create the app.css file"
    echo "
    5. Create the app.css file
    "
    echo "
    /* =============================================================================
    @@ -79,10 +116,14 @@ echo "
    " > $name/css/app.css

    echo -e "\n6. Go in 'css', rename h5bp's 'style.css' to 'h5bp.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 -e "\n7. Create a new 'css/style.css' file:"
    echo "
    7. Create a new 'css/style.css' file:
    "
    echo "
    /* =============================================================================
    @@ -93,8 +134,7 @@ echo "
    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. Bootstrap also provides
    an app.less file serving the exact same purpose, but using less instead.
    Following assumes an app.css to put specific CSS rules.
    ========================================================================== */
    @@ -103,26 +143,61 @@ echo "
    " > $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.
    "


    cd .tmp/bootstrap/js/
    for f in *.js; 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 -e "\n8. Init npm package for the website"
    cd $name && npm init
    echo "
    9. Init npm package for the website
    "
    cd $name && npm init || exit 0

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

    echo -e "\n9. Add less as package.json's dependency (npm install less --save)"
    npm install less --save
    echo "
    10. Add less as package.json's dependency (npm install less --save)
    "
    npm install less --save || exit 0

    echo -e "\n10. Add an npm script to trigger the less build."
    echo "
    11. 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
    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 -e "\n11. Cleaning out temporary dirs."
    rm -rf .tmp
    echo "
    12. Cleaning out temporary dirs.
    "
    #rm -rf .tmp


    echo -e "\n12. Running a first compile step to generate $name/css/bootstrap.css"
    cd $name && npm run-script less
    echo "
    13. Running a first compile step to generate $name/css/bootstrap.css
    "
    cd $name && npm run-script less || exit 0

    echo "
    @@ -132,4 +207,4 @@ Check out the $name directory.
    Simply run 'npm run-script less' to trigger the less compile step.
    "
    "
    12 changes: 7 additions & 5 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,9 @@ twitter bootstrap. Following assumes a build process and relies on
    bootstrap's less files.

    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.
    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.
    @@ -22,9 +24,9 @@ available in your path.

    ## 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.
    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.
    @@ -118,4 +120,4 @@ Command is `./node_modules/.bin/lessc --compress ./css/less/bootstrap.less > css

    * tarball download instead of git clone.
    * also get the bootstrap's JS files, have them handled by a build script.
    * fully integrate with h5bp's build script, or a lighten version.
    * fully integrate with h5bp's build script, or a lighten version.
  13. mklabs revised this gist Dec 6, 2011. 2 changed files with 78 additions and 37 deletions.
    82 changes: 58 additions & 24 deletions h5bp-twitter-bootstrap
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,28 @@
    #!/bin/sh
    #!/usr/bin/env bash


    src=$PWD
    dirname=$(dirname $(readlink -f $0))

    # 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.
    "

    src=$PWD


    if [ $# -eq 1 ]
    then
    # get a name for new project from command line arguments
    @@ -25,75 +38,96 @@ done

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

    echo "\n1. Get html5boilerplate project (clone, zip file, use of h5bp-cake createproject)"
    echo -e "\n1. Get html5boilerplate project (git clone into ./tmp/h5bp)"
    ! [ -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."
    echo -e "\n2. Get twitter bootsrap project (git clone into ./tmp/h5bp)."
    ! [ -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"
    echo -e "\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/')"
    echo -e "\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
    # 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 -e "\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'."
    echo -e "\n5. 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 -e "\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 -e "\n7. 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 h5bp's style first,
    then bootstrap.css, then your specific CSS files.
    statements. Use a single style.css file with bootstrap's style first,
    then your specific CSS files.
    h5bp's style first.
    Following assumes an app.css to put specific CSS rules. Bootstrap also provides
    an app.less file serving the exact same purpose, but using less instead.
    ========================================================================== */
    @import url('h5bp.css');
    @import url('bootstrap.css');
    @import url('app.css');
    " > $name/css/style.css


    echo "\n8. Init npm package for the website"
    echo -e "\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 -e "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)"
    echo -e "\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."
    echo -e "\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."
    echo -e "\n11. Cleaning out temporary dirs."
    rm -rf .tmp

    echo "\n\nAll done!"

    echo -e "\n12. Running a first compile step to generate $name/css/bootstrap.css"
    cd $name && npm run-script less

    echo "
    All done!
    Check out the $name directory.
    Simply run 'npm run-script less' to trigger the less compile step.
    33 changes: 20 additions & 13 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,11 +11,8 @@ 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.
    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.
    @@ -25,7 +22,7 @@ available in your path.

    ## install

    h5bp-plus-bootstrap is a simple (and dumb) [shell script](https://raw.github.com/gist/1422879/h5bp-twitter-bootstrap), so you can drop it somewhere in
    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.

    @@ -38,9 +35,15 @@ Through npm:

    ## usage

    Just run `h5bp-plus-boostrap`. You'll be prompted for a directory name,
    Just run `h5bp-twitter-boostrap`. You'll be prompted for a directory name,
    then 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
    @@ -55,13 +58,12 @@ then by npm when the `npm init` is run.
    | → 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
    1. Get html5boilerplate project (git clone into ./tmp/h5bp)
    2. Get twitter bootsrap (git clone into ./tmp/bootstrap).
    3. Create html5boilerplate directory/file structure by running build/createproject.sh
    4. 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. Create an empty app.css file.
    5. Go in `css`, rename h5bp's `style.css` to `h5bp.css`.
    6. Create a new `css/style.css` file.

    @@ -112,3 +114,8 @@ package.json:

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

    ##### todos

    * tarball download instead of git clone.
    * also get the bootstrap's JS files, have them handled by a build script.
    * fully integrate with h5bp's build script, or a lighten version.
  14. mklabs revised this gist Dec 2, 2011. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    # h5bp + twitter bootstrap integration

    Shell script to quickly setup a project using html5boilerplate and
    @@ -26,7 +25,7 @@ available in your path.

    ## install

    h5bp-plus-bootstrap is a simple (and dumb) shell script, so you can drop it somewhere in
    h5bp-plus-bootstrap is a simple (and dumb) [shell script](https://raw.github.com/gist/1422879/h5bp-twitter-bootstrap), so you can drop it somewhere in
    your $PATH. It's particularly handy if you have a collection of dotfiles
    and bin helpers.

    @@ -35,7 +34,7 @@ to perform the install.

    Through npm:

    npm install https://gist.github.com/gists/gistid/download -g
    npm install https://gist.github.com/gists/1422879/download -g

    ## usage

  15. mklabs created this gist Dec 2, 2011.
    101 changes: 101 additions & 0 deletions h5bp-twitter-bootstrap
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    #!/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.
    "
    7 changes: 7 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    {
    "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"
    }
    115 changes: 115 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@

    # 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/gistid/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`.