Inside the Warp6 Framework

Apr

Let's kick off our Warp6 blog post series in which we take a closer look at the overall framework structure and how everything fits together. This first post shows the basic file concept of the Warp theme framework and how to use it. If you don't know Warp6 yet take a look at the announcement. Okay, let's start!

The Framework

The Warp6 theme framework is the next step in evolution succeding our version 5.5 released in August 2010. Like its predecessor, Warp6 is a lightweight framework which provides a solid tool set for solving repetitive tasks creating themes. The Warp6 framework has HTML, CSS, JavaScript and PHP helper classes to cover all aspects in theme development. It's really portable since all framework related files are kept in a single place, a folder called "warp". This folder resides directly in every theme. There are no dependencies on other components or plugins. Nothing needs to be installed or maintained separately.

Warp6 can be split up into three layers. The first layer is the core framework which provides the base CSS, a JavaScript effects library and a collection of PHP helpers. Each part of the core framework is universal and designed to work on every supported system. The second layer is the system depended layer, which provides the individual system implementation needed to seamlessly integrate with a particular CMS. This layer makes Warp6 adapt to a certain system to form a consistent API for theme development. The third layer is the theme specific layer, this is where all the individual theme files go. It's the working place where all the themes custom HTML, CSS, JavaScript and images are being stored.

The Cascade

To provide as much flexibility as possible we implemented a special file cascade into Warp. If you include any file like CSS, JS or template PHP files Warp6 looks successively in specific folder for the files and the first file found will be loaded. Here is the cascade:

theme folder
specific system folder, for example warp/systems/joomla.1.6
warp framework folder

This gives you full flexibility to override any important theme related file. In the following we will give a short overview about the most important files if you want to customize a Warp6 theme.

Template Files

The main template file /layouts/template.php is the heart of every theme, it provides the complete HTML markup for the base theme layout. This is different from standard Joomla templates or WordPress themes where the index.php is the main template file. Second important file is the /layouts/template.config.php which includes some layout calculations and defines all the themes CSS and JavaScripts.

Modules

Modules or widgets can be displayed in different styles with additional icons and badges. The /layouts/module.php takes care of displaying all these module variations. Depending on the selected style the module.php loads the right HTML markup from predefined module templates. Further the framework comes with three commonly used module layouts equal, double and stacked, which are used to position modules next or above each other. It's also possible to extend them with your own custom module templates and layouts.

CSS

The CSS files are divided in three different layers and are placed in their respective folders for theme specific /css, system depended /warp/systems/joomla.1.6/css and framework styles /warp/css. Including these files is really easy because Warp6 also uses its file helper to locate them across the different folders. All CSS files are modular and well structured with the name of each file naming its purpose. We will do a dedicated blog post about the CSS framework soon.

JavaScript

Warp6 also provides a library of JavaScript effects used in dropdown and accordion menus, the AJAX search or the mobile theme. The JavaScript files are also structured and stored in their own folders for theme specific /js, system depended /warp/systems/joomla.1.6/js and framework scripts /warp/js. All scripts are configured in a single file /js/template.js. This file is used to enable or disable effects which will be loaded with the theme.

System Markup

Every system has a set of layouts which defines the HTML markup for the core CMS output. For Joomla these are typically the HTML overrides that are used by the theme to render the content component or modules like the login or search. The Joomla 1.6 files are located in warp/systems/joomla.1.6/layouts. In Wordpress the layouts provide a HTML markup for the different pages like blog frontpage, the archive or a single post. The Wordpress files are located in warp/systems/wordpress.3.0/layouts. To keep things simple, Warp6 basically uses the same HTML output for all supported systems. Regardless of what you are viewing, articles of a category in Joomla's content component or posts from a category in Wordpress, Warp renders the HTML. This allows to create universal CSS rules which apply for both CMS platforms.

Conclusion

This overview shows the key concepts of Warp6 like the layers and the cascade and how the files and folders are structured. As you can see Warp6 is a modular, flexible and extendible theme framework that provides a rich toolset for developing Joomla 1.5/1.6 templates and Wordpress 3.x themes. It's up to the developer what features he uses. Only select those tools that you are actually needing. In our next blog post we will talk about the "Styles" feature another addition to Warp6. Stay tuned!

Comments (28)

Giulio

| #

very good...

reply
kyle.faber

| Profile | #

Niceeee... Looking forward to round two of blog posts!

reply
joomla

| #

nice framwork... why not free release, like gantry or T3?

reply
Andrew

| #

