Hard to believe it has been three months since we last talked about Harmony. Heck, it is hard to believe it has been three months period. The last three months have flown by for us, but we thought we would start the new year off on the right foot.
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.
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.
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.
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?
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.
I always use the Google AJAX Librarise API (I hate writing that out) for my javascript includes. I wrote a plugin for it – see github – for Rails, but it’d be awesome to have the same concept in a CMS template. Something like:
{{ google_jquery: '1.2.6' }}Or whatever. I’m very anxious to see Harmony – I’m a fan of both of your work.
@Ryan – Agreed. Supporting Google’s Ajax libraries is on the list.
Any rough guestimates on a release date?
E.g. – within the next month, quarter, summer, etc…
Hope this doesn’t turn into canary :)
@Teddy – Man, we must have really scarred you with Canary. :) We haven’t set a date but we want it now. Steve and I just talked today about ways to put more time in on it. I think both of us would love to have something in March for ourselves and maybe something in the wild by July. It could be sooner and it could be later. Is that specific enough? ;)
Pardon my ignorance, but I’m unfamiliar with Harmony. What is it a theme system for?
A really handy feature would be the ability to set up some way to test your new theme during a redesign with live data and without taking down the current, live theme. Perhaps by providing an alternate domain or something. In the CMS I use at work we can add a template override in the querystring (I use jquery to temporarily append it to all links) but a native solution would be really nice.
@Chris W. – Harmony is a multi-site cms that they’re working on.
@Chris – Check out the other articles about Harmony for more but Scott is right.
@Scott – Agreed. Initially we’ll start simple, but that is the long term goal, to allow complete previewing of a site with a new theme while leaving the current theme active. Thanks for the query string idea that is a good starting point and gives me ideas.
Nice choice, Liquid is pretty nifty, I’ve played around with it on a few Shopify stores.
I’d agree with the Google AJAX API suggestion, and the asset packaging is a must.
Thanks for the update.