Note: This blog post is aimed at seasoned Web Developers. Technical jargons are used throughout this post. You will not appreciate it without some familiarity with the terms and technologies used here.  

Technology evolves so fast! 2 years ago, the buzz words were “web-to-poynt-ow”, “ey-dyaks”, “eks-eich-ti-em-el”, etc. Now the buzz everywhere is about HTML5/CSS3 and how these technologies will power the future of the Interwebs. In order to stay relevant, we as web professionals should be very responsive to change. As Clarence Darrow aptly puts it:

“It is not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change.”

Looking forward into the future, we know that the Joomlasphere and the Joomla template scene will eventually move towards these technologies. It is for this reason that we at MagicThemes are investing a lot of energy in the development of a Framework that will enable template developers to streamline the creation of HTML5 and CSS3 Joomla Templates.

Here’s a preview of things to come - a sneak peak to the development of MagicTheme’s Joomla Template Framework called Alchemy.

What’s different with Alchemy?

Almost every major template shop for Joomla has their own Template Framework, solving the same problem with their own flavor of solution. Someone who have used most of those frameworks will immediately notice that they are very similar, i.e., they are a bunch of template features that were bundled together. You just turn those features on or off, and you have some settings to change colors, images, and layouts. If you create a template based on one of these frameworks, it will look very similar to the templates that the framework’s creator provides.

Adding new stuff is as complicated as coding the HTML and CSS yourself. 

Alchemy on the other hand is like a set Legos™. It just provides small building blocks, it’s up to you to put them all together. It gives you tools to put them together, and it gives you tools to make your own blocks of Legos that you can use in the future. 

In Alchemy, adding new stuff is simpler because it uses technologies that help you build templates easier. It is truly a framework for web developers. And needless to say, these lego blocks are HTML5 and CSS3 powered!

In short, while existing template frameworks help you configure templates under some set of rules, Alchemy will help you build templates with your own set of rules.

Alchemy pre-release is for advanced coders for now

At this early stage, Alchemy is not a point and click framework. It helps web designers and coders create Joomla Templates from scratch. Let me say that again, you use Alchemy to build templates from scratch! So in essence, Alchemy is for advanced coders. 

So why would anyone want to use a harder-to-use framework? It’s the foundation! In the future, Alchemy will evolve to become very easy to use even for non-technical users. But first it must have the right foundation, the right technology, and the right vision for the future. 

The Technologies that Alchemy uses

Alchemy has put together various technologies that help developers create HTML5 Joomla Templates. Selected ideas were taken from HTML5 Boilerplate by Paul Irish like the use of Modernizr and HTML5 Doctor’s CSS Reset. Many ideas were taken from Flawless.css by Dominik Guzei like the use of Grids and reusable CSS3 mixins. In order to make Internet Explorer behave well, Alchemy uses PIE by Jason Johnston and IE7-js by Dean Edwards. And lastly, the main engine that powers Alchemy’s lego blocks is Less CSS by Alexis Sellier. 

And of course, an HTML5 Joomla Template won’t be complete without HTML5 overrides to the core output. Alchemy provides HTML5 overrides for all of Joomla 1.5 core components and for K2 as of the moment. 

Together, these technologies allow developers to use HTML5 and CSS3 for their Joomla Templates today. The future is here now!

Quick Feature List as of the Moment

• Use CSS3 Features on Internet Explorer 6-8 using PIE
• Organize your CSS code using Less CSS
• Create reusable CSS Mixins using Less CSS
• Use some CSS3 selectors on Internet Explorer using IE7-js
• No need to pollute your markup code with grid-specific classes. Do it inside your CSS!
• Don’t be limited by 960 Grid System. Create your own grid system!
• Gracefully degrade your HTML5 template using Modernizr. 
• Target specific browsers without using Hacks in your CSS.
• Works on IE6 to IE8.
• Optimize your templates for modern Mobile Phones through media queries.

Future Feature List

• A nice interface to create and configure Alchemy Templates
• Development mode in the frontend. Edit your CSS in realtime within your Joomla site.
• Easily compress Less files into CSS for production mode.
• Customize templates in Development mode using Less, deploy in Production mode using streamlined CSS. We don’t like embedding CSS just to configure the template like other template frameworks do.
• More reusable chunks of code and template features at par with other Template Frameworks. 
• A Template Builder like Apple’s iWeb.
• More developer and user friendly features!

So how does it perform in real life?

To demonstrate the power of Alchemy, we did a very quick clone of rhuk_milkyway, a default template in Joomla 1.5. Using Alchemy, we were able to

• Remove all background images by using pure CSS3 for rounded corners and box shadows.
• Reduced the code by 60% by reducing unnecessary code just to make rounded corners.
• Output a clean semantic mark-up for SEO.
• Converted the template into 960 Grid System. (Alchemy doesn’t have a grid system, you can make it use any grid system you want with a single line of code).

Check the HTML5 Milkyway Demo Here!

Here’s a comparison of how using HTML5 and CSS3 reduces code.

Code for rhuk_milkyway

Code for mt_milkyway

So how fast did we do it? Doing it for Webkit browser took us less than an hour. Making it work for IEs took us 2hrs(Damn IE!). Creating color variations took us another hour. There are still some kinks on IE7, but this will be faster once we get familiar on how to deal with IEs using Alchemy. 

Want to try it?

Alchemy is still under heavy development. Our next commercial templates will be powered by Alchemy. More features will be added in the coming months en route to a mature release by 2011. But if you really want to try it, it’s available at Github. 

• Alchemy Joomla Component - A Joomla component which will serve as the user interface to configure Alchemy powered templates. This component will be built using the Nooku Framework. 
• Alchemy Theme Framework - a platform agnostic set of helpers used by Alchemy powered Templates for Joomla or Themes for WordPress. This can’t work alone, it is included when Alchemy Joomla Component is installed. 
• mt_milkyway - an example template built with Alchemy, an HTML5/CSS3 clone of rhuk_milkyway. 

To install, you must know how to use Git. Clone the Alchemy Joomla Component repository then initialize and update submodules. The Alchemy Theme Framework is included as a Git submodule. Merge the repository’s directory into your Joomla installation either by symlink or file merge. Symlinking is recommended so you can easily update the repository. Right now, there is no need to install the component using the Joomla Extensions installer. 

After putting Alchemy Joomla Component into your Joomla installation directory, you can clone mt_milkyway. Symlink it to your Joomla templates directory. Then you can make it your default template in Joomla’s Template Manager. 

Right now, Alchemy is using Less.js to render CSS. Once we release Alchemy as a stable product, there will be a CSS compressor which will compress and save the Less files as CSS for a faster and streamlined page loading and rendering. 

If you are interested in using Alchemy but don’t have the technical requirements to install it, you can post your inquiries in the MagicThemes Forum and it will be our pleasure to help you and listen to your feedbacks. 

Summary

HTML5 and CSS3 is ready for primetime and you can use it now for your Joomla Templates with the help of Alchemy and the technologies that come with it. Although Alchemy is still under development, you can already borrow some ideas from it, pick and choose what you need, learn the technologies it uses, and create HTML5/CSS3 powered Joomla sites today! Oh by the way, did we mention that Alchemy is purely open source under GPL3 License? Yes it is! Fork it and improve it!

Follow @magicthemes on Twitter to get updates about Alchemy and MagicThemes.