Architecture Summit 2014/UI styling

RFCs

Grid system (talk)
Scoping site CSS (talk)
Allow styling in templates (talk)
Vertical writing support (talk) -- not sure who will present this, main RFC author is not present at summit.

Overview

Grid system

Currently, layout is done on a per-element basis, which is problematic when trying to achieve consistency across different screen sizes and projects. A grid system can provide a set of predefined styling classes that help to define layouts in a simple and consistent way. There are two different aspects to discuss: which are the concepts that will be useful, and how to implement them.

Scoping site CSS

Currently, custom CSS rules can be added globally by editing MediaWiki:Common.css (desktop) or MediaWiki:Mobile.css (mobile). This is used by many projects to add CSS rules commonly used by their communities for custom formatting within the articles. Those CSS rules might conflict with other rules defined by skins breaking the layout and also lead to UI inconsistencies between different language projects. They also make designer's work and the much needed redesign of the desktop web site more difficult because the custom CSS rules will have to be checked after every design change.

Big Questions

Grid system

Does it make sense to provide support on LESS for predefined breakpoints (screen sizes) and common layout rules?
Do the concepts proposed in this grid system work for us?
What kind of grid system implementation we need for those concepts?

Stylesheets in templates

How does a template wiki page get associated with a stylesheet? <-- main focus of conversation!
Could associating wiki pages with templates help with scoping site css?

Scoping site CSS

How to limit the possibility of breaking site UI CSS without taking too much of flexibility away from the users?
What could be potential alternatives to Common.css?
What are the examples of valid uses of Common.css?

Vertical writing support

What would be the best way to "rotate" Javascript to work in vertical writing modes?

Agenda

Etherpad: https://etherpad.wikimedia.org/p/ui_styling

3 minute lightning talk Grid system available as Youtube presentation by Pau,length 5:43, for link see https://etherpad.wikimedia.org/p/ui_styling
20 minute discussion
3 minute lightning talk Scoping site CSS
20 minute discussion
3 minute lightning talk Allow styling in templates
20 minute discussion