Warp 7 Template Framework Released! (Sneak Peak)

Hot off winning a JOSCAR at this year's J and Beyond conference, YooTheme strikes again with the release of Warp 7 - the next generation of their wildly popular template framework. Check out our full review and get a sneak peak of the all-new backend.


They asked and you responded. Hello Warp 7.

Disclaimer: You'll have to excuse my overuse of exclamation points in this post...I just can't contain myself!

If you can't tell, I am very excited to be talking about the Warp 7 Framework! Not only because I use Warp for nearly every Joomla project these days, but also because this latest version packs a ton of user-suggested features that we've all been waiting for! 

That's right. The YooTheme crew took your wish lists for Warp 7 and introduced over a hundred new features into this new version. Most notable is the completelely revamped administration area with a theme customizer and preview area.

The first theme to use Warp 7 is Nano 3, YooTheme's July 2013 template club release. At the time of this writing they have yet to release a free version of Warp 7 (The GPL Master Theme), but the default style of Nano 3 is pretty close to what I would expect to see in the new Master Theme. So with that, here's a few highlights of Nano3 and my impressions of Warp 7.

All New Template Admin

On the surface, the front-end of Warp 7 is almost identical looking to Warp 6. It packs the same module positions and layout options for the most part. Underneath is where you'll notice all the new stuff. Without getting into the revamped codebase and technical jargon, lets have a look at the Warp 7 administration. 


Theme styles: While Nano3 comes with 8 pre-built styles, the new Customizer feature is the main star of Warp 7. Here, you can customize nearly every aspect of your theme without writing a single line of code. Your changed are immediately updated in the style's LESS file, and compiled to CSS. You can edit any of the existing styles or easily create your own (which I highly recommend). 

Customizer packs a color-picker and full Google Font support. From colors & typography, to margin spacing and border radius, over 500 elements are fully customizable without writing a line of code ~ now that's impressive!


Another feature you're sure to find useful is Warp 7's module management. This killer new feature allows you to set the style and display for each module individually, all from a single screen in the template admin. Module class suffixes are no longer required. To change the look of a module, simply choose a pre-set style from the dropdown list. You can also choose an icon (over 100 available), a badge style, and custom badge text. Additionally, modules can be shown or hidden on different screen sizes or devices - more on that below, under Mobile.


Mobile Devices

The previous version, Warp 6, has been responsive since it came out over two years ago. Since then we've seen a big evolution in the RWD arena (Responsive web development). One of the ways Warp 7 adapts to current mobile trends is with it's revamped mobile-menu. On smart-phones (or any browser window narrower than 768 pixels), the main navigation menu converts to single a button in the top-left corner. When tapped, a navigation panel slides out from the left edge of the screen, pushing the page aside but not competely out of view.

This design concept, known as "Hint and Reveal", was first made popular by mobile apps like Facebook and Google Plus. Thanks to HTML5 and jQuery, the technolgy behind Hint and Reveal has made it's way to mobile website development. We're seeing this technique used more often as designers struggle to optimize screen real estate for smaller displays. 


Another super useful feature of Warp 7 is the ability to hide or show specific modules depending on the device or screen size. For example, if you're using a large photo gallery module that for whatever reason isn't looking right on smaller screens, then you can simply hide it on phones or tablets. Or maybe you want to add a click-to-call button to display on phones only. There are three settings to choose: Desktop,Tablet and Phone. You can even customize what the screen-size break points should be using the theme Customizer described above.


More useful features

Warp 7 packs many more killer features, far too many to describe in this single article.

  • Full LESS CSS support 
  • Theme customizer with color picker and over 500 customizable elements
  • Hundreds of font options from Google webfont library 
  • UIkit, YooTheme's new front-end framework
  • Native Bootstrap support for Joomla 3.1 (with option to disable)
  • Better mobile/responsive support and off-canvas menu
  • Open Graph support
  • PHP Framework overhaul 

