Bootstrap is a popular web frontend framework for both CSS and Javascript. Since I utilized CSS components from Bootstrap in the recent rework of my site, I wanted to clean things up such that I reduced the amount of CSS required to render the site. The first step in the process was getting the Sass version of Bootstrap, from Github. Obviously just copying the files into the _sass folder isn’t a very clean way of doing things, since I store the site in Git and the source is on Github I wanted to use a subtree. To make things harder, I didn’t need the Javascript or other files - only the CSS files, which meant I couldn’t do a subtree directly. What follows is an approach (if unfortunately multi-step) to managing Bootstrap CSS as a subtree (or really, any directory of a repository as a subtree).

Adding the Subtree

First you need to add the Boostrap repository as a remote repository. In this command, bootstrap_sass is a short name for the remote repository.

git remote add bootstrap_sass git@github.com:twbs/bootstrap-sass.git

Next you need to make a local branch from the master (or from a different branch if you desire). bootstrap_sass_master is the new local branch, and bootstrap_sass/master references the master branch on the remote with our short name.

git branch bootstrap_sass_master bootstrap_sass/master

Now you simply need to checkout the new local branch.

git checkout bootstrap_sass_master

From this branch, we create our new subtree. squash removes the history from the subtree. prefix indicates what directory to grab from (just the CSS cod), and temp_stylesheets is a temporary branch to split the subtree into.

git subtree split --squash --prefix=assets/stylesheets/bootstrap -b temp_stylesheets

Return to the main Jekyl branch, in our case master

git checkout master

Now we add in the subtree from the branch we just made. In this case, prefix indicates what directory to place the code in - we’ll be putting it in the _sass directory, within it’s own bootstrap directory.

git subtree add --prefix=_sass/bootstrap temp_stylesheets

Delete the temp_stylesheets branch

git branch -D temp_stylesheets

Updating the Subtree

Sometimes you may need to update the subtree to get a new version of Bootstrap. Unfortunately, this is a multi-step process as well.

Start by changing to the bootstrap_sass_master branch

git checkout bootstrap_sass_master

Update the branch with pull

git pull bootstrap_sass_master

Recreate the temp_stylesheets subtree

git subtree split --squash --prefix=assets/stylesheets/bootstrap -b temp_stylesheets

Checkout the master branch again

git checkout master

Merge the subtree

git subtree merge --prefix=_sass/bootstrap temp_stylesheets

Remove temp_stylesheets

git branch -D temp_stylesheets

Parting Thoughts

It’s hard to say if this is a process worth doing. Certainly it takes a lot of steps, but a script to perform the updating would take care of that. I don’t know how well this approach would work if you were looking to push changes back to the remote repository from the subtree, but it should work alright for pulling down dependencies.

For most people, simply downloading the bootstrap files and copying them in to the correct location will likely be sufficient.