Architecture Summit 2014/UI styling




Grid system[edit]

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[edit]

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[edit]

Grid system[edit]

  • 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[edit]

  • 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[edit]

  • 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[edit]

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



  • 3 minute lightning talk Grid system available as Youtube presentation by Pau,length 5:43, for link see
  • 20 minute discussion
  • 3 minute lightning talk Scoping site CSS
  • 20 minute discussion
  • 3 minute lightning talk Allow styling in templates
  • 20 minute discussion