Change Details

MinvervaNeue has been using for historic reasons[1] a fork of Erik Meyer's reset. This has become seen as disadvantegous for a few reasons in contrast to [[ https://github.com/necolas/normalize.css | normalize.css ]]: # normalize.css preserves useful defaults rather than "unstyling" everything. # It corrects some common bugs that are out of scope for reset.css. # It doesn't clutter your dev tools. # It is more modular and can be broken down to the elements MinveraNeue wants to support On top of normalize, we could also add some opinionated styles inspired by collections like [[ https://github.com/csstools/sanitize.css/blob/master/sanitize.css | sanitize.css ]] and clearly mark them so. [1]: [[ https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/26557/ | Invented first ]] to tame T42751 6 years ago. = Proposed change Subtasks (and patches by @Volker_E; all of which are small) provide the split of the monster selector in more modular code. In a feature branch: [x] Patches which split up code only [x] Patches which add additional properties, inspired by normalize.css Reading web will [] review and merge these all together and [] QA the changes in one go using this task = Acceptance criteria [] Unnecessary reset rules are removed (T217631) including for headings (T217626) and audio/video (T217629). Note video tag is not currently used in mobile site so risk here is negligible. [] The `normalize` feature has been added to the ResourceLoaderSkinModule. [] Table styles have been moved to a separate file tables.less and ordered by specificity (tracked in subtask T217620) [] Image styles are moved to images.less. Border reset is moved to links.less (tracked in subtask T217630) [] Form styles are moved out of the reset to more logical places (T217622) = QA steps We are looking for visual regressions and should test on Firefox, iOS and Chrome. We'll look at a variety of articles and compare production versions vs the versions on reading web staging. The suggested articles are: - https://en.m.wikipedia.org/wiki/Barack%20Obama - https://en.m.wikipedia.org/wiki/Qatar - https://en.m.wikipedia.org/wiki/Donald%20Trump - https://en.m.wikipedia.org/wiki/Pacific_tree_frog - https://he.wikipedia.org/wiki/%D7%99%D7%A9%D7%A8%D7%90%D7%9C (you'll need a developer to update staging - Hebrew Israel page) - https://en.m.wikipedia.org/wiki/Venezuela (audio) Pay particular attention to the following: [] Tables and infoboxes look the same no visual regressions [] Images look the same, no regressions. [] Any font sizes that are different [] Any margins that are different [] Headings look same [] Thumbnails and audios look the same In addition to this check for visual regression on the forms on the following special pages: - Special:Watchlist - Special:Userlogin - Special:RecentChanges - Special:Contributions - Special:Search and overlays: - talk #/talk/new - editor #/editor/0 - search #/search = Sign off steps [] Make sure all subtasks are merged.

MinvervaNeue has been using for historic reasons[1] a fork of Erik Meyer's reset. This has become seen as disadvantegous for a few reasons in contrast to [[ https://github.com/necolas/normalize.css | normalize.css ]]: # normalize.css preserves useful defaults rather than "unstyling" everything. # It corrects some common bugs that are out of scope for reset.css. # It doesn't clutter your dev tools. # It is more modular and can be broken down to the elements MinveraNeue wants to support On top of normalize, we could also add some opinionated styles inspired by collections like [[ https://github.com/csstools/sanitize.css/blob/master/sanitize.css | sanitize.css ]] and clearly mark them so. [1]: [[ https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/26557/ | Invented first ]] to tame T42751 6 years ago. = Proposed change Subtasks (and patches by @Volker_E; all of which are small) provide the split of the monster selector in more modular code. In a feature branch: [x] Patches which split up code only [x] Patches which add additional properties, inspired by normalize.css = Acceptance criteria [x] Table styles have been moved to a separate file tables.less and ordered by specificity (tracked in subtask T217620) [x] Image styles are moved to images.less. Border reset is moved to links.less (tracked in subtask T217630) [x] Form styles are moved out of the reset to more logical places (T217622) [] Unnecessary reset rules are removed (T217631) including for headings (T217626) and audio/video (T217629). Note video tag is not currently used in mobile site so risk here is negligible. [] The `normalize` feature should be added to Minerva's ResourceLoaderSkinModule definition. = QA steps We are looking for visual regressions and should test on Firefox, iOS and Chrome. We'll look at a variety of articles and compare production versions vs the versions on reading web staging. The suggested articles are: - https://en.m.wikipedia.org/wiki/Barack%20Obama - https://en.m.wikipedia.org/wiki/Qatar - https://en.m.wikipedia.org/wiki/Donald%20Trump - https://en.m.wikipedia.org/wiki/Pacific_tree_frog - https://he.wikipedia.org/wiki/%D7%99%D7%A9%D7%A8%D7%90%D7%9C (you'll need a developer to update staging - Hebrew Israel page) - https://en.m.wikipedia.org/wiki/Venezuela (audio) Pay particular attention to the following: [] Tables and infoboxes look the same no visual regressions [] Images look the same, no regressions. [] Any font sizes that are different [] Any margins that are different [] Headings look same [] Thumbnails and audios look the same In addition to this check for visual regression on the forms on the following special pages: - Special:Watchlist - Special:Userlogin - Special:RecentChanges - Special:Contributions - Special:Search and overlays: - talk #/talk/new - editor #/editor/0 - search #/search = Sign off steps [] Make sure all subtasks are merged.

