Until now, I've been hacking together HTML and CSS by using Python string interpolation. The benefits of this approach are that it's very easy and it's also fundamentally true to the process of dynamically composing HTML and CSS. A CRUD app is, after all, largely a process of splicing and modifying text to send to a server. String interpolation and concatenation is a reasonable in-code manifestation of that.
Even so, it is an ugly, temporary hack, and in today's installment it gets fixed. Specifically, I've added:
(1) A proper HTML templating system, Jinja2;
(2) A first HTML template, replicating the single Web page that has been made so far;
(3) Static-file functionality in main.py as per the instructions on Bottle's site;
(4) A base.css file replicating the styles that were being spliced into our page.
This is a good opportunity to practice good migration hygiene. My approach was:
(1) Copy the current /<env>/add/ endpoint to a new, separate, identical one (/<env>/add_jinja2/);
(2) Create the new materials, modifying the latter endpoint as I went along;
(3) Continue until the two endpoints looked and behaved identically (or as identically as I could determine without automated testing);
(4) Delete the first endpoint;
(5) Rename the new endpoint to /<env>/add/.
Finally, remember to delete the old front-end code as soon as possible. Besides being ugly, it can cause confusion if it stays in the repository as "dead code," and it will always be available for reference in version control if we need to look at it.
Here's the current commit in the veery/ repository.