A picture of Mark Chambers, a white guy with a full beard wearing a white button-up shirt and a loosened collar and necktie.

In the early 1990s, elementary schools across the US were opening the first “computer labs”. As a 9-year-old, using an Apple IIe and being responsible for my own floppy disk was pretty cool. One of our projects was to write a short fantasy story. Once we had our final draft, we entered it into a word processor, saved it to our disk and gave it to our teacher. Each student's story — along with our own illustrations — was compiled into a book. In retrospect, there was likely a purpose behind this assignment. My first impression of the computer had been connected with creativity.

The computer lab got an upgrade almost every year. We watched it go from megahertz to gigahertz, megabytes to gigabytes, 2-tone screens to millions of colors, floppy disks to thumb drives. It was an exciting time to grow up! If that was your thing.

Public libraries 

In 1995, we purchased our first family computer, an IBM Aptiva. Having our own computer at home was very different. I stopped visiting the public libray. It was a gaming was Microsoft Paint. I recall painstakingly illustrating the front of a diesel locomotive pixel by pixel.

Our generation either embraced the computer or got by without it.

Having mastered my first video game titles like Myst, Tomb Raider, and MechWarrior II, I started dabbling with Microsoft Paint. I recall painstakingly illustrating the front of a diesel locomotive pixel by pixel. I actually found the file.

Later I got my hands on Adobe Photoshop and started experimenting with photo manipulation and layers.

“Yes, I love technology,
But not as much as you, you see,
But still I love technology,
Always and forever.”

This new hobby continued on the first floor. In my sister's bedroom sat a brand new beautiful blue and white Apple Power Macintosh G3. After adding a few more video games to my repertoire (Avernum, Cythera, Riven) I decided to put my graphics skills to practical use. I began building my own Smashing Pumpkins fan website from the ground up with the original Macromedia Dreamweaver. DW never did what you wanted it to, so I learned HTML by studying the code it generated. It was this foundation which would later help me find my way into the professional world.

I put my creativity on hold for a couple years. After working in the service sector, doing a bit of travelling and binging on games (StarCraft, Morrowind, Lineage II), it was time to think about my future. I decided to go to college and study graphic and web design — the obvious choice. I enrolled in every art and design class I could, also breaking into photography for the first time.

I bought my first Apple computer for my studies: a brand new Mac Book Pro. It was the first of the Intel line, a vintage machine. That baby was my daily driver for over 10 years. Lots of work done on it, new skills acquired and of course gaming (Age of Empires, Civilization, Railroad Tycoon). Now I'm doing things I never imagined: bringing my designs to life with content management systems. People talk about WordPress, but Drupal is where it's at. I can spend hours on end turning my ideas into realities — it's better than gaming!

Mark Chambers

Overview

  1. Install LESS Compiler
  2. Create the subtheme
  3. Download Bootstrap source
  4. Compile the LESS files
  5. Enable Your Subtheme
  6. Copy template files from the parent theme (Optional)
  7. Closing

1: Install LESS Compiler

These instructions are for Ubuntu 12.04 LTS. It may need to be slightly adjusted for other versions of Linux.

1.1: Install NVM (Node Version Manager)

Install a C++ Compiler

As a matter of best practice we’ll update our packages:

sudo apt-get update

The build-essential package should already be installed, however, we’re going still going to include it in our command for installation:

sudo apt-get install build-essential libssl-dev

Install NVM (Node Version Manager)

Use the following curl command to kick-off the install script:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

At the time of publication, NVM v0.32.1 was the most recent version available. You should check the GitHub project page for the latest release of NVM, and adjust the above command to include the newest (or another specific) version.

After running the above command, you may receive output similar to the following:

Close and reopen your terminal to start using nvm

Either do as the output suggests, and close and reopen your terminal session, or run the following command:

source ~/.profile

Verify the Installation

We can quickly verify that NVM is now installed and working properly with the following command:

nvm --version

Which in this case would yield a result of:

0.32.1

Another very useful command to get you started on Node.js management is:

nvm help

1.2: Install Node.js via NVM

Check Available Node.js Versions

Versions that are available for installation:

nvm ls-remote

To download, compile, and install the latest LTS release:

nvm install --lts

Note: If you want the latest stable release, then it’s simply nvm install latest.

If you see the message nvm_ensure_default_set: a version is required then run this:

nvm alias default 6.9.1

Now to display currently activated version run:

nvm current

Which gives the output:

v6.9.1

