In earlier posts (Part 1 here, Part 2 here, Part 3 here, Part 4 here, Part 5 here and Part 6 here) I have set about building a "Hello World" Python/Django application.
Add the reference to the less javascript in base.html
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 BootSwatch.com 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 LessCSS.org 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 git@github.com:ekivemark/helloworld.git hellolessworld
- git commit -a
- Next I remove the .css files from base.html
- And clean up the mainstatic folder
- Removing config.rb
- sass folder and sub-folder
- Remove the old stylesheets
- download less-1.3.0-min.js to the js subfolder
- git clone git://github.com/twitter/bootstrap.git
- <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. http://bootswatch.com/cerulean/
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.
