Requests for comment/Grid system

This document proposes to include a Grid system in MediaWiki to simplify the creation of user interfaces and make them ready for multiple screen sizes.

What is a grid system and why is it needed?
A grid system defines a set of guides that help in the layout of visual elements. In this way the available space is divided in several columns and rows where content can be placed. For example, if we use a 12-column grid we can define a sidebar to occupy two columns.

Grids provide consistency in the layout. They make it easy to align elements to achieve cleaner designs, and avoid custom layout code on a per-element basis (which becomes hard to adjust when new elements are added or the layout needs to be modified).

The high diversity of screen sizes (from small mobile devices to big TV screens) makes it hard to make an appropriate use of the available space for each screen size. Responsive design techniques use a grid system to indicate how the layout changes from screen to screen. For example, a 2-column sidebar menu on desktop can become a full-width menu on a mobile device.

Adding a grid system is thus beneficial for the MediaWiki context since:
 * It will provide consistency across different extensions.
 * It will allow to optimise the user experience for different screen sizes.

What kind of grid system?
There are many kinds of grids with different properties. Considering the MediaWiki context, some interesting properties for a grid are: Optional, Nestable, Proportional, Responsive and Semantic.

These ideas are similar to what is proposed in this article.

Optional
Using a grid is great but you should not be forced to do so. Developers should be able to decide whether to use the grid system for any part of their user interfaces, or not to use it at all.

CSS classes should be properly scoped to avoid affecting/breaking the layout of existing non-grid-based components.

Proportional
Based on percentages, not on a fixed number of columns.

Responsive
Responsive based on abstract sizes.

Semantic
Grid systems are usually supported by adding classes to HTML elements. Adding layout-related information to the markup can be considered a problem. Using a CSS preprocessor as proposed in LESS RFC will allow to use semantic rich classes instead.