An Open Source Admin HTML/CSS Template: Benevolent Dictator

Originally published: 08/2010 by J Wynia

BenevolentDictator

Anyone who has done web application development "behind the firewall" has been asked to put together "a basic admin screen" for managing a work queue or other basic utility task.

I know I’ve built so many of them I’ve lost count at this point. And there’s this thing that pops up over and over again as a trend: no one ever wants to spend time or money on a visual design for them.

It makes sense, really. These apps are often quickly thrown together and frequently for really temporary purposes or in situations where the goal is just getting something working to keep people moving forward on the problem these apps solve.

From that perspective, I completely get why an internal design team or outside design firm isn’t ever engaged for these kinds of projects.

Unfortunately, there’s another trend I’ve noticed on these apps that makes that disregard for visual design a problem. Rightly or wrongly, people judge these apps largely by how they look. So, while the developer is told to "not worry" about how it looks and "just put something basic together" , as soon as people start using the less than attractive version most of us developers put together, they invariably say things about the app that are less than flattering.

I dislike it, but all of the evidence says that people do judge things by how they look. Even if it works exactly like it should, if it looks clunky, users will think it *is* clunky.

Even if you, as a dev, have good design skills (and I like to think I have at least mediocre design skills), there often isn't any time to apply them to these kinds of apps. That combination of circumstances led me, quite a while ago, to look for a decent template that I could apply to all of these kinds of apps to make them look at least "decent" while not having to spend any project time doing so.

Thus began a frustrating quest.

I looked on some of the usual places I'd looked for CSS templates before: OSWD, Free CSS Templates, etc. and didn't find much. Sure, there were hundreds of blog-like templates, but nothing that really worked for the kinds of "admin" apps I get asked to build. Then I ran across Theme Forest and thought I'd finally found my solution.

They've quickly built up a pretty extensive section of exactly this kind of admin theme. And, I've bought about half of them. Really. You should see this "themeforest" folder on my hard drive. It's packed with them.

So, having bought so many of them, which one do I recommend? None of them.

Each one in turn ended up driving me nuts and proving to be very difficult to use in the very place they're intended to be used: applications.

While they look like they'd be just the thing you'd need in these situations, for whatever reason (I don't want to speculate on what's driving this reality), they're structured in ways that make building applications using them frustrating.

As a general rule, whatever framework you're using to build your app, you've probably got various bits of code responsible for generating different portions of pages. You've probably got a loop of some sort that generates the menu, etc. The problem with many of these templates is that they spread out the responsibility for a given chunk of HTML too far apart in the file.

In several cases, i tried to add a subsection or move a few things around only to discover that these templates fought me the entire way.

So, a few months ago, I took a few hours to see if I could come up with something on my own that I could share with the world. I was surprisingly happy with the results and put in a bit more effort on it, and have now used it on a couple of quick apps, ironing out kinks in the process.

The theme is called Benevolent Dictator and I'm licensing it about as liberally as you can without making it public domain. Hopefully you can get some use out of it too.

It's based on the grid framework: Blueprint CSS, which makes the modular blocks easy to size. I've tried to include a little bit of all of the common stuff my apps need, as samples, but if there are widgets, blocks, etc. that you think are missing, please let me know. There's also a version with a dropdown "mega menu" that's proving useful in one of my current projects.

The github repository for it also includes a copy of some open source icon libraries that take up quite a bit of space, so if you don't need icons, just grab the .html and .css, etc. instead of cloning the whole repository.

Comments

blog comments powered by Disqus
Or, browse the archives.
© 2003- 2014 J Wynia. Very Few Rights Reserved. This article is licensed under the terms of the Creative Commons Attribution License. Quoted content or content included from others is not subject to that license and defaults to normal copyright.