2013-04-21

Twitter Bootstap 3: building & reading docs

So I wanted to make my website a little bit fancier. The problem is that I'm not a web designer, I'm bad with modern css & javascript world and I'm not very interested in diving in to it. So I decided to look around - maybe there's something that can help me.

Looks like there is: Twitter Bootstrap is web frontend framework which allows relatively easy build clean but good-looking sites. Current version is 2.3.1, but version 3.0 is just round the corner so I thought it's a good idea to start with it now in order to avoid migration later. The problem is it's poorly documented and it was not very clear where to start from but I decided to try anyway.

Downloading & building

There's no downloads for 3.0 yet, but there's public repo on github. Let's fetch it:

# Clone repo:
git clone git://github.com/twitter/bootstrap.git
cd bootstrap
# Switch to 3.0 branch
git checkout 3.0.0-wip
# Make sure we are using 3.0 as expected:
less README.md
Now, let's build it. We'll need some tools from node.js for it (like jshint). There are no rpm's or other linux-friendly packages for jshint, but there's npm with is some kind of package manager (or my, another one?) for javascript. I'm on Fedora 18, so I can easily install npm. If you are on some other distro you may have to find 3-rd pary package for it first.
sudo yum install npm
# From bootstrap folder: local-install necessary dependencies:
npm install
Now finally let's make it:
make

Yay, It successfully compiled some javascripts. Err... now what?

Bootstrap 3 docs

There are no docs online for version 3. However, there are something in docs/ subdirectory of github repo. It's in weird format, so I had to figure out how to read them.

After a quick Google search I found out that docs may be done by something called Jekyll. Turned out it's a website generator written on Ruby, so there's another package manager comes to play (oh dear...):

sudo yum install ruby-devel
gem install jekyll
It installed jekyll to ~/bin/jekyll, so it's time to run it:

jekyll . /tmp/bootstrap3-docs/
google-chrome /tmp/bootstrap3-docs/docs/index.html &
So, there are docs, but some links are broken because they are absolute starting with /. Let's just serve it on localhost:
cd /tmp/bootstrap3-docs<
python -m SimpleHTTPServer 8000 &
google-chrome http://localhost:8000/ &
Here it is! Now I need to spend some time exploring it before writing next post. :)