Wednesday, July 04, 2012

My journey of discovery in Python/Django - Less is More: Part 7

In earlier posts (Part 1 herePart 2 herePart 3 herePart 4 herePart 5 here and Part 6 here) I have set about building a "Hello World" Python/Django application.
In this post I want to look at an alternative base configuration. I call this HelloLessWorld. The situation is this: 
Bootstrap is a CSS framework developed by the folks at Twitter. It is increasingly popular and is a great responsive design that can get you quickly up and running with a decent looking site. Bootstrap is becoming so popular that there are an increasing number of themes appearing. Check out for a selection of themes. We are even seeing Wordpress themes being built with bootstrap - like this WordPressBootStrap theme from 320Press. 
In the original HelloWorld project I had implemented SASS and Compass. However, Bootstrap uses LESS. Check out for more background on LESS which is an alternative dynamic stylesheet language that is similar to SASS - Syntactically Awesome Stylesheets.
LESS by default uses client-side javascript to do on demand compilation of LESS stylesheets. However, you can pre-complie locally, or on the server using node.js
In order to avoid having to convert bootstrap themes to SASS from LESS I am going to take a fork of HelloWorld and replace SASS with LESS and then apply an alternative bootstrap theme.
Let's get started...
I am going to follow the process I detailed in Part 6 in order to create a new github repository and import the HelloWorld repository in to it as my starting point.
  • First I created a new empty repository on github - hellolessworld
  • Switch back to my Mac and create a new folder and a virtualenv: hlw
  • Activate the hlw environment and install django
  • git clone hellolessworld
  • git commit -a
  • Next I remove the .css files from base.html
  • And clean up the mainstatic folder

  • Add the reference to the less javascript in base.html

    • <link rel="stylesheet/less" type="text/css" href="{{ STATIC_URL }}bootstrap/less/bootstrap.less">
    The next step is to pick a new bootstrap theme. I went to BootSwatch and picked the Cerulean theme
    I downloaded two files to mainstatic/less:
    • variables.less
    • bootswatch.less
    Then edited the base.html to call the theme files. To do this I created a new file in mainstatic/less:
    • bootswatch-theme.less
    • I added a series of @import statements:
    • @import "../bootstrap/less/bootstrap.less";
    • @import "variables.less";
    • @import "bootswatch.less";
    • @import "../bootstrap/less/utilities.less";
    My footer styling had disappeared so to reset it I go to the original helloworld and grab the base-page.sass file. I edit the file changing the name to base-page.less and switching the variables from $ prefixed to @prefixed.  Then I add the file to the @import list in bootswatch-theme.less
    I reload the page and  the new design is in place with a modified footer.
    Time to commit this to github. We have a modofied Bootstrap theme working with client side compilation of the LESS files.