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.