Wikipedia:New CSS framework

Goal

To design a common CSS framework on which all templates can build their appearance.

Rationale

Common.css is filled with CSS that is applied to a large number of templates and other user interface elements. The code for templates takes roughly up more then 60% of all the CSS. This is largely due to each template havigng a dedicated chunk of CSS that only applies to that particular template. Many templates share a common base, which results in a lot of duplicated code. This results in longer loadtimes, inconsistent design and poor manageability.

To address these issues, a rework of the CSS codebase is in order, focusing on small building blocks that can be shared between many templates. These building blocks are easy to maintain and provide a consistent design between templates, resulting in a less cluttered overall look. Instead of targeting specific templates, these CSS 'modules' target various elements that make up these template, such as borders, headers, cells and floating elements. Some template-specific code must remain, especially where (inline) styling depends on (dynamic) content of these templates.

The design standpoint is (initially) to provide a consistent overall look and to reduce/eliminate the number of lines and borders within a template, to a point where individual design elements, such as padding within, or spacing between cells should no longer burden template designers. It will also alleviate many issues now inherent in the current design, such as nesting templates.

Method

Converting all templates at once is impossible, as the framework is incompatible. But that does allow us to 'start from scratch'. During development, the new CSS framework is initially written in personal CSS, then moved to a Development gadget, which anyone can enable to test the code. Templates will be converted in their respective sandboxes, calling upon the new CSS from the gadget. Once the CSS framework is finished, it can be moved to Common.css.

Mockups

Thumb images

The Senate side of the United States Capitol in Washington, D.C.

This should be changed in core.

Infobox

Test Infobox

Above text
Subheader above image
Second subheader
Caption displayed below example.png
Header defined alone
Data defined alone
All three defined (header, label, data, all with same number)
Label and data defined (label)	Label and data defined (data)
Below text