In this case I am now running v6.9.1.

nvm ls

Gives the following output:

->       v6.9.1
default -> 6.9.1 (-> v6.9.1)
node -> stable (-> v6.9.1) (default)
stable -> 6.9 (-> v6.9.1) (default)
iojs -> N/A (default)
lts/* -> lts/boron (-> v6.9.1)
lts/argon -> v4.6.2 (-> N/A)
lts/boron -> v6.9.1

And finally, if you want to modify PATH to use another installed version, use the following command:

nvm use x.x.x

Which returns:

Now using node vx.x.x

1.3: Install Grunt

From the command line:

Install grunt-cli globally with:

npm install -g grunt-cli

When completed, you'll be able to run the various Grunt commands provided from the command line that we will need in Step 4.

2: Create Bootstrap Subtheme

2.1: Get latest Bootstrap Theme

Download the Drupal Bootstrap theme

Extract/upload to

sites/all/themes

There is no need to activate the theme. We only need this to set up the subtheme.

    2.2: Create the subtheme directory and copy files

    Create a new folder for your subtheme inside

    sites/all/themes

    In our example, we’ll call our subtheme

    my_subtheme

    So we should have an empty directory at

    sites/all/themes/my_subtheme

    Copy all the files from

    sites/all/themes/bootstrap/starterkits/less

    to

    sites/all/themes/my_subtheme

    Your subtheme directory should look like this:
    Subtheme contents

    2.3: Configure your .info file

    Rename

    less.starterkit

    to

    my_subtheme.info

    Remember to replace “my_subtheme” with the name of your own subtheme.

    Edit my_subtheme.info with your text/code editor of choice and give it a unique name and description:

    name = My LESS Bootstrap subtheme
    description = A Bootstrap subtheme for my project
    core = 7.x
    base theme = bootstrap

    Uncomment scripts files

    Since we’re going to compile from source and NOT use the default Bootstrap CDN, uncomment all the  “Scripts” section by removing the semicolons ; in front of each of the javascript files:

    scripts[] = 'bootstrap/js/affix.js'
    scripts[] = 'bootstrap/js/alert.js'
    scripts[] = 'bootstrap/js/button.js'
    scripts[] = 'bootstrap/js/carousel.js'
    scripts[] = 'bootstrap/js/collapse.js'
    scripts[] = 'bootstrap/js/dropdown.js'
    scripts[] = 'bootstrap/js/modal.js'
    scripts[] = 'bootstrap/js/tooltip.js'
    scripts[] = 'bootstrap/js/popover.js'
    scripts[] = 'bootstrap/js/scrollspy.js'
    scripts[] = 'bootstrap/js/tab.js'
    scripts[] = 'bootstrap/js/transition.js'

    Disable Bootstrap CDN

    Remove the semicolon in front of:

    settings[bootstrap_cdn] = ''

    3: Download Bootstrap source

    Download Bootstrap source, extract the files and rename the base directory to

    bootstrap

    Upload the whole directory to your subtheme folder. It should look like this when you’re done:

    my_subtheme/
    ├─ my_subtheme.info
    ├─ bootstrap/
      ├─ dist/
        ├─ css/
        ├─ fonts/
        └─ js/
      ├─ docs/
      ├─ fonts/
      ├─ js/
      ├─ less/
      └─ (etc.)
    ├─ css/
    ├─ less/
    ├─ templates/
    ├─ README.md
    ├─ template.php
    └─ (etc.)
    

    The only folders you need from source are:

    less
    js
    fonts

    The rest is optional, but it doesn’t hurt to have them in there.

    4: Compile the LESS files

    Navigate to the root /bootstrap directory.

    In Drupal 7 on Ubuntu 14.04 LTS this is going to be:

    cd /var/www/html/sites/all/themes/bootstrap

    Then run:

    npm install

    npm will look at the package.json file and automatically install the necessary local dependencies listed there.

    Just compile CSS and JavaScript

    grunt dist

    Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

    Other Grunt commands

    Here is a list of other available Grunt commands.

    Troubleshooting

    Should you encounter problems with installing dependencies or running Grunt commands, first delete the 

    /node_modules/

    directory generated by npm. Then, rerun:

    npm install

    5: Enable jQuery 1.10

    Download/Enable jQuery Update

    Extract/upload to your sites/all/modules

    Set the “Default jQuery Version” to 1.10

    Set “Alternate jQuery version” to 1.5 (This prevents issues with AJAX heavy modules like Views)