Within my job we are quite frequently faced with creating web pages and in order to improve the look and feel we have made (intensively) use of jQuery. Because of this we keep an eye on developments in this area, although it is not our main area of expertise, particularly for items that may help us in making our job easier.
Something that, from our perspective, seems to be emerging is Bootstrap. Bootstrap is, as they state on their site:
Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Curious as I am I thought I have a look into this. The first thing I wanted to do is get Bootstrap up and running on my own laptop(s). One had Fedora 20 installed, the other is running CentOS 6.4. Both already have Apache installed and running.
For the installation of Bootstrap I decided to use Bower, as indicated on the Bootstrap getting started page. In order to install Bower firstly npm and git need to be installed: sudo yum install npm git
Once these are installed bower can be installed sudo npm install -g bower
On the getting started page of Bootstrap also the following is indicated:
If you work with Bootstrap’s uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter’s CSS hinter based on less.js.
As such I also installed Recess: sudo npm install -g recess
If you prefer to use LESS itself, this can be installed with sudo npm install -g less
Now that I had Bower installed I could install Bootstrap. This is to be done in your webserver’s “main directory”, which in my case is /var/www/html. Thus: cd /var/www/html
bower install bootstrap
This will create a subdirectory called bower_components which in its turn has a bootstrapand a jquery subdirectory.
One of the things I noticed is that the content of the html pages of Bootstrap somewhat looked “funny”. They have some sort of heading and after that just content for the pages. Looking around, using my “good friend” I found out that I also needed a parsing engine and mostly suggested was Jekyll.
Since Jekyll is bundled as a ruby gem and therefor we first need to install the required packages sudo yum install rubygems ruby-devel
Once these are installed Jekyll can be installed as follows sudo gem install jekyll
Now if we go into the earlier created bootstrap directory we can use jekyll cd /var/www/html/bower_components/bootstrap
jekyll serve
Based on the settings in _config.yml and other content jekyll will create webpages in the directory that is indicated in _config.yml (default for Bootstrap is _gh_pages) and start a “server” $ jekyll serve
Configuration file: /var/www/html/bower_components/bootstrap/_config.yml
Source: /var/www/html/bower_components/bootstrap
Destination: ./_gh_pages
Generating... done.
Server running... press ctrl-c to stop.
In the configuration file also the port is indicated via which the server can be reached, the default that Bootstrap uses is 9001. So now when you open the page <your web server addres>:9001 you will see Bootstrap running.
Another option is, since Jekyll also created the pages that can be published on a web server, so with more recognizable html content, is to open the _gh_pages directory from your web server.