MinvervaNeue has been using for historic reasons[1] a fork of Erik Meyer's reset. This has become seen as disadvantegous for a few reasons in contrast to [[ https://github.com/necolas/normalize.css | normalize.css ]]: # normalize.css preserves useful defaults rather than "unstyling" everything. # It corrects some common bugs that are out of scope for reset.css. # It doesn't clutter your dev tools. # It is more modular and can be broken down to the elements MinveraNeue wants to support On top of normalize, we could also add some opinionated styles inspired by collections like [[ https://github.com/csstools/sanitize.css/blob/master/sanitize.css | sanitize.css ]] and clearly mark them so. [1]: [[ https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/26557/ | Invented first ]] to tame T42751 6 years ago. = Proposed change Subtasks (and patches by @Volker_E; all of which are small) provide the split of the monster selector in more modular code. In a feature branch: [x] Patches which split up code only [x] Patches which add additional properties, inspired by normalize.css Reading web will [] review and merge these all together and [] QA the changes in one go using this task = Acceptance criteria [] Unnecessary reset rules are removed (T217631) including for headings (T217626) and audio/video (T217629). Note video tag is not currently used in mobile site so risk here is negligible.x] Table styles have been moved to a separate file tables.less and ordered by specificity (tracked in subtask T217620) [] The `normalize` feature has been addx] Image styles are moved to images.less. Border reset is moved to the ResourceLoaderSkinModule.links.less (tracked in subtask T217630) [] Tablex] Form styles have beenare moved to a separate file tables.less and ordered by specificity (tracked in subtask out of the reset to more logical places (T2176202) [] Image styUnnecessary reset rules are removed to images.less(T217631) including for headings (T217626) and audio/video (T217629). Border resetNote video tag is moved to links.less (tracked in subtask T217630)not currently used in mobile site so risk here is negligible. [] Form styles are moved out of the reset to more logical places (T217622)The `normalize` feature should be added to Minerva's ResourceLoaderSkinModule definition. = QA steps We are looking for visual regressions and should test on Firefox, iOS and Chrome. We'll look at a variety of articles and compare production versions vs the versions on reading web staging. The suggested articles are: - https://en.m.wikipedia.org/wiki/Barack%20Obama - https://en.m.wikipedia.org/wiki/Qatar - https://en.m.wikipedia.org/wiki/Donald%20Trump - https://en.m.wikipedia.org/wiki/Pacific_tree_frog - https://he.wikipedia.org/wiki/%D7%99%D7%A9%D7%A8%D7%90%D7%9C (you'll need a developer to update staging - Hebrew Israel page) - https://en.m.wikipedia.org/wiki/Venezuela (audio) Pay particular attention to the following: [] Tables and infoboxes look the same no visual regressions [] Images look the same, no regressions. [] Any font sizes that are different [] Any margins that are different [] Headings look same [] Thumbnails and audios look the same In addition to this check for visual regression on the forms on the following special pages: - Special:Watchlist - Special:Userlogin - Special:RecentChanges - Special:Contributions - Special:Search and overlays: - talk #/talk/new - editor #/editor/0 - search #/search = Sign off steps [] Make sure all subtasks are merged.