Page MenuHomePhabricator

Support a responsive grid system
Open, LowestPublic

Subscribers
Tokens
"Like" token, awarded by Liuxinyu970226."Orange Medal" token, awarded by Krinkle."Like" token, awarded by Moushira."Like" token, awarded by cicalese."Like" token, awarded by RHeigl.
Assigned To
None
Authored By
Pginer-WMF, Feb 25 2015

Description

In order to consistently accommodate multiple screen sizes we need a responsive grid system.

We had an RFC and an initial implementation that needs some polishing. Additional work may be needed to make sure it works well with OOjs-UI components.

Event Timeline

Pginer-WMF raised the priority of this task from to Needs Triage.
Pginer-WMF updated the task description. (Show Details)
Pginer-WMF added a project: UI-Standardization.
Pginer-WMF added a subscriber: Pginer-WMF.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 25 2015, 9:19 AM
Qgil added a subscriber: Qgil.
Qgil added a comment.Jul 3 2015, 10:26 AM

Please confirm and promote this activity by assigning it to its owner, listing it or scheduling it at the Hackathon wiki page and by placing it in the right column at #Wikimania-Hackathon-2015. Thank you!

Qgil added a comment.Jul 7 2015, 1:51 PM

@Pginer-WMF, are you planning to work on this task at Wikimania?

@Qgil Yes, but it not a big task to organise a scheduled session around it. I'll also check for projects that may need design work on that board.

Qgil assigned this task to Pginer-WMF.Jul 7 2015, 7:56 PM

