playing with css

As many coders do, I work on personal projects on the side, especially lately as I’ve been doing contracting work and job-hunting. Building software is apparently one of the things I on some level can’t not do — I get antsy after a while and need to write some code. Lucky for me, then, that people are happy to pay me well to do something I enjoy. 🙂

Right now I’m working on a site (in Python and Django) which will allow you to take things you have written and turn them first, as a MVP, into a PDF of a book, and eventually directly into a physical book, via one of the print-on-demand services.

Because I want the site to be friendly and easy to use, I have been lately working on the styling of it. Going into this I knew very little CSS — anyone who has looked at the source to this web site (please don’t, it hurts) can attest that much of it is left over from the bad old days of tables that characterized the web when I started it. This is where I am right now, after a couple evenings’ hacking (click for the HTML version):

 

I’m pretty happy with it so far. Right now it’s aiming to be pure HTML 5, and I made a couple design decisions in moving from my Inkscape mockups to this CSS mockup because they were easier to do in pure CSS. More browser backwards-compatability things, many of them enabled by JavaScript, will be along as the code moves towards being in actual production and out of the mockup phase. I’m confident at least that things will degrade functionally — if IE 6 users don’t see rounded corners, they’ll survive, and if they don’t see the placeholder text in the author field either, it’s a UX hit but doesn’t impair the functionality of the site. All my PUT and POST calls still work. (This example is of course straight HTML. Clicking the submit button doesn’t do anything.)

Let me know if it breaks in your browser. (Why yes, this is partly a backdoor attempt to get some browser compatability testing, how could you tell? 😉