FEATURE: Dynamic Media Queries and Responsiveness


#1

Hi All!

I recently added support for responsive layouts using media queries based on the actual size of OS.js windows. Now you can make your layouts respond to the size of the windows instead of the size of your browser.

Usage

Per-application rules

You can add media queries per-application by simply adding it to the constructor of your Window:

Application JavaScript

    Window.apply(this, ['ApplicationSomethingWindow', {
      icon: metadata.icon,
      title: metadata.name.
      width: 400,
      height: 300,
       media_queries: {
        myattr: function(w, h, ref) {
          return w <= 500;
        }
     }
    }, app, scheme]);

Application CSS

/* Default rules */
.ApplicationSomethingWindow[data-media="mobile"] application-window-content {
  background: yellow;
}
.ApplicationSomethingWindow[data-media="tablet"] application-window-content {
  background: orange;
}
.ApplicationSomethingWindow[data-media=""] application-window-content {
  background: blue;
}

/* Custom rule: 500px or below */
.ApplicationSomethingWindow[data-media="myattr"] application-window-content {
  background: red;
}

Global rules

You can also add/modify global rules. See src/conf/114-windowmanager.json.

These rules are checked with val <= window_width.

Base Config

{
  "client" : {
    "WM" : {
      "args": {
        "defaults": {
          "mediaQueries": {
            "mobile": 320,
            "tablet": 800
          }
        }
      }
    }
  }
}

Run grunt config if you change these settings1

Base CSS

application-window[data-media="mobile"] application-window-content {
  background: yellow;
}
application-window[data-media="tablet"] application-window-content {
  background: orange;
}
application-window[data-media=""] application-window-content {
  background: blue;
}

#2