The Gumby Framework is a nice css (and more) framework (like bootstrap). Django isn’t coupled to any particular frontend. That said I wanted to share my experiences on best practices for using Gumby in Django. The goal here is maintainability and ease of use. If you are just toying with gumby, this how to is more than you need. If it’s an integral part of your project, do read on.

Where should Gumby go?

For a non trivial project I suggest installing Gumby and other css, js, etc with Bower. Bower is a package management system for web libraries. Think apt-get for your js and css files.  django-bower is a small django app that integrates bower into Django static files. Just follow the django-bower instructions and you will end up with something like

https://github.com/burke-software/django-sis/blob/master/templates/gumby/head.html

Notice the use of static files and Django magically knows those files are in /components/bower_components/gumby

Let’s talk about file structure. components is a folder I named and told bower to install things to. components/bower_components is where bower installs files to. What’s important is that you don’t want to edit anything in bower_components because this area gets overwritten on upgrades! That’s the whole point of bower. Now you don’t have to keep track of every jquery minor update. components however is fair game.

Customizing Gumby without cp

Next you probably want to customize gumby. But when you update gumby you don’t want it to overwrite your work! And you are too cool to copy things about. Instead we will set up gumby in components (where we are allowed to edit) and it will refer to bower_components (up to date files) as needed. Gumby has a tool called claymate to help automate this. Notice the bower_components reference in their documentation. At this point you should try editing _custom.scss and compile the css. This is explained in Gumby documentation so I won’t repeat it.

What goes in version control

You now have a lot of crap in components and you only reference a few files in your actual project. You could just copy these files into version control. You could cite these as dependencies and tell users to ./manage.py bower_install to get the needed files. That adds a lot of overhead to anyone developing your project however. I suggest just adding the entire components folder to version control. You might be adding a mb or two….who cares. You don’t want to scare away potential contributors having to install npm just to render your html templates.

But I want to use {{ form }} and it just works

Initially on using any css framework you probably can’t rely on just throwing normal Django forms into templates and writing them out long form in html takes a long time 😦 Luckily django-floppyforms lets us edit how forms render. And now introducing the awesomely named django-floppy-gumby. This is just a collection of Gumby friendly form templates for django-floppyforms. It lets you use {{ form }} and it just works. Note I took some liberties in how to render the templates to my taste. Feel free to fork and submit pull requests 🙂