Nano2 Theme

Fully responsive and based on Warp 6.2

Jul

Now we are very proud to present you Nano2, our first completely responsive theme! It takes full advantage of the brand new Warp 6.2 theme framework, that we have been working on for the last months. Warp 6.2 comes with a completely responsive design which adapts perfectly for all device resolutions.

Nano2 is the successor of our very popular Nano theme. Like its predecessor Nano2 is an optimized and streamlined framework theme and serves as a blueprint to build your own custom themes. We revamped all of the existing Nano styles and made them responsive. They look fresher now and adapt perfectly for different screen sizes. In addition we added 3 new styles to cover all kinds of different layouts. These styles are a great starting point for you to design your own customizations, modifications and enhancements.

Fully responsive layout
Available for Wordpress and Joomla 2.5
8 style variations available
Choose from 5 colors and 8 fonts
1 module style combinable with 4 badges and 6 icons
Flexible template and column widths
All Warp framework features are available

Joomla Demo WordPress Demo

Responsive Design

The basic idea of responsive design is to have a layout that is not bound to a particular screen size, but instead adapts flexibly to different device resolutions. To achieve this the Warp 6.2 framework offers all the tools you need: A fluid grid sytem, fluid images and media, CSS media queries, breakpoints and corresponding JavaScript functions. Learn more in our blog posts about the layout and CSS parts and the JavaScripts parts.

Responsive Master Theme

Of course we also updated our famous Master theme. This theme is the perfect blueprint to create responsive themes based on the Warp 6.2 framework. Compared to the Nano2 theme it is completely stripped down, has no styles and includes only the neccessary basics. It is GPL licensed and available as a free download for Joomla and Wordpress.

Warp 6.2 Backward Compatibility

All older Warp 6 based themes can be updated to Warp 6.2. But they'll still continue to use the mobile theme and not the new responsive features. If you want to make your theme responsive you need to take a look at the Nano2 theme, see how this is accomplished and make your own modifications.

Some Warp features are deprecated and will not be available in Warp 7 like the Mobile theme, CSS3Pie, IE CSS files and some CSS classes (see changelog). If you update your own themes, remember that in Warp 6.1.11 we've already changed the search to use a CSS class instead of an id (#searchbox to .searchbox).

Widgetkit Is Responsive

As icing on the cake we introduced the brand new responsive Widgetkit 1.1 last week. All widgets including all the fancy effects are now adapting perfectly for smaller screen sizes. That way, the new Widgetkit is usable for all devices and is also future-proof. Besides bugfixes we've added more nice little features. Take a look at this Nano2 page, resize your browser window and see the responsive Widgetkit in action. Read more about the Widgetkit 1.1 release here.

If you missed our articles about the new responsiveness in Warp and Widgetkit, here you go:
Widgetkit Gets Responsive
Warp's Responsive Scripts - Part 2 (JS)
Warp gets responsive - Part 1 (CSS)

By Sascha | 02 July, 2012 | Posted in Themes, Warp

Comments (84)

maverpix

| Profile | #

Congrats on your first responsive theme,been looking forward to this. Your efforts in making the framework and Widgetkit responsive are much appreciated ;)

reply
- joon2008
  
  | Profile | #
  
  SO EXCITED :)
  
  reply
ieqshop

| Profile | #

Wow. Responsive! Mobile friendly. It will be a trend, I think.

reply
ethistle

| Profile | #

This is a great framework to work off and get creative - thanks for the great work yoo theme

reply
mustafa

| Profile | #

Cool and nice. Like it.

reply
luca.caliciotti

| Profile | #

Very Great!!! This is template for July 2012?

reply
studioz2

| Profile | #

Hi Guys! Congrats on this step. Have one question though - is it possible to also make older Warp6 themes responsive - like Revista ?
Does the upgrade of the Warp framework enhance the theme's capabilities in this area (responsiveness)?

reply
- zach
  
  | Profile | #
  
  I'd suggest you re-read the blog post in its entirety ;)
  
  reply
maggoo

| Profile | #

Awesome stuff.

Few details i really like are the 2kb responsive js file, but also the variations in the profiles to show off how the elements can be arranged.

reply
hugo.nascimento

| Profile | #

So can i upgrade my Nano to Nano2, or should it be better to reinstall everything again?

Thank you
Hugo

