Inside the Warp6 Framework
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 dependent 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 dependent /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 dependent /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 an 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 extendable 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!
