So we’re now using twitters Bootstrap with Django and making awesome customisations, overriding less css in the core of bootstrap. This is our workflow from design, to production
In design
We just include node.js, and all the bootstrap files. This means the designer doesn’t need a django environment setup. All the less files are compiled client side. At the moment we have one less file that overrides, default bootstrap ones, however in future we will be breaking this into multiple files for maintainability.
In development (ubuntu 10.10)
Django
Neat django template from the talented Julia Elman setup making use of django-compressor
Installing node.js
Based on experienced from information found here
So you can install node.js from an offical ubuntu repository, however ‘nodejs -v’ shows its only version 0.1.97 (which since is an odd number, may also be unstable – not sure). Anyway, this is too out of date for my liking as:
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
nodejs -v
v0.6.12
You could also do it from source as described here
This is all great, but this doesn’t worth with less. According to this I need version v0.6.6. This means compiling from source.
cd ~
mkdir nodejs
cd nodejs
git clone git://github.com/joyent/node.git
cd node
git checkout v0.6.6
./configure
make
sudo make install
Installing npm (this section is no longer required see update #2)
Great we have nodejs installed… lets install the node package manager.
curl http://npmjs.org/install.sh | sudo sh
Secuirty note: I think this is a bad way to install a package, Especially if you put sudo’ in front of that command like some suggest. Not sure about using curl to run a script from the internet. But this is a commonly the recommended appoach, so I’m going with it for now.
Update: you’re actually better of troble shooting on the NPM site. This is what worked for me.
sudo chown -R $USER /usr/local
Update 2: Note that npm is installed with nodejs since version 0.6. That makes this step irrelevent.
Installing less
you can just install the via the commands (from SO answer here)
sudo apt-get install rubygems1.8 ruby1.8-dev
sudo gem install rubygems-update
sudo gem update rubygems
sudo gem install less
but i decided to follow the offical method which is much more unclear … and actually doesn’t work for me…
This is what does work:
cd ~
npm install less
Also you’ll need to symlink it
sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/
or add ruby gems dir to PATH variable:
export PATH=/var/lib/gems/1.8/bin:$PATH
Otherwise you may need to put the full path to the lessc in COMPRESS_PRECOMPILERS statement
Update: Actually you can just install less like this to make it available system wide
sudo npm install less -g
In produciton (ubuntu 11.04)
We use chef, and require node.js, npm, and lessc on the server so that css can be compiled just in time (and cached).
This scripts provides a neat way to add a unblessed nodejs community repo on github:
http://community.opscode.com/cookbooks/nodejs
http://blog.carbonfive.com/2011/09/27/automating-node-js-deployment-to-ec2-with-chef/
The secret juice (that no one tells you and is undocumented)
For a long time, many hours, too many hours, django-compressor would not process my less files (DEBUG=False). I thought it had something to do with the compiler and environment, but over time it became clear it did not. The problem is that none of the less files were getting output entries in the the html file. At 3am, after exausting all other options I started playing around wtih the ordering of the attributes in the
<link type="text/less" href="{% static "bootstrap/less/bootstrap.less" %}" charset="utf-8" media="all" rel="stylesheet" >
Turns out that that it would only work with the type attribute first, and the rel=”stylesheet” statement. Not rel=”styleshee/[something]” and not if the href attribute was first. In my opinion this is an undocumented requirement or bug. Lesson, follow documentation to the letter… copy examples and change them… don’t assume ANYTHING.
[work in progres]
Still working on the chef deployment repo.
Resources
A hint at production lessc statement
https://github.com/jezdez/django_compressor/issues/99