reply
- sascha
  
  | Profile | #
  
  Nano2 is its own template. You can install it parallel to the old Nano template.
  
  reply
hugo.nascimento

| Profile | #

But as you said in "All older Warp 6 based themes can be updated to Warp 6.2. But they'll still continue to use the mobile theme and not the new responsive features. If you want to make your theme responsive you need to take a look at the Nano2 theme, see how this is accomplished and make your own modifications."

Means that maybe it's better to reinstall, or is there any process that i can override my current Warp version? Just replace files?

reply
thomas.cummings

| Profile | #

Do you know when the updated Master Theme will be available?

reply
- steffan
  
  | Profile | #
  
  We are updating it now, it will be online later today.
  
  reply
greenparrot

| Profile | #

Hi

Will the output from Zoo be made responsive?

Roy

reply
- greenparrot
  
  | Profile | #
  
  Sorry, I meant to say the new template looks great. Looks like loads of work has gone into it ~ thanks
  
  Going to move a site over from the corona theme and its doesn't look a huge job to get Nano2 to look like Corona
  
  Roy
  
  reply
kpappas

| Profile | #

zoo responsive ?

reply
sebmolo

| Profile | #

Great great work! Nice and clean look and the responsiveness works great! Any plans for Z00? the Zoo component works fine with the template, but some elements don't reposition very well...

reply
- digijim
  
  | Profile | #
  
  I'm wondering the same thing? Zoo is one of the best ways to extend Joomla. However mobile adaption has not been painless....
  I think responsiveness built in to Zoo would set it apart from others by lightyears!
  Is there any plans and timeframe for this?
  
  reply
enes.ertugrul

| Profile | #

What can I just say?
- We love Yootheme!!!

But we would like to find more guidence about how to update our current non-responsive warp templates to responsive one.

Thanks...

reply
- sascha
  
  | Profile | #
  
  Maybe we will do a tutorial...
  
  reply
  - kevin.morrison.1
    
    | Profile | #
    
    That would be over the top Sascha! You guys have the best tutorials and make it so easy to follow. Heck maybe some of the other developers that use your templates could share their conversions somehow with other active club members, is that something that we might be able to do?
    
    reply
  - ezat.bajbouj
    
    | Profile | #
    
    Thank you for all great job...
    waiting for your tutorial...
    
    Regards
    
    reply
  - studioz2
    
    | Profile | #
    
    +1 for the tut about this
    
    reply
  - nepol
    
    | Profile | #
    
    +1
    
    reply
  - joon2008
    
    | Profile | #
    
    OH! we can update our current themes to responsive? that will be AWESOME!
    
    reply
  - alchris
    
    | Profile | #
    
    Can we please get the tutorial please. I really need it for my mobile theme. My slide show gets stuck when I switch orientation.
    
    reply
  - xavi.perez
    
    | Profile | #
    
    +1, please!!!
    
    reply
    - enes.ertugrul
      
      | Profile | #
      
      any update about the tutorial?
      
      reply
john.coyne

| Profile | #

Great to see YOO finally going responsive. :)

reply
peter.salameh

| Profile | #

Great great great!! Switched from nano to nano2 just now. Completely seamless. Thanks!!!!

reply
peter.salameh

| Profile | #

Widget kit has beautifully responsive images. Is there a way to achieve such responsive images in normal joomla articles?

reply
- sascha
  
  | Profile | #
  
  Sure, just use the CSS class .size-auto :-) You can find this class everywhere in our demo content
  
  reply
bigjens

| Profile | #

Nice! Excellent choice to create Nano2.

reply
hugo.a.perez

| Profile | #

Great job.. !!

reply
damir

| Profile | #

Great Work!

reply
nepol

| Profile | #

This is a great idea but I've tested the DEMO site on a few devices and I have to say it doesn't accomplish the goal:

iPod touch & iPad: When turning from portrait to landscape the website resizes to a higher width.

The menu in Mobile is very ugly, sorry that Select box it's awful. I loved the old menu on mobile.

