AWIA LogoFacebookGoogle Plusicon-codingicon-computericon-designicon-drawicon-drupalicon-maintenanceicon-mapicon-wordpressLinked InTwitter

I've been a busy behind the scenes remaking our website. The new site shouldn't look radically different from the old one. The major changes are behind the scenes. We've moved the site from being Zurb Foundation based Drupal to Codeigniter using Bourbon, Bitters and Neat.

What? Don't you love Drupal anymore?

Yes, we do still love Drupal. We will continue to develope sites with it. It's flexibility, native taxonomy, fine graned permissions system and large developer community still make it number one for us. Drupal still remains our CMS of choice.

One of my frustrations with Drupal is its size and complexity. it tries to be many things, so its output matches that. You can control the output by using modules like Fences. Fences cleans up the markup and gives you something closer to HTML5. Having a module that essentially undoes the output from the core seems to me to be counter productive. There is code creating the extra markup and then more code to simplify the markup. Why not just have the simplified markup to start with? That is the reason I went looking at a framework.

Why change?

Our website has been running on Drupal for over 5 years and has been upgraded from version 4.5 to 5 to 6 and to 7. Drupal 8 is coming and promises some major upgrades after a major rewrite. The new version will update a lot of the procedural code to object orientated code. Behind the scenes there has been a lot of discussion within the Drupal Community over the direction of the project. This has lead to a forking of the Drupal project to create the Backdrop project.


The new Drupal will be based on the Symfony PHP framework. This got me thinking about removing all the things I don't need and just create a website using a framework. I started experimenting with the Symfony framework which got me on to others. I also looked at Zend, CakePHP, Laravel and Codeigniter. Zend and CakePHP are quite large seem a bit slow compared to Laravel and Codeigniter. Laravel seems to have got a lot of attention and has gained a lot of support. Lots of people are using it. However, I found Codeigniter to be quite small. It is a 2.3meg download that extracts to a total of 4.2meg. Its small size and speed are great attractions. Codeigniter has had its time in the wilderness and seems to be slowly dying. The previous owners Ellis Labs were seeking a new home for Codeigniter. A couple of months ago, it found a new home the British Columbia Institute of Technology. This seems to have given Codeigniter a new lease of life.

I wanted to have a site that was leaner, meaner and faster. I also wanted more control over the HTML output. Codeigniter gives me that. It is fast and lean. It is also quite easy to learn and has very good documentation.

Bourbon Neat and Bitters please

I've done a few sites using the Zurb Foundation framework. You can use it to get a prototype of website done very quickly. Foundation is mobile first which earns it a big tick from me. I much prefer it to to Twitter Bootstrap. Foundation is easier to change and encourages you to make sites that look different. There doesn't seem to the a "Foundation look" website like there is a "Bootstrap look" site.

A typical Foundation site's main style sheet seems to render to around 380k in size or 180k when minified. There is a lot of that CSS that is not used by the site. I wanted to strip a lot of it out of unnecessary styling. So, I tried pulling lots of things out of the Zurb Foundation framework and only using what I needed. The problem was I kept breaking things. Why not turn things around and build what I need instead of taking away what I don't need?

Enter Bourbon. I'm a fan of SASS. I find in an indispensable tool in my work flow. I love how a few lines of SASS can produce the CSS I need. I like how you can use it to compute everything from colours to page sizes.

Bourbon describes itself as a "simple and lightweight mixin library for Sass". That's exactly what it is. Within the Bourbon family is Neat. Neat handles the semantic grid for you. It allows you to effortlessly create responsive, mobile first grids. You can set your own breakpoints. It is also well worth installing Bitters. Bitters completes the trio. It contains variables for typography, the grid as well as styling for text, lists and forms. These items will give you more than enough to create your own responsive framework.

It is also worth mentioning Refills. Refills are prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat. There is a nice library of very useful things like footers, navigation bars, accordion tabs, maps, modals and cards. It is not as big as the Twitter Bootstrap component library of Zurb Foundation's pattern tap, but it does contain some very useful snippets.

The CSS produced for the lucid site comes in at around 62k or 32k minified. That includes everything. I don't have to combine all the various style sheets produced by Drupal modules into one because. My styles consist if 1 file. That means only 1 http request for all my CSS. Just the tonic for mobile sites

The lucid site is now considerably smaller. Thanks Bourbon, Bitters, Neat and refills. Thanks Codeigniter. :)



All posts