The next thing I'm looking forward to is UIKit, Yootheme's new front-end framework developed specifically for Warp. They don't have much info on it yet so stay tuned. Speaking as a designer who's been somewhat under-enthused by Bootstrap, I'm looking forward to seeing what UIkit is all about.

I'll also be looking forward to the release of the GPL Warp 7 Master Theme later this summer. Expect an update of our free, Warp-powered Joomla template Kotoba around that same time.

For more, check out YooTheme's demo site and read their blog posts on Warp 7 and Nano3. I hope you're as excited as I am. Warp 7 - Engage!

What's your favorite new feature of Warp 7? Did your suggestions make the final cut? Let me know in the comments below.

Related Articles

About the Author

Scott Greenwald

Scott Greenwald

Scott Greenwald is designer and front-end developer. He's been a Joomla addict since 2007 and a contributing author to the Joomla! Community Magazine.
Follow Scott on Google+ and Twitter. Subscribe on YouTube for exclusive video tutorials.

Comments (10)

  • h2theme


    08 July 2013 at 01:39 | #

    Thank you my firend.
    I liked it...


  • KaraokeAmerica


    08 July 2013 at 12:18 | #

    Scott, I have used YT templates as well since J1.5, but was planning on going to either another template company or learning how to design my own. One of the reasons is that YoouTheme did not have the ability to hide menu items based on window size. I managed this on my site by getting someone to give me some hacked js for my template and using a hardcoded class suffix that essentially "breaks" the menu for mobile devices. It's not an easily repeatable exercise and is too much of a time sink when changing/updating templates.

    It appears that in Warp7 this feature is added for modules, but what about menu items?


  • krish


    08 July 2013 at 14:38 | #

    These Joomla Templates Framework are amazing and very attractive.The design is very good and the style is great.I liked the post very much.Nice collections of themes


  • Scott Greenwald

    Scott Greenwald

    09 July 2013 at 23:47 | #

    Warp 7 has full Bootstrap support, which includes responsive utility classes that can be used to hide or show any item. Adding one of those classes to your menu item's parameter "Link CSS Style" should do the trick. I just tested on Nano3 & it worked like a charm. Check out the Bootstrap documentation on this: http://twitter.github.io/bootstrap/scaffolding.html#responsive


  • KaraokeAmerica


    10 July 2013 at 05:33 | #

    Thanks Scott. Are you saying that any bootstrap-based template will have this feature? If so, then most template companies should also offer this feature with J3.X releases shouldn't they?


  • Scott Greenwald

    Scott Greenwald

    10 July 2013 at 12:40 | #

    Correct. Any Bootstrap-based template should be able to take advantage of the native Bootstrap utilities. I should point out that the Warp 7's module management feature mentioned in this article is actually using YooTheme's own framework called "UIkit", which sits on top of Bootstrap. Likely because they needed extra functionality that the default Bootstrap utilities didn't offer.


  • Michael


    14 July 2013 at 17:11 | #

    Hi Scott, Any idea where to remove the warp branding on this new warp 7 template? I don't see anything in the Template options like the previous versions. Any help would be appreciated. Regards, Michael.


  • Scott Greenwald

    Scott Greenwald

    15 July 2013 at 00:26 | #

    I see the option to remove Warp Branding in the Settings tab, under Content.


  • Michael


    15 July 2013 at 14:43 | #

    LOL. Must have been blind that day. Thanks Scott.


  • Silly Bit

    Silly Bit

    22 November 2013 at 06:30 | #

    Hello Scott, I can honestly say, that the biggiest think about WARP7 is the UIkit. I have never see something such easy, with its customizer - it seems it is almost new stand-alone framework. When you try it on your localhost, you are able to make almost any theme for any system in one day. What I wonder is, if they merge webkit functionality to the UIkit (I do not expect that, however, as webkit is paid component..). The biggiest disapoinment about WARP7 is that master theme is still missing.. but I can understand why they are not in hurry with that.. WARP7 is significanat milestone on the framework market..


Leave a comment

You are commenting as guest. Optional login below.