But all of those mechanisms are already in wrap 5.5. So this post do not give us anything new?

Modules layouts "equal, double and stacked" are new methods, or just different name for what we well know from Yoo?

reply
- sascha
  
  | Profile | #
  
  Yes, basically this is already implemented in Warp5.5. We wanted to give a short overview about the framework mechanisms so everybody know what we are talking about, even people who didn't know Warp5.5. With Warp5.5 we have rewritten the whole framework to make Warp platform independent. Warp6 is the next step of evolution... Lot of improvements and all the other stuff besides the core framework...
  
  PS: Yes, the module layouts are new ;-)
  
  reply
Dennis

| #

Sounds like a winner!! Can't wait for the next post.

reply
Omar

| #

Please include a RTL languages support !
I am waiting for that for a looong time :)

reply
- sascha
  
  | Profile | #
  
  Yes, Warp6 does support RTL!
  
  reply
xSpline

| #

Supa good!

reply
Rubix

| #

Good Good Good!

reply
ivo.haarmann

| Profile | #

Does that mean that existing templates based on Warp Version 5.5 like Enterprise will not run with Warp 6? If so, can they be converted somehow (do you plan to convert them in the future?) or are they running into End of Lifetime?
Will new monthy released templates only support the Warp 6 framework?

reply
- sascha
  
  | Profile | #
  
  Yes, existing templates will not run with Warp6. Best way to convert an Warp5.5 template to Warp6 would be to start with the blank Warp6 master theme and apply the CSS, template HTML and so on step by step. This is a lot of work... Of course new templates will be only Warp6 based. But Warp5.5 templates are still fine. They just don't have all the new features Warp6 has...
  
  reply
Joel

| #

This is SOOO COOL! i have been comparing frameworks over the last couple of weeks and by what i read this gotto be the most advanced framework out there or in here depending on which side of the web you are! :) any release dates? Also if i design my template with warp 6 for joomla, does it mean it will work seamlessly for wordpress as well?

reply
- sascha
  
  | Profile | #
  
  Release date is May 2nd. Yes, Wordpress conversion will be very easy.
  
  reply
houston

| #

Cool! Does WARP 6 work with ZOO 2.4? Or will there be an Update for ZOO?

reply
- Ben
  
  | #
  
  Yes, does it support ZOO 2.4?
  
  reply
- sascha
  
  | Profile | #
  
  Yes, ZOO 2.4 works with Warp6 like any other extension...
  
  reply
Deneme

| #

When will you update your 5.5 templates on Warp Six. If we purchase your products now , are we able to get a updated template later?

reply
- sascha
  
  | Profile | #
  
  Warp5.5 templates will NOT be updated to Warp6
  
  reply
manfred.eitenberger

| Profile | #

Could you outline the necessary steps to migrate an existing template to WARP6?

reply
Stefan Looij

| #

So with the use of this secondary layer, it would be easy porting Warp based template to a Drupal compatible theme? Say, you only have to cope with system (CMS) specific dependencies, in order to make the other Logics within the Warp framework work? Any plans in porting compatibility to Drupal, or suggestions. I mean, is it possible/relatively easy?

reply
Kelly

| #

WARP 6 sounds really exciting. I just hope the template themes will live up to the hype. I see hints of creativity here and there, but so many of the themes look very similar. I would also like to suggest a general forum for Zoo with a showcase for member sites. You are so close to having Zoo surpass K2. You offer a free version of Zoo, but there is no community to ask questions, which is a big downfall. The community is what made K2 so popular and the fact that so many clubs have adopted it. Please give everyone a reason to use Zoo instead.

reply
- houston
  
  | #
  
  Actually I'm not looking for creativity but functionality. We've used PURE several times, because it's a clean basis, very easy to modify and fast. We've nearly dropped modifying different "creative" templates because redesigning takes too much time. As an example we've come to use pure Gantry rather than specific templates. Public ZOO showcase / forum is a good idea.
  
  What I really miss are clean business templates:
  - corporate site
  - multi-language corporate site
  - portfolio site
  - video showreel
  - shop interface
  ...
  
  reply
  - sascha
    
    | Profile | #
    
    You will love the blank Warp6 master theme...
    
    reply
gonzalosur

| Profile | #

I canÂ´t wait!!

reply
joomla

| #

"You will love the blank Warp6 master theme... "

really? when?

reply
- Joel
  
  | #
  
  "Release date is May 2nd"
  
  reply
Jelger

| #

Where can I find information about PHP requirements for WARP 6?

reply