reply
- sascha
  
  | Profile | #
  
  1. There is currently no proper solution for the resize issue. It is the default behavior from iOS and there is no API to change it.
  
  2. The select box is currently becoming the number one solution for responsive menus. It is very user friendly and big sites like Smashing Magazin are using it for good reasons.
  
  I edited your comment and removed the bug reports. Please post them in our support center http://www.yootheme.com/support
  
  reply
  - mark.reynolds
    
    | Profile | #
    
    I'm fine with using the select box, but the way it is currently is not user friendly as all Sascha. At the moment every menu items appears on the same level which makes it very difficult to navigate. It needs to have the parent and child menu items separated to different levels using - (see my feedback http://www.yootheme.com/support/question/16279)
    
    reply
  - nepol
    
    | Profile | #
    
    I see you implemented a solution for the resize issue and also added hyphens to the menu. Thanks guys, you really are awesome.
    
    Now if you can style a little bit the dropdown with css (I'm doing it with mine), everything would be perfect, I'll post it in the support. Anyways thanks again
    
    reply
viktor.horst

| Profile | #

I love that Yootheme is responsive now!

The only thing I really dislike is the mobile menu. Dropdown is ugly. The old versio, like Nepol said above, is much better.

reply
- sascha
  
  | Profile | #
  
  The select box is currently becoming the number one solution for responsive menus. It is very user friendly and big sites like Smashing Magazin are using it for good reasons.
  
  reply
  - tyler.rolfe
    
    | Profile | #
    
    Just because it's popular doesn't mean it looks nice. Not trying to be harsh because I love the theme but. In all honestly its not the most pleasant thing to look at...
    
    reply
    - kevin.morrison.1
      
      | Profile | #
      
      Think about it Tyler, a mobile site is more about the content than the design of it. If it is clean and easy to navigate your users are not going to be offended if it looks plain and dry. I know for me when i visit a site on my phone I could care less how it looks as long as I can navigate it and easily find what I am looking for.
      
      reply
      - tyler.rolfe
        
        | Profile | #
        
        But the menu as of now doesn't have sub-items so it's not even easy to navigate. It's very possible to make a beautiful responsive menu and still make it user friendly.
        
        reply
      - kevin.morrison.1
        
        | Profile | #
        
        It is not that it cannot be done, it is more over that many of the devices out there do not offer the capability of handling such a menu properly or consistently. Once Joomla 3.0 is released there are going to be some huge leaps forward for template developers in this area.
        
        reply
      - nepol
        
        | Profile | #
        
        Yes once Joomla 3.0 is ready..... In the meantime YOO's clients have clients to provide for, we just can't present a menu that isn't nested, you said mobile is all about the content right? Well try to navigate trough content with 40 menus not knowing wich is what and where does it belong to. I really realle love what you did this month, is one of the best things you've ever done.
        
        reply
      - kevin.morrison.1
        
        | Profile | #
        
        Honestly, are you naive enough to think that someone is going to spend the time on a 3 inch screen to navigate through 40 menus? I think some user testing is in order before you go blaming anyone for not supporting this ridiculous endeavor!
        
        reply
      - nepol
        
        | Profile | #
        
        It's not ridiculous and with the later menu it was very easy to navigate trough a great number of menus because, you know, it wasn't a vertical list of endless words. The demo alone has 30+ menu items, so a simple test on the demo site can get you the right idea of the usability
        
        reply
      - sascha
        
        | Profile | #
        
        Hi guys, I already pointed out in the comments below that we will indent the menu icons in the select box menu with the next update. Also Joomla 3.0 offers no new features regarding this issue. In general we will have no benefits in the theme frontend from Twitter Bootstrap. We have already everything on board with Warp. For further discussion please use our support center.
        
        reply
      - nepol
        
        | Profile | #
        
        Thanks sascha!
        
        reply
beau.lukes

| Profile | #

Version 2 is fantastic! Nice job guys. Nano 1 is was a nice idea...but this is very usable almost right out of the box. Being fully responsive is just icing on the cake. I might even swap out themes now on one of my sites with Nano2.

reply
william.rilenge

| Profile | #

Will it be available for 1.5?

reply
- viktor.horst
  
  | Profile | #
  
  I don't think so, see article http://www.yootheme.com/blog/2012/05/21/goodbye-joomla-15-and-ie7
  
  reply
- sascha
  
  | Profile | #
  
  Sorry as Viktor already pointed out it will not be available for Joomla 1.5
  
  reply
dean.villegas

| Profile | #

This is the best theme put out in the last 2 years. Love your work on this.Excellent.

However please resolve the main menu issue. When viewed from a mobile phone, my site menus titles are converted into one long list with no hierarchy. Basic rule of UI design is "distributed level of details". Please indent the sub levels with spaces.

reply
- sascha
  
  | Profile | #
  
  This is a good idea. We will add this with the next release.
  
  reply
cihan.sevil

| Profile | #

Yoo rock guys!

reply
magicspon

| Profile | #

this is awesome... marvelous work yoo...

I see that you still have to give a pixel width in the backend.

Surely as this is now responsive we can have full screen themes, 100% width. Just had a little play with firebug on the demo site, 100% width looks ace.

Anyhow, muchos gracias

reply
mmediacorp

| Profile | #

Awesome job, guys! I always liked the original Nano a lot, and now it's much improved and responsive. Perfect combination. It looks slick and clean, loads extremely fast, lots of goodies, variations, etc. This is about as perfect a template as one could get.
I'm very impressed, and happy!

Yoo still rock!

reply
- largeproductions
  
  | Profile | #
  
  ^^ Seconded!
  
  Nice work YOOtheme, you guys pulled it out of the bag with this one :)
  
  reply
aksel

| Profile | #

This is a great step forward Yootheme. A much anticipated featured.

As some mentioned however...going down to a single dropdown for the main menu..is not a very good sollution..no matter what you say about it being used in Smashing Magazine etc ;) You gotta keep in mind that your templates are being used in a wide variety of ways by your clients.. Some need to have many menuitems with multiple levels etc.

reply
ralharithi

| Profile | #

Excellent news.

We just tested this template on our demo website and it looks great.

Because we try to have all our products supports Warp, to our surprise we found that what is already installed on the demo already inherits the responsive support.

This is one clear indication of how solid is Warp, and the skills behind it.

Thank you Yootheme, Keep it up.

reply
dimoosh

| Profile | #

great theme! :-))) thank you so much!

i would like to see a fullscreen theme (for photographers or designers) once... is it possible?

reply
yaacovkrief

| Profile | #

will it be Available for Joomla 1.5?

reply
- greenparrot
  
  | Profile | #
  
  as stated above NO
  
  J1.5 has end of life as September!
  
  reply
kasper.andersen.11

| Profile | #

Thank U so much YooPeople! I always use Master or Nano templates to build my sites - and this only gonna make it better - you guys rock!

reply
frank.aucoin

| Profile | #

Wow! Good job. Really nice!

reply
gregory.salsedo

| Profile | #

Nice job guys!

reply
george.anderson

| Profile | #

Great job - Thanks

reply
anna.robinson

| Profile | #

I'm adding my praise to YOO here as well :-) Nano2 is just great!

reply
mrmarkos

| Profile | #

Can we expect Revista2 template? ;)

reply
seiaone

| Profile | #

great

reply
pixvisual

| Profile | #

This is really great and finally responsive! But please come up with some other menu-types. The current menu-type is the same that's been used the last couple of years... You are so creative, you should be able to offer some various menu types.

reply
kanefire

| Profile | #

This is really such a super fantastic Template. It just works in all the ways I want it too!!! It quickly replaced the light style quantum I was using. w00t!

reply
exoduser

| Profile | #

I'm so glad that YooTheme goes responsive now.

Cheers!

reply
peter.daalmeer

| Profile | #

It looks very cool, very nice template->thanks Yootheme!

reply
1912

| Profile | #

Which theme is shown above in the blog entry (teaser Image)?

reply
flytreklame

| Profile | #

Now we´re talking! :) Great job guys! If you now could try to help out all the people on the support forum... :) Have a nice weekend!

reply
cedric.pilard.22

| Profile | #

Hi guys, I am also interested on the theme shown in the blog entry... Which one is that?

Thanks!

reply
stubovsky

| Profile | #

Hi, I would also be very pleased to know the style of the teaser template. Or at least how to get that style - cause it's awesome!!!

reply
- alex.mc
  
  | Profile | #
  
  +1
  
  reply
- ged70
  
  | Profile | #
  
  oh yes, that would be very nice. but after three month there is still no answer in the forum. only the links to "how customize" and "create a new style" were posted by mustaq. why are they show a template / style of nano 2 in the teaser that doesn't exist?
  
  reply
daniel.garrow

| Profile | #

Just wanted to show some people what can be done with the power of Yootheme! We use the Nano 2 theme extensively, and here is the latest.
http://www.webdesignandcompany.com
Thanks to all the Yootheme team who make your templates so easy to use, and modify. Member for life! Just renewed for another year! Best templates for Joomla period.

reply