Bracket Labs Blog Namespacing Bootstrap from square one

I recently helped a fellow irc'er figure out how to namespace Bootstrap. At first I linked him to this video: https://www.youtube.com/watch?v=3BtTnvM02Eg&t=426 . But then I realized a video may not be the best way to present this information, especially if you do not have much of a modern dev/build environment setup on your machine. We'll walk through everything you need to install in order to successfully build a namespaced version of Bootstrap, an OS X device.First, let's install HomeBrew. Simply use the one liner you can find here: http://brew.sh/ .Second, we need to install Node using HomeBrew. Type brew install nodeThird, we need to install Grunt by typing:npm install -g grunt-cliNow we should have all the tools we need in order to build a namespaced version of Bootstrap.In order to build, navigate to a folder where you'd like to clone the Bootstrap git repo and type:git clone https://github.com/twbs/bootstrapNow, navigate to ./bootstrap/less/bootstrap.less and add a new line as the first line of the file: .myBootstrapNamespace {then add a new line at the very end of the file:}You have now just wrapped all of the less in a class named myBootstrapNamespace.Now we need to build Bootstrap.Navigate to ./bootstrap and typenpm installOnce that finishes, typegruntAfter a bunch of text scrolls by with the status of various build steps, you should now have your namespaced version of Bootstrap in the ./bootstrap/dist directory. Simply put this version into your static resource in Salesforce, and you can now style your Visualforce page contents using Bootstrap by making a container div within your page like:<apex:page ........> <!-- Include the namespaced css from your static resource --> <div class="my-bootstrap-namespace"> <!-- My HTML Here --> </div> </apex:page>Caveats: Salesforce styles which come down with a VF page with the header on can be very broad, some will override the Bootstrap CSS. Also, keep in mind you are essentially developing your entire page within a <td> element, this can result in some funkyness with inherited properties on your divs, specifically you may need to fiddle with display props to get parents to actually fully contain their children.