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.
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.
What's your favorite new feature of Warp 7? Did your suggestions make the final cut? Let me know in the comments below.