User:Waldyrious/Skins

Main goals

Distinguish page views from page actions (separate into menus)
Responsive

Interesting designs

Documentation

Overview of existing documentation
- ~~Collect all skin-related links from mediawiki.org, meta, en.wikipedia, the source code, etc.~~
- ~~Summarize each link~~
- Complete the first draft of the proposed manual in the "proposed overview" section
- Request review of the overview, for correctness. Potential people to contact for this:
  - Matma Rex restored one of the old skins (Cologne Blue) to make it conform to the modern system based on templates
  - Ryan Lane has fixed up the strapping-mediawiki skin
  - Daniel Friesen has written quite a bit about the skin system
  - Trevor Parscal was, I believe, one of the main people involved in creating Vector
  - Krinkle seems to be quite knowledgeable about how skins work, judging from some of his comments to Gerrit patches I've seen
  - Jack Phoenix (see here)
  - Liangent (suggested by Sumana)
phab:T59801: Improving the skinning experience for developers (improve documentation etc.)
Tech Talk: The making of a MediaWiki skin (YouTube video)
A History of Wiki Skins
Separating skins from core MediaWiki
- 2014 Google Summer of Code project by Matma Rex.
- Made core skins (vector, monobook, etc.) work the same way as the other skins

Links

My CSS tweaks: notes at meta:User talk:Waldir/global.css, code at meta:User:Waldir/vector.css
Wouldn't it be great if mediawiki was like the CSS Zen Garden? Then skins would be only a CSS file. Why isn't this possible? Maybe when there's support for recent CSS features for layout manipulation, such as flex, grid (note: grid is still a long way to come), move-to (see also), order (browser compat)?
New skins system
Requests for comment/Redo skin framework
Bug 27292 - Skinning system improvement (tracking)
Some issues with tweaking the menus: https://gist.github.com/waldyrious/b23f3f55ee2caf04bdf0
- Note that to support custom sub-headings in the sidebar, the loop (as implemented by the Example skin) needs to be used.
Wikiwand
Possibly useful for reordering/moving around sidebar contents: Manual:Hooks/SidebarBeforeOutput
https://skins.wmcloud.org
- Has a mode for exploring existing skins, and another mode to create new skins with a live preview for each change done in HTML/CSS/JS
Manual:How to make a MediaWiki skin
https://pixel.wmcloud.org — has visual regression tests for skins. The collection of configurations (example list for desktop) could be used as a test harness for new skins (i.e. to check how they behave in different situations)
Debugging: There used to be a ?debug=true URL parameter to load resources without minification. Nowadays there are two modes: debug=1 (legacy mode, which debug=true currently defaults to) and debug=2.
- See ResourceLoader/Architecture#Debug mode for more info.
- It seems this still doesn't allow identifying the source of a stylesheet. See discussions:
  - RecentChanges content flows outside frame in Timeless skin in (max-width: 850px)
  - Thread:Project talk:Support desk/Load.php CSS
- Indeed, I tried (and failed) to use this to debug an issue with an {{Ambox }}, where tables would overflow on narrow screens (<=850px) due to width:100% and margin:0 10%.
  - 5cc9d503ff
  - f8c6bd1811
  - resources/screen-mobile.less#268
  - Special:Diff/5862541 — workaround for the issue

Layout (detailed/editor mode)

Desktop

Logo Tagline Site nav (links) ~~(Home)~~^[1] Recent changes Special pages^[2] Help Site actions (buttons) Search Create page Upload file^[3] ~~Random page~~^[4]	Page title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet cursus nulla, tempus suscipit lorem vehicula efficitur. Proin ac convallis velit, sed commodo lorem. Sed at nulla id dolor tincidunt consectetur sollicitudin euismod nulla. Quisque faucibus accumsan purus, id pulvinar nisl auctor eu. Pellentesque turpis felis, bibendum ut est sit amet, ornare ultrices nisi. Duis nibh metus, tristique non egestas sed, congue vitae diam. Curabitur quam lectus, malesuada in sagittis eu, volutpat sed velit. Praesent risus nulla, dictum eget leo eget, ultrices vehicula justo. Quisque iaculis nisi nec felis euismod, eu vestibulum urna hendrerit. Proin odio diam, rhoncus at egestas ac, accumsan quis neque. Phasellus varius vel nunc eget pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet cursus nulla, tempus suscipit lorem vehicula efficitur. Proin ac convallis velit, sed commodo lorem. Sed at nulla id dolor tincidunt consectetur sollicitudin euismod nulla. Quisque faucibus accumsan purus, id pulvinar nisl auctor eu. Pellentesque turpis felis, bibendum ut est sit amet, ornare ultrices nisi. Duis nibh metus, tristique non egestas sed, congue vitae diam. Curabitur quam lectus, malesuada in sagittis eu, volutpat sed velit. Praesent risus nulla, dictum eget leo eget, ultrices vehicula justo. Quisque iaculis nisi nec felis euismod, eu vestibulum urna hendrerit. Proin odio diam, rhoncus at egestas ac, accumsan quis neque. Phasellus varius vel nunc eget pharetra. Footer	Personal tools (links) (User)^[5] Language ~~Discussion~~^[6] ~~Preferences~~^[7] ~~Watchlist~~^[8] ~~Contributions~~^[9] Register/Login/Logout
		Page views (Page) (tab) Discussion (tab) History What links here^[10] ~~Related changes~~^[4] Page information Printable version Permalink Other languages Page actions (buttons) Edit Rename Delete (un)Protect (un)Watch
