Jan 5 2009

Harmony: Theme Management

While development on Harmony has slowed considerably since the last post on user management, it has not stopped. We traveled the months of October and November away. And December? Well, December was full of a couple really cool client projects that we just couldn’t turn down, despite having an already full schedule.

Theme Management

Ok, that is enough excuses for now. How about we discuss themes? So what are themes? Well, themes are what make up the look and feel of your website. Harmony will support multiple themes for each site with one active theme. Each theme is comprised of template, stylesheet, javascript and image files.

One note is that theme files should not be confused with assets. Assets are resources that are linked to and help support the content. Files like pdf’s, images, zipped archives and such would go into the assets area. Theme files are only concerned with the look and feel of the site. Your logo would be a theme file. Your annual report would be an asset. This will be obvious when you use Harmony, but since you can’t right now I thought I would explain the difference. Hope that clears any possible confusion up.

As I stated above, each site can have multiple themes. This means you can create a theme for your site and then when you redesign, you can simply create a new theme and leave the original theme active while you work on the new one. Once you complete the new theme, you can activate it and your whole site’s look and feel will switch on a dime. This is nothing new as far as website management systems are concerned, but if you are building static html sites, it will be an eye-opening experience.

The Template System

For the template system, we have chosen liquid, which is based on Django’s template system and is very popular in the Rails ecosystem. If you interested, you can read more about liquid on the wiki. The great thing about liquid is that it is so extendable for programmers. We will have a lot of custom template tags and filters to make your development live a lot easier. Below is just a really small sample of some of the helpers we will provide. If you have ever used the Mephisto blogging system, some of them will look familiar as Mephisto uses liquid extensively.

# outputs two stylesheet link tags to stylesheets 
# named reset.css and common.css
{{ 'reset,common' | stylesheets }}

# outputs one stylesheet link tag to print.css with media set to print
{{ 'print' | stylesheets: 'print' }}

# includes the file named _header.liquid
# very similar to apache and php includes, and very handy!
{% include 'header' %}

# outputs a ul with an id of nav and li's for each navigation item
# this will be customizable to change the id, 
# include or exclude child pages, etc.
{{ site.navigation | nav }}

You can probably see that these will indeed be helpful, but that is just the beginning. I don’t know about you, but I can never remember the syntax for IE conditional statements. That is why I’m particularly excited about filters like ie_stylesheet:

# outputs stylesheet link tag to ie.css wrapped
# in IE conditional comment for versions of IE less than 7
{{ 'ie' | ie_stylesheet: '< 7' }}

Think of all the things that you do everyday that you have to lookup on google or a previous project, because you forgot the exact syntax. One of our goals is to make web development easier and more fun using Harmony than it would be using any other website management system or programming language. A lofty goal yes, but we like to set our sights high.

Icing On The Cake

Another thing we are excited about is that because all the theme files are stored in the database, we can process them before serving them. This means we can enhance the ability to do things with files that normally wouldn’t be possible in a more static development environment.

One simple example is css variables. Wouldn’t it be handy to set dark_green, light_green, header_orange as variables in css and just reuse those colors where needed? I always forget hex codes, but variables names wouldn’t be that hard.

Yeah, we know webkit has an initial run at css variables, but why should we wait for all the other browsers to come around? Because we can process your stylesheet when you save it, we can make things work programmatically that browsers don’t currently support.

It might be kind of hard to visualize what we are talking about above, but trust me, it will be cool. What are some other features we have thought would be cool?

• One click downloads of popular javascript and css frameworks into a theme
• Asset bundling – something automated for bundling stylesheets and javascripts together to minimize http requests and thus improve performance
• Automatic JavaScript minifying – would be something optional
• “Developer Mode” when editing themes that allows one window with css/html open for editing and another open with a live preview

What are your pain points?

These are just a few ideas that we have thought would be handy and I’m sure you have your own. What are things that you repeat all the time in web development? Where are your pain points? Give us more ideas. I’m sure once you all get your hands on Harmony, you’ll have even more, but I’m curious if, while reading this post, anything else popped into your head.