Page MenuHomePhabricator

Create design pattern library
Closed, ResolvedPublic

Description

This may be a duplicate bug, but it seems that what both the design team and Jon R. seem to want is a design pattern library. This would include high-level categorization of user interface elements (buttons, text inputs, tabs, etc.) and each example in a particular section would include sample PHP code, sample HTML code, and sample CSS (or LESS).


Version: wmf-deployment
Severity: enhancement

Details

Reference
bz56705

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 2:15 AM
bzimport set Reference to bz56705.

swalling wrote:

(In reply to comment #0)

This may be a duplicate bug, but it seems that what both the design team and
Jon R. seem to want is a design pattern library. This would include
high-level
categorization of user interface elements (buttons, text inputs, tabs, etc.)
and each example in a particular section would include sample PHP code,
sample
HTML code, and sample CSS (or LESS).

Yep, that is basically the high level ask. This could perhaps be a tracking bug.

There are already some semblances of this floating around, in mediawiki.ui, jquery.ui and other places. So it's mostly a lot of standardization work, not just creating new stuff to replace a vacuum. Hence [[mw:UX standardization]]

Marking this as "ASSIGNED" as it's not great to say "Assigned to: Nobody - You can work on this!" when it's under development.

Update: we use KSS to generate a living style guide from MediaWiki's CSS and LESS files; see http://tools.wmflabs.org/styleguide/

We also use jsduck to generate documentation from MediaWiki's JavaScript that can include live example code; see e.g.
https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.Message and click 'Live Preview'

We also have bits of HTML in docs/uidesign that are accessible in a simple MW configuration, e.g. https://wikitech.wikimedia.org/w/docs/uidesign/table-layout.html

All these have the limitation that the HTML isn't part of a MediaWiki page, so you can't see how it changes with skin, language, or Beta Features.

> Someone could develop MediaWiki special page(s) that frame their HTML

For PHP code we have

These do support skin/language/Beta Features,

> Someone could package the samples relevant to design with a TOC.

https://doc.wikimedia.org could become a MediaWiki instance with these features pages enabled.

This is partly completed as the Living Style Guide (https://git.wikimedia.org/tree/mediawiki%2Fcore.git/10c122ac5440782bda87a65a75db7efe7b28a415/docs%2Fkss).

The next step is to get it uploaded to doc.wikimedia.org automatically (bug 64221).

I'll make this bug a tracking bug. I'm not sure if there's anything else we want to get done before marking this fixed (e.g. maybe use jsduck Live Preview for any JS controls that are covered by the style guide)

Jaredzimmerman-WMF renamed this task from Create design pattern library (tracking) to Create design pattern library.Nov 24 2014, 9:58 PM
Jaredzimmerman-WMF set Security to None.

We now have http://livingstyleguide.wmflabs.org (yes, a second living style guide) which includes discussion of design elements along with generated demos of OOjs UI elements, so declaring victory on this.