Notes ↑ Just clicking the logo should be enough (by default; of course, the nav sidebar is customizable anyway) ↑ "site tools" ↑ or maybe a link "insert media" in the page menu? of course, the upload+insertion functionality should be automated or at least guided (like then you log in you get a link to the page you were previously) ↑ ^4.0 ^4.1 probably should be removed by default ↑ dropdown menu, if dynamic; link to user profile, if static. The user page would contain an automatic header in the user page (like preview notices, etc.) with links to preferences, watchlist, talk, and other stuff only the current user has access to. ↑ only a new messages/notifications icon; dropdown menu, if dynamic; link to Special:Notifications, if static ↑ accessible through the user drop-down menu, if dynamic, or user page banner, if static ↑ should be just a filter in Recent Changes ↑ accessible in the page views menu of the user page, which would also include logs, user rights, etc ↑ ideally should contain incoming links and outgoing links, as well as templates and media used on the page

Mobile

Logo Tagline Search
Page title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet cursus nulla, tempus suscipit lorem vehicula efficitur. Proin ac convallis velit, sed commodo lorem. Sed at nulla id dolor tincidunt consectetur sollicitudin euismod nulla. Quisque faucibus accumsan purus, id pulvinar nisl auctor eu. Pellentesque turpis felis, bibendum ut est sit amet, ornare ultrices nisi. Duis nibh metus, tristique non egestas sed, congue vitae diam. Curabitur quam lectus, malesuada in sagittis eu, volutpat sed velit.
Site nav (links) ~~(Home)~~ Recent changes Special pages Help Site actions (buttons) Search Create page Upload file Random page
Personal tools (links) (User) Language Discussion Preferences Watchlist Contributions Register/Login/Logout (button?)
Page views (links) (Page) Discussion History What links here Related changes Page information Printable version Permalink Other languages Page actions (buttons) Edit Rename Delete (un)Protect (un)Watch
Footer

Layout (simplified/reader mode)

Logo Tagline	Search box	Login
	Page title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet cursus nulla, tempus suscipit lorem vehicula efficitur. Proin ac convallis velit, sed commodo lorem. Sed at nulla id dolor tincidunt consectetur sollicitudin euismod nulla. Quisque faucibus accumsan purus, id pulvinar nisl auctor eu. Pellentesque turpis felis, bibendum ut est sit amet, ornare ultrices nisi. Duis nibh metus, tristique non egestas sed, congue vitae diam. Curabitur quam lectus, malesuada in sagittis eu, volutpat sed velit. Praesent risus nulla, dictum eget leo eget, ultrices vehicula justo. Quisque iaculis nisi nec felis euismod, eu vestibulum urna hendrerit. Proin odio diam, rhoncus at egestas ac, accumsan quis neque. Phasellus varius vel nunc eget pharetra.
	Footer

[1] Just clicking the logo should be enough (by default; of course, the nav sidebar is customizable anyway)

[2] "site tools"

[3] r maybe a link "insert media" in the page menu? of course, the upload+insertion functionality should be automated or at least guided (like then you log in you get a link to the page you were previously)

[rmv-4] 4.0 ^4.1 probably should be removed by default

[5] ropdown menu, if dynamic; link to user profile, if static. The user page would contain an automatic header in the user page (like preview notices, etc.) with links to preferences, watchlist, talk, and other stuff only the current user has access to.

[6] y a new messages/notifications icon; dropdown menu, if dynamic; link to Special:Notifications, if static

[7] ssible through the user drop-down menu, if dynamic, or user page banner, if static

[8] should be just a filter in Recent Changes

[9] ssible in the page views menu of the user page, which would also include logs, user rights, etc

[10] y should contain incoming links and outgoing links, as well as templates and media used on the page

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]