Wikipedia:New CSS framework
Goal[edit]
To design a common CSS framework on which all templates can build their appearance.
Rationale[edit]
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[edit]
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[edit]
Thumb images[edit]
This should be changed in core.
Infobox[edit]
| 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 | |