I took the redesign of Passion for Coding as an opportunity to learn Twitter Bootstrap and also to learn som PHP by writing a WordPress theme.

Bootstrap is Awesome

Working with Bootstrap is totally awesome. For the first time when doing web page layout I didn’t have divs jumping around all over the place with a minor change in one place wreaking havoc to the entire layout.

I had no intentions to create any graphically exciting design. Actually I was quite happy with the clean simple layout I had before – until I opened it on a tablet or even worse on smartphone. So what I wanted was a simple, clean layout that set focus on the content and works fine for reading on all kinds of devices.

When reading on a computer I hate page layouts that make use of the full width of the screen for the text. The lines simply get too long. There’s a reason that most news papers use columns. To get that effect I first set up a wrapping <div class="container"> around the entire content. That’s what centers the content on wide displays. The boostrap media queries in the CSS make the container wider in descrete steps (unless the screen is really small). Having layout that changes in fixed steps make sizing much easier.

I then used the bootstrap grid system to create a wide area for the article itself and a smaller sidebar. When the screen size shrinks, the article can take the full container width and the sidebar content is moved below the post. All that magic is done with one CSS class:

<div id="primary" class="col-md-8 post-list">

The col-md-8 class is made up of three parts. col for column., md for medium devices and larger. 8 to use 8 of the 12 columns of the grid. For screen sizes below the medium threshold (992px) the div will take the full width.

For the sidebar, the case is somewhat more complicated. On a large display it should take 4 columns, in the medium range I organize the sidebar content in two columns below the content and on small devices the sidebar is once again one column. That is possible too, but with some more CSS classes:

<div class="col-md-4 col-sm-6">

Neat and simple. No more divs jumping around all over the page.

The nav-bar is another great feature of bootstrap. It provides a nice menu that is gracefully compacted on smaller devices. Getting the social media icons to the right of the nav-bar and then moving to the bottom of the drop-down menu when the screen was shrinked took some time for me though.

Creating the nav-bar posed one great challenge though. A challenge that was not with bootstrap.

WordPress doesn’t Play Well with Bootstrap

The challenge is that WordPress doesn’t play well with Bootstrap. That’s neither WordPress’ fault nor Bootstrap’s fault. The problem is the different design philosophies.

Bootstrap is built around the idea that the CSS is fixed and CSS classes are inserted into the HTML to activate the goodies of the CSS. The CSS classes for bootstrap describes the layout.

WordPress is built around the idea that it creates a common html structure with a lot of semantic CSS classes. The CSS classes of WordPress describes the content.

With Bootstrap the idea is to do as little as possible with the CSS and focus on picking the right functions through the smart CSS classes. With WordPress the idea is that various parts of the system emits standard html with so many different classes that it is always possible to write a CSS selector for any element on the page. Bootstrap expects the Html to be adopted to the existing CSS structure while WordPress expects the CSS to be adopted to the existing html structure.

Those two ideas doesn’t play well together. I had problems in two areas:

• The menu. I found an used a custom menu structure walker where I could emit the html I needed for the menu.
• The comment form. I simply ignored the wordpress functions and built my own form with the same field names.

Html 5 Form Validation

Talking about the comment form, I used HTML 5 form validation on it. No need for javascript. No hidden spans with error messages. Just declarative information on what type of info should go where and the browser handles the rest. So simple to use.

But, there’s no control over when or how the messages are shown so I assume that for a lot of projects it is not an option.

The source

My intention when writing the theme was to keep it simple. I’ve not created separate layouts for archive listings etc. The core file of theme is index.php that displays a page. It includes some other files – both things that wordpress helps with putting in other files (e.g. header.php as well as things that I’ve moved out myself to be able to reuse(e.g. pager.php).

The entire source is available under GPLv2 on https://github.com/AndersAbel/pfc-theme, so feel free to use it or extend it. If you have any use for it, please let me know in a comment!