Layout and structure

A series of articles to help you create the perfect structure for your Open Web App.

The building blocks of responsive design

Learn the basics of responsive design, an essential topic for modern app layout.

Media queries

One of the most important technologies in responsive app design is the media query. Media queries allow your app to respond to screen size, resolution, device orientation, and many other environment variables using declarative CSS rules or JavaScript listeners. Also see Using media queries and MediaQueryList.

Mobile first

Often when creating responsive application layouts, it makes sense to create the mobile layout as the default, and build wider layouts on top.

Flexible boxes

CSS flexible boxes let you configure your app's user interface to automatically adjust the positioning and sizes of elements based on the size and orientation of the display.

Note: If you are developing Firefox OS apps, be aware that multi-line flexboxes are supported in Firefox OS 1.3+; for older versions you might have to adopt a simpler layout or provide a fallback.