Warp Gets Responsive

Learn more about the responsive CSS of the upcoming Warp 6.2 theme framework

Jun
12

It has been a little over a year since we released the Warp 6 theme framework. It was a major success for us and we have improved it constantly. That's why we are really excited to announce the next major framework release Warp 6.2 which comes with a completely responsive design which adapts perfectly for all device resolutions. We will do two blog posts where we'll take a closer look at how we implemented the responsive design in Warp. This part will focus on the responsive layout and its CSS. But first of all the good news: It was really easy to make the Warp framework responsive. Thanks to our current CSS framework, which already provided a fluid grid system.

Media Queries and Breakpoints

We added a new responsive.css file to Warp, which contains all the CSS we need to make our themes responsive. For our layout breakpoints we use max-width and min-width instead of any device widths. This makes testing in the browser really easy because the layout breaks as you start dragging the edge of your browser window.

We have chosen our breakpoints around the currently most popular device dimensions. But if you want a more device-agnostic approach, you can easily support more layout dimensions and add more breakpoints. Here are our default breakpoints:

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {}

/* Only Phones */
@media (max-width: 767px) {}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {}

/* Only Phones (Portrait) */
@media (max-width: 479px) {}

We are very satisfied with the breakpoints we chose. The complete theme layout, including all the different modules layouts, adapts perfectly from large to small device widths.

Layouts

Basically we chose a fluid layout pattern for Warp, which relies on fluid grids and images to scale from large screens down to small screen sizes and stacks columns vertically. As you can see from our breakpoints we decided to support mainly 3 different layout dimensions by default. Here is an overview of what happens for each layout:

Desktop and Tablet Landscape

Warp 6.2 Responsive Theme Settings

We didn't want to change too much for the classic desktop resolution. You can still set a fixed width and the theme will center in the browser window. But of course you can easily override the template width with a percent value to have a completely fluid website in your browser window. But we don't think this is very practical for standard websites.

Since most tablet landscape views have at least a resolution similar to small desktops we decided for the layout to look the same.

Tablet Portrait

Warp 6.2 Responsive Theme Settings

The first major layout changes happen in tablet portrait views. The sidebars wrap under the main content and modules always take 100% or 50% percent of the screen width. Smaller grid units like 25% are simply overridden and set to 50% or 100%.

If there are two sidebars, both are side by side beneath the main content and each module inside the sidebars is taking 100% width. If there is only one sidebar, it also wraps under the main content, but each module inside takes 50% width. So, two modules are always nicely aligned side by side. This works really great for nearly all layouts.

Phone Landscape and Portrait

Warp 6.2 Responsive Theme Settings

For a smaller screen width, like on mobile phones, the sidebars and the main contents stack above each other. All modules take 100% width to achieve a nicely stacked layout.

But there is a lot more happening in the theme header. A new select menu is injected as responsive navigation and the logo and search are newly aligned. But more on that in our second blog post.

CSS Helper Classes

We've already had a CSS class size-auto to achieve fluid images, videos and objects since the first Warp 6 release. We also added some useful classes to hide content on specific devices: hidden-desktop, hidden-tablet and hidden-phone.

Theme Settings

There are some general changes in the theme settings according to all the changes to the Warp framework.

Responsive Layout

Warp 6.2 Responsive Theme Settings

There is now an option to enable or disable the responsive layout in Warp. This means, if you don't want your site to be responsive for any reasons, it doesn't have to be. This is really great in combination with profiles. If you use an extension or plugin which doesn't work with responsive layouts, you can simply disable it only for the page where the extension or plugin is used. This is great, right?

Sidebar Widths

To achieve a fully fluid layout we had to change our multi-column layout to percent units. This is why the sidebar widths are now changed from pixel to percent. The default setting is 25%.

Mobile theme and older themes

We removed the mobile settings from our new responsive themes. The mobile theme is now deprecated but still included in Warp. This means all older Warp 6 themes can be updated to Warp 6.2 but they'll still continue to use the mobile theme and not the new responsive features.

Stay tuned for our next blog post. It will take a closer look at the JavaScripts we use for the responsive design.

Related Posts

Warp's Responsive Scripts - Part 2 (JavaScript)
Widgetkit Gets Responsive

By Sascha | | Posted in Warp

