Today we want to present some small but nice goodies of our Warp6 theme framework. We added additional layouts to customize several information pages. You are now able to configure and style your own offline and error pages. Also you can activate a dedicated browser upgrade page which only gets displayed to visitors using Internet Explorer 6.

All these pages use the same clean layout and display a relevant headline with a short description text. Therefore we have added a separate error.css file which defines the general error page style. This also gives you the opportunity to create your very own style for system messages like error codes and an offline message.

Warp6 comes with a dedicated theme for mobile devices! We know this was a long time awaited feature. Now you'll get it!

Mobile Theme

So what is a mobile theme? A mobile theme provides the general look and feel of a mobile device's user interface, so you'll get the best browsing experience on the go. Warp6 supports all mobile browsers which use the WebKit engine like the Apple iPhone, iPod Touch and Google Android devices!

And yes we also support the iPhone 4 and its new retina display, with its awesome 960-by-640-pixel resolution on a 3.5 inch LCD. The Retina display has four times the number of pixels as previous iPhones, resulting in double the pixel density.

This means that the theme requires optimized images for the high pixel density display. And guess what, we deliver the mobile theme with all images optimized for the retina display to show up in a crisp resolution.

Here we go with our new theme admin and configuration UI of the Warp6 theme framework. Yes, you heard right! Warp6 now comes with a nice and unobtrusive UI for the theme configuration. We know we are late to the party but we wanted to make sure to get it right from start. Basically we didn't want to change the native theme configuration UI of WordPress and Joomla too much because everyone is familiar with using them. But on the other hand we wanted to implement some new features to improve the overall user experience. So we created a very slick and clean UI implementation. It focuses on simplicity and integrates perfectly in the Joomla and WordPress administration while supporting every framework feature on both platforms.

In addition to our last blog post about the HTML5 template and system markup we now talk about our new CSS framework. We will explain how it works and how you use it.

The CSS Framework

So what is a CSS framework? A CSS framework is a rich tool set of useful CSS classes to style HTML markup. It provides cross-browser support and enables you to build robust and future-proof websites. For Warp6 we created our own CSS tool set. It is a collection of best practices we learned in the last 5+ years of theme development. Of course we also kept track with the major CSS and grid frameworks which popped up in the last years and what we can learn from them to improve our code.

Last week we highlighted the new Warp6 framework and the new styles feature. This week let's start with something we are very proud of: Warp6 is fully packed and enriched with HTML5 and CSS3 goodness!

The template markup is now completely HTML5 based and we updated the entire WordPress, Joomla 1.5 and 1.6 system markup which is now also rewritten in HTML5. We also use a lot of CSS3 and CSS 2.1 selectors which we couldn't use back in the days when we supported IE6. Now let's take a closer look at the details of the newly polished markup.

We started this week with a closer look at the overall Warp6 framework structure. Today we want to introduce a new feature called "Styles" which relates to the framework structure. So if you missed the latest article you can read it here: Inside the Warp6 Framework.

Styles

Styles are variations of the default theme and are similar to the concept of child themes in Wordpress or sub themes in Drupal. A style defines a layer after the default theme and can inherit or override resources from the parent default theme. We implemented this by using the file cascade we described in the previous blog post. Warp6 looks first in the specific style folder and loads the file if it's found. Otherwise it looks what's next in the cascade. This gives you full flexibility to override any file of the default theme. Each style is placed in its own directory in the themes /styles folder and can provide its own custom HTML layouts, CSS, JavaScript and images. Let's take a look at this feature in the following example.

Today we released our new club icon set: E-Commerce 3! This is the third part of our e-commerce series. For this icon set we focused on shipping and storage icons. One of the highlights is our new truck icon. We spend a lot of time working on all the details and are pretty proud how great the truck looks at 512 pixels! The second highlight is the parachute box icon. We had some concerns because of the different perspective of this icon but we are really suprised how well this worked out. The icon set also includes a pallet and sack barrow with different boxes as well as a shopping bag in different color variations. This makes 13 altogether. All icons come in 32-bit transparency PNG file format and in 8 different standard sizes, ranging from 16x16 to 512x512 pixels. It makes a total of 104 newly handcrafted icons which are of course optimized for each specific size.

Head over to the new e-commerce icons and join the icon club!

Sign Up Today

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.

Surprise! We are very proud to announce our next generation theme framework: Warp6! Over the last 6 months we worked hard on it and put all our efforts into making it the state of the art theme framework. Often people think that theme frameworks are overdone with a lot of bloated code and too much features which slow the site down. Be relieved, Warp6 is quite the opposite! It's created from developers perspective - simplified, no magic, just a great toolset to develop cross-platform themes. We believe that Warp6 is the fastest and slickest theme framework to date. For us everything is done the way it should be.

Milk template is our latest fresh and friendly design and a good choice if you are looking for a clean and lightweight template, that presents you and your content in the best light. We took all the best from previous business like releases like Enterprise, Studio, Way Beyond or Phoenix, to combine them to a exciting new experience. Its shiny look and feel fits perfectly to our Iconsets available.

Milk comes with 10 bright color variations and 6 discreet background textures you can individually apply to them. This makes it pretty easy to create your own unique design! Another interesting aspect beneath a broad range of module variations available, is the ability to wrap top and bottom modules with a box that also adds a hover effect to them. Milk is build with the Warp 5.5 theme framework which utilizes the latest web techniques and is available for Joomla 1.5, 1.6 and WordPress 3.0.

Feature list

• A variety of template color variations
• Lots of modules with color variations, endless combinations with icons and badges possible
• Built with the Warp5.5 template framework
• Utilizes different webfonts
• Compact size, using minified CSS/JS, gzip and data-URI's

Joomla Demo WordPress Demo