Warp is mainly a CSS/HTML framework for Joomla that provides a toolbox of functionalities using PHP and JavaScript. We created it to provide web developers and designers with a set of tools to take off their shoulders what has to be done for every project over and over again, so they can focus on the unique tasks that come with their specific web development project.
Below you find all the CSS, PHP and JavaScript features provided by the Warp framework. Also, learn more about the menu system and the module system.
CSS/HTML Framework
Our CSS/HTML Framework creates a very robust and flexible layout based on web standards. It is easy-to-use, search engine friendly and cross browser compatible.
| Feature | Description | |
|---|---|---|
| 3 Column Layout | The CSS framework uses two 3-column-layouts, one nested into the other. This provides a wide range of column-based layout combinations. | |
| Search Engine Friendly | The 3-column-layout is optimized for search engines and comes with a 2-1-3 column ordering. In the markup, the main content comes first before the left and right column. | |
| Tableless Layout | Of course, the whole 3-column-layout and the fluid module grids are built without using any tables, as it is the standard for any modern CSS/HTML framework. | |
| Joomla Overrides | The Warp framework comes with overrides for Joomla's core output to also render the content area with meaningful HTML markup instead of tables. | |
| Modules Types | The different module types are completely independent of the background of the container they're displayed in, no matter if the background is light or dark. | |
| Menu Modules | You can mix the drop down menu with any Joomla module, for example, the login module. The module will drop down and look like it is part of the menu. | |
| CSS Reset | A CSS reset removes the inconsistent styling of HTML elements provided by browsers and sets suitable default values. Form styles are also especially improved. | |
| Cross-browser Support | The framework is designed to be fully compatible with Firefox 3+, Internet Explorer 6+, Safari 3.2+, Opera 9.5+, Chrome 1+, Camino and Konqueror. | |
| Validation | A basis for our framework to provide cross-browser support is that it validates to XHTML and CSS web standards. | |
| Minimum of IE6/IE7 Hacks | Our framework reduces the need to fix CSS for the Internet Explorer to an absolute minimum. However, of course it provides the CSS fixes necessary to make your site look good in IE6 and IE7. | |
| Image Sprites | We take advantage of image sprites to the fullest. Means: We put as many image slices as possible into a single image file to minimize the loading time of your website. | |
| Accessibility | The layout structure provides good accessibility. And of course the template stays fully functional if JavaScript is disabled. | |
| Template Parameters | To keep template customizations as easy as possible many important widths can be set in the template configuration. For example, for the main page, all layout columns and for the drop down menu. | |
| Mobile Devices | Our templates are fully compatible with mobile devices like iPhone and iPod Touch. | |
| iPhone/iPod Touch Favicon | They also support the iPhone and iPod Touch favicon which you can find in a template's root folder. |
PHP Toolbox
Our PHP code base for the Warp framework adds a lot of awesome features that aren't possible with standard Joomla templates. It takes your template customizations to the next level.
| Feature | Description | |
|---|---|---|
| Powerful Menu System | The Warp framework provides a powerful menu system to handle menu types with different templates and styles, letting you create any interface you have in mind. | View |
| Menu Types | In addition to our default menu rendering we provide two different menu types: the accordion and drop down menu. Both can be loaded by using the menu class suffix. | |
| Drop Down Menu | The number of columns in the drop down area can be set individually for each menu item to suit any of your needs. | |
| Flexible Module System | The flexible module system handles module types with different templates and styles, letting you display your content anywhere on your site. | View |
| Module Templates | The Warp framework provides a rich set of module templates to build any kind of module type. This way, every module variation only has the necessary amount of DIV containers. | |
| Module Proportions | Different proportions can be set for each module position, for example, an equal width ratio for the top position and a golden ratio for the bottom position. | |
| Module Parameters | The module class suffix allows you to set different module parameters like the style, color, badge, icon and the YOOtools color. | |
| Menu and Module Subtitles | Menu items and module headers can have subtitles to provide a more detailed explanation on what information a user will find. | |
| Joomla suffixes | The Warp framework makes full use of Joomla's page, menu and module suffixes to pass parameters. You can easily create your own parameters. | |
| Single configuration file | All configurational parameter settings necessary for a template to work can be found in a single configuration file called config.php. | |
| Gzip compression | A template's entire CSS and JavaScript can be compressed in a single file. You can also add gzip compression for ultra fast loading. | |
| Ajax-based search results | The framework provides support to pass Joomla search results to Ajax calls. For example, the YOOsearch module uses this feature. | |
| Page colors | A page color can be set individually for each menu item. That way you can style every page linked to from a menu item independently. |
JavaScript Toolbox
Here is a list of the JavaScript key features provided by the Warp framework. You can customize this template by using a lot of smooth animations and fancy effects.
| Feature | Description | |
|---|---|---|
| Dropdown Menu | Moves the drop down area out with a smooth transition. The drop down area also remains visible for some milliseconds when the mouse leaves it unintendedly. | |
| Fancy Menu | The Fancy Menu is a real eye-catcher. It adds smooth moving or fading background effects to the main menu bar. | |
| Accordion Menu | A smooth accordion effect can be applied to sub menu when using a menu item "separator". Closed/Opened state and two different sliding modes are supported. | |
| Slider Menu | When hovering the main menu items, a smooth horizontal sliding effect is added. It is the same effect as the famous YOOslider. | |
| Smooth Scroll | Users are often disoriented when clicking on a link which immediately jumps somewhere else in the same document. This JavaScript smoothly scrolls to the new link rather than jumping there directly. | |
| Match Heights | We provide an easy-to-use JavaScript to match the height of different HTML elements like the modules on the top and bottom positions. | |
| Morphing Effects | With this script you can add transitions between CSS properties to create smooth animations. For example, an animated tab menu can easily be created. | |
| Background Animations | This script allows you to create a periodical animation between unlimited background-colors. | |
| IE6 Alpha Transparency | Two IE6 PNG fixes are provided. One to fix inline images by adding the CSS class "correct-png" and one to fix CSS background images. Highlight: background-position and background-repeat are supported! | |
| IE6 :hover and :focus | This script fixes the :hover and :focus quirks of IE6 for any HTML element. A CSS class is applied when the HTML element is "moused over" and removed when "moused out". |
