User:JDrewniak (WMF)/notes/Desktop refresh hackweek findings

From mediawiki.org

Achieving a “desktop refresh” with just a user style[edit]

Goal: Investigate the vector HTML and CSS structure to determine if a new design can be implemented with CSS alone.

Method: Create a Vector user-style which aims to mimic the preliminary design ideas of the desktop refresh. A user-style can be enabled by any logged-in user on wikipedia and doesn’t affect the HTML structure of the skin.

To achieve maximum flexibility with CSS, the CSS Grid layout module was used. This spec is new and has limited browser support, and is therefore not suitable for production usage. It does however, provide flexibility in positioning and rearranging the page layout without touching the underlying HTML structure.


Result: https://en.wikipedia.org/wiki/User:Jandre3000/vector.css

Findings: Vector has a content-focused and “layout agnostic” HTML structure, but changing the design would still require substantial changes to the underlaying HTML.

Vector prioritizes the page content above all else (literally, the page content is rendered as the first thing inside the opening <body>) and all navigation and “chrome” is placed below the content.

Navigation is positioned to the side and top of the content with CSS. Items such as the talk/history links look like they’re grouped with the content but are actually part of the header. Considerable CSS gymnastics are at play to achieve these positioning effects.

So despite Vector’s layout-agnostic DOM structure, Vector does contain CSS classes that imply a layout, such as #left-navigation and #right-navigation and #mw-head and rearranging these elements still requires substantial changes to the HTML.

Applying OOUI styles to generic form elements[edit]

In a new skin, one might want to style all basic HTML elements so that they conform to the same design. OOUI is an existing library that provides styles for many form elements such as inputs and buttons. Can these styles be applied to element-level selectors, such as button without having to use verbose OOUI selectors?

Goal: Determine if the OOUI styles can be repurposed and applied to “raw” HTML elements in order to provide “baseline” styles for a new skin.

Method: Create a Less file that imports the OOUI styles and applies them to base element selectors. Three features of Less are used to achieve this:

  1. The fact that Less can treat any class selector as a mixin.
  2. Less can treat any CSS file as a Less file.
  3. The Less import feature has (reference) option that only imports selectors or mixin that are used in the importing file.

These features allow us to Less to import a compiled CSS and treat each class selector as a mixin, without the performance penalty of importing the entire CSS file.

e.g.

@import (reference, less) "~oojs-ui/dist/oojs-ui-wikimediaui.css";
@import (reference, less) "~oojs-ui/dist/oojs-ui-core-wikimediaui.css";

/**
 * Default button
 */
button {
	.oo-ui-buttonElement;
	.oo-ui-buttonElement > .oo-ui-buttonElement-button;
	.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button;
	.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button;
	.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button;
}

Result: https://clever-lalande-8d13d8.netlify.com

https://github.com/j4n-co/wrapping-ooui-for-default-elements/blob/master/stylez.less

Retrieved from "https://www.mediawiki.org/w/index.php?title=User:JDrewniak_(WMF)/notes/Desktop_refresh_hackweek_findings&oldid=3411226"