Redesign with Bootstrap

2013-11-17

 

This website just got a lifting. With the help of Bootstrap the site looks spiffy and the effort to get it work was about 15 minutes. This is the fastest redesign to date.

wooosh

The design is based on the Narrow Jumbotron. Which was easy a quite easy conversion. I dropped the twitter, github and RSS links at the top.

Color

My first issue was getting the color from blue to orange. With the help of paintstrap I got the colors the way I wanted. I had to go over kuler and built this color scheme:

kuler theme

I ended up only using the two orange shades and forced the text to white and black.

To get the active navigation to properly show up was slightly tricky. I added a new field to the YML front matter called "nav":

---
layout: page
title: About
nav: about
---

Then based on this value the proper navigation pill is set to active with a simple liquid if expression.

A little justify CSS and the site was ready to go.