Tutorial describing a 5 step setup for a more productive Bootstrap workflow: LESS files are compiled automatically, the browser renders changes instantly, etc.
Creating designs can be very time consuming. Using Twitter Bootstrap already reduces the amount of work by providing readymade pieces of code and a lot of the styling and design are already taken care of.
With the setup in this tutorial we’re going to make your workflow even more productive.You can make your designs with LESS and see changes rendered in the browser instantly.
If you haven’t yet made the step to work this short introduction into LESS will make clear why it boosts your productivity. LESS files need to be compiled into CSS. You can use a LESS code compiler to do this. But that requires you do add this step to your workflow. With the setup in this tutorial your LESS code will be compiled automatically.
5 step setup for a more productive Bootstrap workflow
Using this generator requires that a few other programs are installed on your local machine (Node.js, npm, Bower and Grunt) are installed on your local machine. Steps 1-3 will walk you through the installation of these programs. You only need to do these steps once.
Steps 4 and 5 will tell you how to install the generator and run it. When you start a new design project you only need to repeat these two steps.
1. Installing Node and npm
If Node.js and npm aren’t yet installed on your local machine the first step consists of installing these programs. Installing them is easy and doesn’t require any knowledge of what they do and how they work.
Front-end tools that have been made available to the public can be installed with npm (the Node Package Manager).
The command npm install package_name suffices to locate the package (e.g. on GitHub) and install it on your local machine.
- Visit http://nodejs.org/ and click on the INSTALL button to download the installer (it will automatically detect which platform you’re working on). The installer for Node.js also includes and installs npm.
- When the download has finished double click on the installer package to install Node.js and npm on your machine.
To check if Node.js and npm are installed on your machine open the Command Line/Terminal and use the commands node –version and npm –version. These commands should result in a reply with the version number. If Node.js and npm were already installed on your machine this might be a good moment to check if you have the latest version.
2. Installing Git
Although not always required it’s recommended to also install Git.
Git is a so-called version control system. With Git a developer can keep track of changes made during the development of a program.
- Visit http://git-scm.com/ and download the installer for your platform.
- After the download has finished double-click on the installer package to install Git.
- If you install on a Windows platform choose “Use Git from the Windows Command Prompt” (see image).
- Next it will ask you how Git should treat line endings in text files. Since I’m installing it on a Windows platform I chose the first option “Checkout Windows-style”.
3. Installing Yeoman
In this step we will install Yeoman, Bower and Grunt. The installation of Yeoman will also install the other two programs so it’s actually one step.
Yeoman helps you kickstart a new development project. It provides so-called generators. A generator is a plugin that creates a scaffold for your project.
Think of a scaffold as a temporary structure that contains the files necessary for your project during the development process. It allows you to stage your application and develop it further.
Open the command line or terminal to install Yeoman with npm (which will also take care of the installation of Bower and Grunt):
- On a Windows platform type this command: npm install -g yo
- On a Mac or *nix machine use this command: sudo npm install -g yo
Bower is a package manager designed for front-end packages (e.g. jQuery). The development of an application of requires several packages. One package might depend on another package to work correctly. Bower takes care of these dependencies.Bower and npm are both package managers.
Bower was created for front-end packages (e.g. jQuery or AngularJS) while npm was created to work with back-end packages. Packages installed with Bower will be placed in a bower_components directory. This directory is automatically created when the bower program is executed. Bower manages dependencies through the file “bower.json” while npm manages dependencies through the file “package.json”.
Grunt is a task runner. It takes care of repetitive tasks (e.g. HTML and/or CSS minification, LESS compilation, unit testing, linting, etc). The grunt tasks for a package can be found in the file “Gruntfile.js”.
4. Installing the Bootstrap-Less generator
Because we want to create a scaffold for a Bootstrap LESS project we will use an existing generator that will download all of the necessary files (and take care of its dependencies for us).
- In the command line type: npm install generator-bootstrap-less
You will see a long list of tasks being performed scroll by in the command line. Sit back and wait for this to be finished (the command prompt will re-appear).
After the installation of the generator has finished your project folder will contain a sub-folder called node_modules. Inside the node-modules sub-folder you will see these folders: .bin, bower, generator-bootstrap-less, generator-mocha, grunt-cli and yo.
To quickly open the Windows explorer and see your project folder insert the command explorer . after the prompt (don’t forget the space and dot after explorer).
5. Scaffolding your project with Yeoman
Now that we have installed the Yeoman generator in our project folder we can use it to create the scaffold for designing a new Bootstrap app.
- In the command line type: yo bootstrap-less
- This command will open a Yeoman interface:
When you look at your project folder you will now see (besides the already existing “node-modules” sub folder): the sub folders “app” and “test” and the files “Gruntfile.js”, “bower.json”, “package.json” and a few other files.
When you take a peek inside the sub-folder “node_modules” you will see that several Grunt packages have been added (e.g. grunt-contrib-cssmin, grunt-contrib-less, grunt-contrib-watch). Each of these Grunt packages performs a set of predefined automated tasks such as the minification of the CSS file or the compiling of LESS files to CSS.
Install Bower locally
Based on my experience (and questions by others in the Forum) you also need to install Bower locally. This might be an oversight/bug in the generator which will be fixed later on.
To install Bower locally open the Command Line or Terminal (if it isn’t still open) and go to the root directory of your project.
Type the command Bower install.
Working with your setup
Now that the installation is done we can do a trial run.
Use the command grunt serve. This will open the file “index.html” in your browser. It will look something like this:
Keep the Command Line or Terminal open! (). One of the automated tasks run by Grunt when you use the command grunt serve is the watch task. You can see this at the bottom of the Command Line/Terminal where is says: Running watch task. Waiting … If you (accidentally) close the Command Line/Terminal this will end the watch task and your design changes won’t become visible in your browser. If you do need to open it again: start the command line/terminal, go to your project folder and run the command grunt serve again.
Now go to the folder “app/styles” and open the file “main.less” in your editor.
To check that our setup works correctly we will change the background-color of the Jumbotron. Add
background-color: #C36; to the style rules for
.jumbotron. Save the file “main.less” and you should see the background color for the Jumbotron change in your browser.
If you don’t see the change rendered by the browser the explanation might be that you haven’t got a livereload extension with your browser. You can find more information about how to install a livereload extension for Safari, Chrome and Firefox here.
The setup keeps watch on LESS files inside the “app/styles” folder. If you want to you can rename the “main.less” file and/or add another LESS file (don’t forget to make the necessary corresponding changes in the “index.html” file). The setup doesn’t keep watch on changes to the LESS files in the folder “app/bower_components/bootstrap/less”. But making changes to the original Bootstrap LESS files isn’t recommended anyway (because it would require you to make those changes again when a new Bootstrap version is released).
If you want to know more about designing with LESS these tutorials might be of interest to you: