Nano2 Theme

Fully responsive and based on Warp 6.2

Jul
02
Nano2 Theme

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.

Related Posts

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 | | Posted in Themes, Warp

Comments (83)

  • maverpix

    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 ;)
  • ieqshop

    ieqshop

    | Profile |
    Wow. Responsive! Mobile friendly. It will be a trend, I think.
  • ethistle

    ethistle

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

    mustafa

    | Profile |
    Cool and nice. Like it.
  • luca.caliciotti

    luca.caliciotti

    | Profile |
    Very Great!!! This is template for July 2012?
  • studioz2

    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)?
    • zach

      zach

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

    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.
  • hugo.nascimento

    hugo.nascimento

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

    Thank you
    Hugo
    • sascha

      sascha

      | Profile |
      Nano2 is its own template. You can install it parallel to the old Nano template.
  • hugo.nascimento

    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?
  • thomas.cummings

    thomas.cummings

    | Profile |
    Do you know when the updated Master Theme will be available?
    • steffan

      steffan

      | Profile |
      We are updating it now, it will be online later today.
  • greenparrot

    greenparrot

    | Profile |
    Hi

    Will the output from Zoo be made responsive?

    Roy
    • greenparrot

      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
  • kpappas

    kpappas

    | Profile |
    zoo responsive ?
  • sebmolo

    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...
    • digijim

      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?
  • enes.ertugrul

    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...
    • sascha

      sascha

      | Profile |
      Maybe we will do a tutorial...
      • kevin.morrison.1

        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?
      • ezat.bajbouj

        ezat.bajbouj

        | Profile |
        Thank you for all great job...
        waiting for your tutorial...

        Regards
      • studioz2

        studioz2

        | Profile |
        +1 for the tut about this
      • nepol

        nepol

        | Profile |
        +1
      • joon2008

        joon2008

        | Profile |
        OH! we can update our current themes to responsive? that will be AWESOME!
      • alchris

        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.
      • xavi.perez

        xavi.perez

        | Profile |
        +1, please!!!
        • enes.ertugrul

          enes.ertugrul

          | Profile |
          any update about the tutorial?
  • john.coyne

    john.coyne

    | Profile |
    Great to see YOO finally going responsive. :)
  • peter.salameh

    peter.salameh

    | Profile |
    Great great great!! Switched from nano to nano2 just now. Completely seamless. Thanks!!!!
  • peter.salameh

    peter.salameh

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

      sascha

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

    bigjens

    | Profile |
    Nice! Excellent choice to create Nano2.
  • hugo.a.perez

    hugo.a.perez

    | Profile |
    Great job.. !!
  • damir

    damir

    | Profile |
    Great Work!
  • nepol

    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.
    • sascha

      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
      • mark.reynolds

        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)
      • nepol

        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
  • viktor.horst

    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.
    • sascha

      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.
      • tyler.rolfe

        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...
        • kevin.morrison.1

          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.
          • tyler.rolfe

            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.
          • kevin.morrison.1

            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.
          • nepol

            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.
          • kevin.morrison.1

            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!
          • nepol

            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
          • sascha

            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.
          • nepol

            nepol

            | Profile |
            Thanks sascha!
  • beau.lukes

    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.
  • william.rilenge

    william.rilenge

    | Profile |
    Will it be available for 1.5?
  • dean.villegas

    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.
    • sascha

      sascha

      | Profile |
      This is a good idea. We will add this with the next release.
  • cihan.sevil

    cihan.sevil

    | Profile |
    Yoo rock guys!
  • magicspon

    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
  • mmediacorp

    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!
    • largeproductions

      largeproductions

      | Profile |
      ^^ Seconded!

      Nice work YOOtheme, you guys pulled it out of the bag with this one :)
  • aksel

    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.
  • ralharithi

    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.
  • dimoosh

    dimoosh

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

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

    yaacovkrief

    | Profile |
    will it be Available for Joomla 1.5?
    • greenparrot

      greenparrot

      | Profile |
      as stated above NO

      J1.5 has end of life as September!
  • kasper.andersen.11

    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!
  • frank.aucoin

    frank.aucoin

    | Profile |
    Wow! Good job. Really nice!
  • gregory.salsedo

    gregory.salsedo

    | Profile |
    Nice job guys!
  • george.anderson

    george.anderson

    | Profile |
    Great job - Thanks
  • anna.robinson

    anna.robinson

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

    mrmarkos

    | Profile |
    Can we expect Revista2 template? ;)
  • seiaone

    seiaone

    | Profile |
    great
  • pixvisual

    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.
  • kanefire

    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!
  • exoduser

    exoduser

    | Profile |
    I'm so glad that YooTheme goes responsive now.

    Cheers!
  • peter.daalmeer

    peter.daalmeer

    | Profile |
    It looks very cool, very nice template->thanks Yootheme!
  • 1912

    1912

    | Profile |
    Which theme is shown above in the blog entry (teaser Image)?
  • flytreklame

    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!
  • cedric.pilard.22

    cedric.pilard.22

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

    Thanks!
  • stubovsky

    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!!!
    • alex.mc

      alex.mc

      | Profile |
      +1
    • ged70

      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?

Leave a comment

Please login to leave a comment.