Comments (46)

  • pablo.de.la.cruz

    pablo.de.la.cruz

    | Profile |
    Excellent! Waiting to read more.
  • jerry.van.dodewaard

    jerry.van.dodewaard

    | Profile |
    awsome! Been waiting for this!
  • enes.ertugrul

    enes.ertugrul

    | Profile |
    We love Yootheme!
  • greenparrot

    greenparrot

    | Profile |
    Good news Joomla + Zoo + RWD ~ way to go :D
  • richard.stephenson

    richard.stephenson

    | Profile |
    This is great news!
    Will previously released themes be updated to include the new 6.2 responsive functionality? (specially interested in subway)
    • mrmarkos

      mrmarkos

      | Profile |
      I am also curious to answer this question ;)
    • mrmarkos

      mrmarkos

      | Profile |
      I'm particularly interested Revista
      • omar.macias

        omar.macias

        | Profile |
        Will be great also for Downtown...!!
    • steffan

      steffan

      | Profile |
      Sorry, as mentioned in our post older themes will keep using the mobile theme feature and not be updated to use the new responsive features.
      • mrmarkos

        mrmarkos

        | Profile |
        And when you can expect a theme based on the 6.2?
        • sascha

          sascha

          | Profile |
          The next July theme will be responsive :-)
      • maggoo

        maggoo

        | Profile |
        But i guess warp master theme will be, or will there be a new responsive warp master theme?
        • sascha

          sascha

          | Profile |
          Yes, we implemented the responsive design first in our Master theme. It will also be released in July
          • maggoo

            maggoo

            | Profile |
            just awesome:)
          • ray.lawlor

            ray.lawlor

            | Profile |
            SWWWEEEEEET!

            I love the master theme.

            A blank canvas were ideas come alive!
  • joel

    joel

    | Profile |
    Good one! Can't wait :)
  • mharst

    mharst

    | Profile |
    Great development Yootheme!
  • damir

    damir

    | Profile |
    Great Job! What about Widgetkit will it be responsive as well?
  • doogledesign

    doogledesign

    | Profile |
    This is the future, and the future is YooTheme! Congrats on this update! Very much looking forward to your responsive templates!!
  • maverpix

    maverpix

    | Profile |
    Been looking forward to seeing the solution from one of the finest theme providers out there,can't wait to try out your first responsive release ;)
  • ralharithi

    ralharithi

    | Profile |
    Congratulations on this great achievement that reinstates another milestone in your path of superb vision. You continue to prove that Yootheme is well thought of brand.

    I wish you all the best, and I look forward to get more in-depth news of how is this going to relate to the rest of your wonderful portfolio of products.
  • timothy.hill

    timothy.hill

    | Profile |
    Gooooooooaaaaaaaaaaaalllllllllll !
  • brandonjmurray

    brandonjmurray

    | Profile |
    yep, just peed my pants in excitement.
  • swiftmedia

    swiftmedia

    | Profile |
    i was just looking for some place to say, "YooGuys Are Awesome!!!!"

    your products are sweet!!! easy to work with...solid code & design!!!

    and your support and documentation rock!!!

    seriously, i use Yoo as the golden standard of web development

    keep up the great work!!!
  • arenillas

    arenillas

    | Profile |
    the all thems are updated to the Warp 6.2??

    yoo cloud example...
  • kris.olszewski

    kris.olszewski

    | Profile |
    Amazing! Renewed my membership the moment I read the post title :)
  • joel

    joel

    | Profile |
    Would there be any issues/concerns when upgrading a template from warp 6.1 to 6.2 (responsive)?
  • tops

    tops

    | Profile |
    It would be important to have old themes also updated, at least the most recent ones (themes from 2012 or warp 6 only themes).
    When you buy a subscription is to benefit from these type of changes and not to change your site(s) each time a new theme is launched.
    The current mobile theme is not good and the responsive design is more the way to go ...
    So, I think Yootheme should make it available to previous themes and honor your loyal subscribers.
    • sascha

      sascha

      | Profile |
      It takes a lot CSS work to make an older theme responsive. New bugs could be introduced, it needs a lot of testing, etc.

      To keep it short: We never do heavily CSS work to themes which are already released. So only new releases will feature responsive design.
  • aksel

    aksel

    | Profile |
    Awesome!

    Been waiting for this for some time now....this is a great step forward Yootheme! :D
  • studiograficod2

    studiograficod2

    | Profile |
    are you going to release also at least a single application/template for zoo responsive enabled?
  • solox

    solox

    | Profile |
    i have the same Q.. when would Zoo become responsive?
  • solox

    solox

    | Profile |
    continuing the greedy streak, when would widgetkit become responsive? :-)
    • sascha

      sascha

      | Profile |
      Soon :-)
      • joel.shapcott

        joel.shapcott

        | Profile |
        omg thankYoo. I have been ripping my hair out trying to find out where the fixed width is injected from.
  • rcoomes

    rcoomes

    | Profile |
    Will Warp 6.2 be based on Twitter BootStrap as Joomla 3.0 will be using and this and it seems that core developers want to standardize on using Twitter BootStrap?

    What are your plans for this?
    • sascha

      sascha

      | Profile |
      Currently we see no need for us to use Bootstrap. Neither in the frontend nor the backend....
  • sascha

    sascha

    | Profile |
    We posted a new article about the responsive JavaScript of the Warp 6.2 http://www.yootheme.com/blog/2012/06/18/warp-gets-responsive-2
  • viktor.horst

    viktor.horst

    | Profile |
    Great that the new version of Warp is responsive! Looking forward to it!
  • ivo.schmid

    ivo.schmid

    | Profile |
    Truly good news!
  • chris.johnson.24

    chris.johnson.24

    | Profile |
    Can't wait to see this... When in July will it be released? V. Exciting
  • cord

    cord

    | Profile |
    Hello, is there a warp master theme with ie7 support still available? We have too many IE7 users to be able to ignore them.

    Thanks,
    Nick
  • mike.biolsi

    mike.biolsi

    | Profile |
    seriously, this and a lot of other stuff needs to make it's way to the documentation page so we can find it easier!

    How do I hide a module? same code in the module suffix? Where is the page that tells me how to USE your responsive?
  • david.elliott

    david.elliott

    | Profile |
    Hello, I had been used Wp-Subway Themes my sidebar A and sidebar B looks fine on my computer but when I open It on my ipad and mobile there is something wrong with my sidebar B it goes down to the left side. How can I figure it out?
  • neneng

    neneng

    | Profile |
    how do you change it back from percent to pixels? My customer do now want the layout to jump around when screen is resized.

Leave a comment

Please login to leave a comment.