Requests for comment/Grid system

This document proposes to include a Grid system in MediaWiki.

What is a grid system and why is it needed?
A grid 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.

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.

What kind of grid system?
Optional, Nestable, Proportional, Responsive and Semantic

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 clsses 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.