What is the status of this task, now that Wikimania 2015 is over? Did this hacking project take place and was successfully finished? If yes: Please provide an update and potentially summarize findings / provide a link to anything relevant (and if the task is not completely finished yet, please move the project to the "Work continues after Mexico City" column on the #Wikimania-Hackathon-2015 workboard). If no: Please edit this task by removing the #Wikimania-Hackathon-2015 project from this task. Thanks for your help and keeping this task updated!

Finally, most of the time was spent on T105923 instead.

Pginer-WMF set Security to None.
Restricted Application added a subscriber: StudiesWorld. · View Herald TranscriptNov 19 2015, 10:27 PM
Jdforrester-WMF triaged this task as Lowest priority.Mar 22 2016, 6:27 PM
Pginer-WMF removed Pginer-WMF as the assignee of this task.Dec 15 2016, 3:49 PM
bd808 added a subscriber: bd808.Dec 29 2016, 1:03 AM

I've only glanced at rMW87381cbaa170: mediawiki.ui: Introduce grid system but it looks to me like it is mostly the mixins that would be handy for doing layout on a special page following the semantic model from the RfC.

Can this existing grid be used for content layout in articles? Having seen the nasty hacks that are used for https://en.wikipedia.org/wiki/Main_Page and https://en.wikipedia.org/wiki/Wikipedia:Wikipedia_Signpost it really seems like it would be nicer to provide a means to use a Bootstrap-like grid for multi-column responsive article layouts.

Qgil removed a subscriber: Qgil.Jan 3 2017, 10:38 PM
cicalese added a subscriber: cicalese.
RHeigl added a subscriber: RHeigl.

Added the MediaWiki-Stakeholders-Group tag, because this meets a requirement of the MediaWiki Usage Report 2015: skinning

This proposal is selected for the Developer-Wishlist voting round and will be added to a MediaWiki page very soon. To the subscribers, or proposer of this task: please help modify the task description: add a brief summary (10-12 lines) of the problem that this proposal raises, topics discussed in the comments, and a proposed solution (if there is any yet). Remember to add a header with a title "Description," to your content. Please do so before February 5th, 12:00 pm UTC.

Tgr added a subscriber: Tgr.Feb 15 2017, 9:32 AM

This was the second (slash third, in a tie) most popular item in the Developer Wishlist results. @Pginer-WMF could you summarize what's the current status and what help would be needed to move this forward?

Tgr added a subscriber: TheDJ.Feb 15 2017, 9:33 AM

@TheDJ mentioned this elsewhere as something that would complement the TemplateStyles project.

In T90687#3028603, @Tgr wrote:

This was the second (slash third, in a tie) most popular item in the Developer Wishlist results. @Pginer-WMF could you summarize what's the current status and what help would be needed to move this forward?

The status is that:

  1. I made a proposal as an RFC to identify the aspects that we would like to have in a grid system.
  2. I created a reference implementation to illustrate those aspects.
  3. The Language team used the grid in Content Translation to check how that worked in a real project.
  4. A patchset was created to get the system merged into core but several technical issues were identified such as the internal names of the Less mixins not being intuitive.

I cannot add much more technically. So someone with more technology knowledge can either improve the proposed implementation or propose a better one for this, probably taking advantage of the flexbox and CSS-grid specifications that have evolved since I created the proposal in 2013.

bd808 added a comment.Feb 15 2017, 4:53 PM

I'm sure that I don't know everything there is to know in this space, but a clone of the Bootstrap 12-column grid seems technically simple and generally well documented. There are a lot of good docs on using 12-column grids and Bootstrap has become widespread enough that a fair number of casual web developers are familiar with it. The big need in my mind is for a responsive grid that can be easily used for article content as well as special page layout and skins themselves. In my mind this points to a solution that reinvents as few things as possible so that it is easy to document and promote widely to on-wiki content curators as well as developers.

@Catrope @Krinkle @Volker_E @Nirzar do you think the Architecture committee or the Front-end-Standards-Group or the Design team at the WMF can help evaluating this proposal (#2 in the Developer Wishlist) and see whether it can make it to any team goals or annual plans?

Volker_E added a subscriber: Qgil.Mar 1 2017, 5:04 PM

@Qgil I've thought about putting this on the Front-end-Standards-Group topic for next meeting last night. We definitely need to talk about this there in order to make progress. It also resembles as part of UI-Standardization efforts and we need to have opinions and needs of WMF-Design folks captured. CCing @Pginer-WMF again, as he did a lot of work on the original attempts to resolve this.
Now we've hopefully tagged every project/group related ;)

I agree with @bd808 about using a well known grid. Bootstrap's is very widely used and would be fine, something like a flexbox grid http://flexboxgrid.com/ would be awesome.

Seems like a good discussion for the Front-end-Standards-Group as @Volker_E said.

phuedx added a subscriber: phuedx.Mar 1 2017, 5:47 PM

As first step, we should gather and clearly define needs, on the RFC discussion page there hasn't been a lot of inputs, if so, the last one dates back to June 2014. I don't know if there were any other findings or documentation… @Pginer-WMF?

A recurring issue with various of the grids (and their implementation) out there, is the sentiment of them being bloated (prob over-engineered): They provide so many layout options (nesting, responsive layout) so that devs need a lot of time to wrap their head around and don't use it for the main use cases. Bloated output code comes in as hurdle as well. From my reading this problem was parts being captured under “Optional”.

CSS Flexbox based grids seem, given that it needs all kinds of browser hacks and/or polyfills, to share the same issues.
CSS Grids, as mentioned above, will be a complete replacement for any effort we take at some point in the future. The main advantage seems to be two-dimensional grids. We should weigh in future-proofness/compatibility in our attempts here.

I agree with @bd808 about using a well known grid. Bootstrap's is very widely used and would be fine, something like a flexbox grid http://flexboxgrid.com/ would be awesome.
Seems like a good discussion for the Front-end-Standards-Group as @Volker_E said.

At the time the proposal was created, Bootstrap was very different. Now it incorporates many of the principles proposed. The only differences seem to be that Bootstrap assumes a 12-column grid by default, and uses different names (of the breakpoints and the size specifications). So I think it could be a good candidate to support the grid ideas.

In terms of responsiveness it seems that Bootstrap supports adjusting grid columns and visibility of elements, but it would be useful to have ways to adjust any CSS aspect (such as font size) as illustrated in the experimental implementation of the proposal. This can be considered related to the grid discussion, or considered separately.

As first step, we should gather and clearly define needs, on the RFC discussion page there hasn't been a lot of inputs, if so, the last one dates back to June 2014. I don't know if there were any other findings or documentation… @Pginer-WMF?

In the proposal I capture the main needs I identified:

  • Optional because we cannot change the whole UI at once.
  • Nestable because we want to use the grid in components that will appear inside pages or other components based on the same grid system.
  • Responsive because we want to make the best use of the available space in a world with a big diversity of devices.
  • Semantic because we don't want to clutter the HTML and be heavily affected by changes in the grid system internals in the future.
  • I also included proportional because I found that "one-half" the available space was easier to understand that col-6 (which requires you to know it means 6/12), But I'm ok to live without this one since I'm not the one going to implement software using this, I just want the designs to be easy to transfer accurately into the final solutions.

@Volker_E The backing CSS of the abstraction we choose to expose should be an implementation detail, in my opinion.


@Pginer-WMF The proposal is great, and I very much agree with those points.

From what I see, the implementation is not mobile-first, which is something I think is very important (some reasons in How To Write Mobile-first CSS).

Would it be worth modifying that behavior so that the targets apply upwards? (using only min-width on the media queries) That is how mobile-first grids work, like bootstrap or skeleton for example.

@Tgr Does TemplateStyles allow developers to use LESS in the templates or only CSS? Asking because if it is only CSS we would need to expose classes instead of using the semantic approach and only exposing mixins.

TemplateStyles does not allow use of LESS right now (just like we have on MediaWiki.css not MediaWiki.less) and I don't think we should go down that route as part of this... that would increase the scope quite dramatically. I also worry about adoption as many wiki editors are not necessarily programmers and learning LESS might be a little bit of a stretch for some (remember many of these editors don't know Git and don't want to learn Git hence why the develop gadgets).

I'd suggest we focus on a class based approach.
+1 to using a well known grid.

Qgil removed a subscriber: Qgil.Mar 13 2017, 4:56 PM
Flycatchr removed a subscriber: Flycatchr.
Qgil added a comment.Sep 12 2017, 8:32 AM

In relation to T158149: Find an owner for top 10 Developer Wishlist 2017 proposals, I dare to ask: what is the current status? :)

Krinkle removed a subscriber: Krinkle.
Volker_E added a subscriber: Qgil.

@Qgil There's no clear consensus on

  • where such grid (helpers) should live (MW core probably, but then again where and as what),
  • what technology to build on top as there has been massive standard support improvement additions in providing more powerful (Flexible Box Layout) or simpler (CSS Grid Layout) solutions in this area
  • and last but not least, who's to implement & maintain it given the multitude of necessities to care about and test against

On this behalf I'm removing OOUI as it's not the place for grid support to live in from current project scope.