- Mentioned In
- T158148: Promote Developer Wishlist 2017 proposals
T158149: Find an owner for top 10 Developer Wishlist 2017 proposals
T155813: Decide on storage and delivery method for TemplateStyles CSS
T120755: Mobile-friendly framework for multi-column portal and project pages
- Mentioned Here
- T158149: Find an owner for top 10 Developer Wishlist 2017 proposals
rMW87381cbaa170: mediawiki.ui: Introduce grid system
T105923: Fix issues found during Wikimania 2015 Hackathon and Workshops
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!
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.
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.
The status is that:
- I made a proposal as an RFC to identify the aspects that we would like to have in a grid system.
- I created a reference implementation to illustrate those aspects.
- The Language team used the grid in Content Translation to check how that worked in a real project.
- 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.
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.
@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 ;)
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.
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.
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).
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 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.