Since we had the luxury of having several people in the office, Trevor, Juliusz, Rob Moen, Ed Sanders, Shahyar, May, Monte and I sat down to talk about the problem we currently have of having no standard way to create icons. Here is my write up of this meeting, again, if you attended please add/correct me on anything and if you were not please ask for clarification where needed.
Currently we have two modes of creating icons in MediaWiki 1) Using a font 2) Using SVGs with PNG fallbacks and the markup varies depending on what extension you look at.
We discussed both approaches and advantages and disadvantages of each. One of the major disadvantages of the WikiFont is the additional HTTP request it creates to download the font and cannot be embedded in the stylesheet using data uris like SVGs can (due to URL size restrictions).
One of the major advantages of WikiFont is you can design a grayscale icon, and style it using font colour. Shahyar was happy to move Flow to using SVG based fonts if we could build grayscale SVGs and change their colours using ResourceLoader. One concrete example is when you have an icon used in a constructive anchor. The icon needs to be green, but when hovered over a lighter green.
Another advantage brought up by May was that currently she finds it much easier to build icons in this way, and that having to maintain separate coloured versions of the SVGs is a pain point to her.
We decided that we should push towards using SVGs that can be built into fonts for the purpose of the app.
As next steps 1) Monte to explore using SVGs in the Wikipedia apps. He will create font from SVGs. He will work with May to ensure her workflow is as easy as before.
2) Trevor is going to look into how we can automatically generate different colour versions of SVGs and automatically create PNGs from them.
3) I am going to aim to agree on a standard icon HTML markup for mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names.
We aim to get all the above done by Sept 15th, 2014 so please poke us on the mailing list if you haven't had a follow up then.
Full disorganised notes can be found here [2].
[1] https://www.mediawiki.org/wiki/Icon_standardisation [2] http://etherpad.wikimedia.org/p/Icon_standardisation
There's a grunt task called grunticon that does #2. https://github.com/filamentgroup/grunticon
LG, max @awesomephant
On 27.08.2014, at 20:56, Jon Robson jrobson@wikimedia.org wrote:
Since we had the luxury of having several people in the office, Trevor, Juliusz, Rob Moen, Ed Sanders, Shahyar, May, Monte and I sat down to talk about the problem we currently have of having no standard way to create icons. Here is my write up of this meeting, again, if you attended please add/correct me on anything and if you were not please ask for clarification where needed.
Currently we have two modes of creating icons in MediaWiki
- Using a font
- Using SVGs with PNG fallbacks
and the markup varies depending on what extension you look at.
We discussed both approaches and advantages and disadvantages of each. One of the major disadvantages of the WikiFont is the additional HTTP request it creates to download the font and cannot be embedded in the stylesheet using data uris like SVGs can (due to URL size restrictions).
One of the major advantages of WikiFont is you can design a grayscale icon, and style it using font colour. Shahyar was happy to move Flow to using SVG based fonts if we could build grayscale SVGs and change their colours using ResourceLoader. One concrete example is when you have an icon used in a constructive anchor. The icon needs to be green, but when hovered over a lighter green.
Another advantage brought up by May was that currently she finds it much easier to build icons in this way, and that having to maintain separate coloured versions of the SVGs is a pain point to her.
We decided that we should push towards using SVGs that can be built into fonts for the purpose of the app.
As next steps
- Monte to explore using SVGs in the Wikipedia apps. He will create
font from SVGs. He will work with May to ensure her workflow is as easy as before.
- Trevor is going to look into how we can automatically generate
different colour versions of SVGs and automatically create PNGs from them.
- I am going to aim to agree on a standard icon HTML markup for
mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names.
We aim to get all the above done by Sept 15th, 2014 so please poke us on the mailing list if you haven't had a follow up then.
Full disorganised notes can be found here [2].
[1] https://www.mediawiki.org/wiki/Icon_standardisation [2] http://etherpad.wikimedia.org/p/Icon_standardisation
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On 27 August 2014 12:14, Max max@koehler-kn.de wrote:
There's a grunt task called grunticon that does #2. https://github.com/filamentgroup/grunticon
Max,
That's a pretty awesome find; thank you!
J.
You're welcome. Do you guys have a grunt workflow set up? I'd love to help out.
Best, max @awesomephant
On 28.08.2014, at 17:45, James Forrester jforrester@wikimedia.org wrote:
On 27 August 2014 12:14, Max max@koehler-kn.de wrote:
There's a grunt task called grunticon that does #2. https://github.com/filamentgroup/grunticon
Max,
That's a pretty awesome find; thank you!
J.
James D. Forrester Product Manager, Editing Wikimedia Foundation, Inc.
jforrester@wikimedia.org | @jdforrester _______________________________________________ Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On 28 August 2014 11:22, Max max@koehler-kn.de wrote:
You're welcome. Do you guys have a grunt workflow set up? I'd love to help out.
Yes, here for OOjs UI http://git.wikimedia.org/blob/oojs%2Fui.git/HEAD/Gruntfile.js – we'd definitely welcome suggestions and patches. :-)
J.
Just to note - it is only the iOS app that uses the font. The android one has always just used SVGs.
I'm going to add that besides color, which seems to be the main focus here, that there are several other design issues I hope the solution we choose can offer us. That includes (mentioned http://etherpad.wikimedia.org/p/Icon_standardisation at bottom of etherpad http://etherpad.wikimedia.org/p/Icon_standardisation):
Looking great visually
- Icons align with text (on the baseline, or below, or above. It differs from icon to icons)
- Icons align vertically and horizontally with other icons
- Icon sizes are proportionate to each other
Easy to manipulate and push icon changes
- No extra workflows apart from changing SVG files
- No need to export different color files after making a slight improvement to icon
Easy to ship and communicate changes to other teams
- No need to dig emails
- Easy to track latest versions. No confusion
- No extra work for other teams to change icons in their own team applications when we make icon improvements
Consistency in application
- Easy for everyone to know which icon to use without duplicating different icons for same usage
Monte has shown me the script that he's created and I've got to say they are pretty impressive and it ticks off alot of these issues. I'll continue to work with him and the rest towards a solution that better streamline engineering and design workflows while giving us consistently great results.
mm
On Wed, Aug 27, 2014 at 12:17 PM, Yuvi Panda yuvipanda@gmail.com wrote:
Just to note - it is only the iOS app that uses the font. The android one has always just used SVGs.
-- Yuvi Panda T http://yuvi.in/blog
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
- I am going to aim to agree on a standard icon HTML markup for
mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names.
As an update I have made a proposal based on a patch from the Growth team here [1] A picture useless makes things clearer so I did a sketch [2]. It seems like this would work for both Flow and MobileFrontend so am waiting to hear back some feedback from other teams. Essentially we'd have a base class mw-ui-icon and various modifier classes that supply the icon image and the icon position.
[1] https://gerrit.wikimedia.org/r/#/c/139368/ [2] http://i.imgur.com/bieQ9zn.jpg
- Monte to explore using SVGs in the Wikipedia apps. He will create
font from SVGs. He will work with May to ensure her workflow is as easy as before.
Monte any updates on this?
- Trevor is going to look into how we can automatically generate
different colour versions of SVGs and automatically create PNGs from them.
Trevor any updates?
- I am going to aim to agree on a standard icon HTML markup for
mediawiki ui. We still have an issue with the fact that everyone is using different HTML markup to create icons. After reviewing all our current approaches [1] it was clear that we were relatively closely aligned and that it simply is a case of agreeing on class names.
I'm still working on this. Sam Smith has now suggested a mixin based approach [1] which I am not too comfortable with as I think it works against standardisation by allowing far too much flexibility and I don't see how it will map to us using OOJS for it in future.
A class based approach [2] that follows the http://i.imgur.com/bieQ9zn.jpg
Please chime in on those patches - I'm super keen to make progress on this to get our icon generation mechanism under control.
[1] https://gerrit.wikimedia.org/r/139368 [2] https://gerrit.wikimedia.org/r/158632
On Wed, 10 Sep 2014 02:11:45 +0200, Jon Robson jrobson@wikimedia.org wrote:
- Trevor is going to look into how we can automatically generate
different colour versions of SVGs and automatically create PNGs from them.
Trevor any updates?
I took a stab at that after chatting with Trevor.
tl;dr it's happening!
OOjs UI now has a Grunt task [1] to generate PNG versions of SVG icons (just run `grunt` in the console and see the converted files appear in the dist/ directory). This is merged and used in production already, and would be trivial to adapt to any other repository.
There is a proof-of-concept patch for a SVG colorizer task, too [2] (run `grunt` to try it out). Right now all it does is generate variously colored versions of icons according to rules specified in Gruntfile.js; Trevor was meaning to extend it to generate necessary CSS rules and to accept configuration from a JSON file. If you're willing to write the LESS/CSS by hand, you can probably use it already. (The icons are naturally also converted to PNG by the task from the previous paragraph.)
(To run grunt tasks, you need to have Node.JS, NPM and Grunt installed, then run `npm install` in the root of any repository you want to use them in to install all task dependencies.)
There are some "prebuilt" libraries to do this, like Grunticon or Iconizr, but they all have very strong unoverridable conventions about the outputs and inputs that don't match our own. They insist on generating CSS sprites, store color information in file names, or alternatively don't allow for limiting available colors, and don't cooperate with MediaWiki's SVG+PNG fallback method.
[1] https://gerrit.wikimedia.org/r/#/c/158386/ [2] https://gerrit.wikimedia.org/r/#/c/158444/
Great stuff. We are going to need such a tool for the mediawiki ui subdirectory of core soon. I'm not sure what is the best way to use the tool.
Annoyingly I'm now stuck on markup standardisation as the main person I was arguing with (Sam Smith) is now on vacation :/
On Wed, Sep 10, 2014 at 5:40 AM, Bartosz Dziewoński matma.rex@gmail.com wrote:
On Wed, 10 Sep 2014 02:11:45 +0200, Jon Robson jrobson@wikimedia.org wrote:
- Trevor is going to look into how we can automatically generate
different colour versions of SVGs and automatically create PNGs from them.
Trevor any updates?
I took a stab at that after chatting with Trevor.
tl;dr it's happening!
OOjs UI now has a Grunt task [1] to generate PNG versions of SVG icons (just run `grunt` in the console and see the converted files appear in the dist/ directory). This is merged and used in production already, and would be trivial to adapt to any other repository.
There is a proof-of-concept patch for a SVG colorizer task, too [2] (run `grunt` to try it out). Right now all it does is generate variously colored versions of icons according to rules specified in Gruntfile.js; Trevor was meaning to extend it to generate necessary CSS rules and to accept configuration from a JSON file. If you're willing to write the LESS/CSS by hand, you can probably use it already. (The icons are naturally also converted to PNG by the task from the previous paragraph.)
(To run grunt tasks, you need to have Node.JS, NPM and Grunt installed, then run `npm install` in the root of any repository you want to use them in to install all task dependencies.)
There are some "prebuilt" libraries to do this, like Grunticon or Iconizr, but they all have very strong unoverridable conventions about the outputs and inputs that don't match our own. They insist on generating CSS sprites, store color information in file names, or alternatively don't allow for limiting available colors, and don't cooperate with MediaWiki's SVG+PNG fallback method.
[1] https://gerrit.wikimedia.org/r/#/c/158386/ [2] https://gerrit.wikimedia.org/r/#/c/158444/
-- Matma Rex
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
Icons are now described in the styleguide [1] Flow, MobileFrontend and Growth should be migrating towards this markup (disclaimer: markup might change in future but not before we have a common API for generating the markup e.g. mw.ui.icon( 'thanks' ) )
There is a tracking bug to move to this markup [2] I'm working on moving MobileFrontend to use this markup. I believe Sam Smith is looking at things from the core side of things. Migrating Flow is only possibly partially right now, as many of the icons need to exist in different colours and we are going to need some RL support for that. Shahyar can comment, but I'm hoping there is some way Flow can work around that problem?
I'll need help from Trevor/Bartosz now to provide a method of tying a class e.g. mw-ui-icon-thanks to the SVG/PNG background image. We'll need some kind of shared repository (git submodule) in core to move this along. Can either of you help me with this today?
I thought it would also be useful to share a big picture road map of how I see this work and other work unfolding [3]. Let me know (in a separate thread) if there is anything you seriously disagree with or want to flesh out some more.
[1] http://tools.wmflabs.org/styleguide/desktop/section-4.html [2] https://bugzilla.wikimedia.org/show_bug.cgi?id=71180 [3] https://www.mediawiki.org/wiki/User:Jdlrobson/Quest/Frontend_UI_standardisat...
On Fri, Sep 12, 2014 at 9:42 AM, Jon Robson jdlrobson@gmail.com wrote:
Great stuff. We are going to need such a tool for the mediawiki ui subdirectory of core soon. I'm not sure what is the best way to use the tool.
Annoyingly I'm now stuck on markup standardisation as the main person I was arguing with (Sam Smith) is now on vacation :/
On Wed, Sep 10, 2014 at 5:40 AM, Bartosz Dziewoński matma.rex@gmail.com wrote:
On Wed, 10 Sep 2014 02:11:45 +0200, Jon Robson jrobson@wikimedia.org wrote:
- Trevor is going to look into how we can automatically generate
different colour versions of SVGs and automatically create PNGs from them.
Trevor any updates?
I took a stab at that after chatting with Trevor.
tl;dr it's happening!
OOjs UI now has a Grunt task [1] to generate PNG versions of SVG icons (just run `grunt` in the console and see the converted files appear in the dist/ directory). This is merged and used in production already, and would be trivial to adapt to any other repository.
There is a proof-of-concept patch for a SVG colorizer task, too [2] (run `grunt` to try it out). Right now all it does is generate variously colored versions of icons according to rules specified in Gruntfile.js; Trevor was meaning to extend it to generate necessary CSS rules and to accept configuration from a JSON file. If you're willing to write the LESS/CSS by hand, you can probably use it already. (The icons are naturally also converted to PNG by the task from the previous paragraph.)
(To run grunt tasks, you need to have Node.JS, NPM and Grunt installed, then run `npm install` in the root of any repository you want to use them in to install all task dependencies.)
There are some "prebuilt" libraries to do this, like Grunticon or Iconizr, but they all have very strong unoverridable conventions about the outputs and inputs that don't match our own. They insist on generating CSS sprites, store color information in file names, or alternatively don't allow for limiting available colors, and don't cooperate with MediaWiki's SVG+PNG fallback method.
[1] https://gerrit.wikimedia.org/r/#/c/158386/ [2] https://gerrit.wikimedia.org/r/#/c/158444/
-- Matma Rex
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- Jon Robson
A curious, perhaps a bit off topic question. Is there any way to see what icons are supported in the markup? I am thinking of something like an icon library.
*Med vänliga hälsningar,Jan Ainali*
Verksamhetschef, Wikimedia Sverige http://wikimedia.se 0729 - 67 29 48
*Tänk dig en värld där varje människa har fri tillgång till mänsklighetens samlade kunskap. Det är det vi gör.* Bli medlem. http://blimedlem.wikimedia.se
2014-09-24 18:55 GMT+02:00 Jon Robson jrobson@wikimedia.org:
Icons are now described in the styleguide [1] Flow, MobileFrontend and Growth should be migrating towards this markup (disclaimer: markup might change in future but not before we have a common API for generating the markup e.g. mw.ui.icon( 'thanks' ) )
There is a tracking bug to move to this markup [2] I'm working on moving MobileFrontend to use this markup. I believe Sam Smith is looking at things from the core side of things. Migrating Flow is only possibly partially right now, as many of the icons need to exist in different colours and we are going to need some RL support for that. Shahyar can comment, but I'm hoping there is some way Flow can work around that problem?
I'll need help from Trevor/Bartosz now to provide a method of tying a class e.g. mw-ui-icon-thanks to the SVG/PNG background image. We'll need some kind of shared repository (git submodule) in core to move this along. Can either of you help me with this today?
I thought it would also be useful to share a big picture road map of how I see this work and other work unfolding [3]. Let me know (in a separate thread) if there is anything you seriously disagree with or want to flesh out some more.
[1] http://tools.wmflabs.org/styleguide/desktop/section-4.html [2] https://bugzilla.wikimedia.org/show_bug.cgi?id=71180 [3] https://www.mediawiki.org/wiki/User:Jdlrobson/Quest/Frontend_UI_standardisat...
On Fri, Sep 12, 2014 at 9:42 AM, Jon Robson jdlrobson@gmail.com wrote:
Great stuff. We are going to need such a tool for the mediawiki ui subdirectory of core soon. I'm not sure what is the best way to use the tool.
Annoyingly I'm now stuck on markup standardisation as the main person I was arguing with (Sam Smith) is now on vacation :/
On Wed, Sep 10, 2014 at 5:40 AM, Bartosz Dziewoński matma.rex@gmail.com
wrote:
On Wed, 10 Sep 2014 02:11:45 +0200, Jon Robson jrobson@wikimedia.org wrote:
- Trevor is going to look into how we can automatically generate
different colour versions of SVGs and automatically create PNGs from them.
Trevor any updates?
I took a stab at that after chatting with Trevor.
tl;dr it's happening!
OOjs UI now has a Grunt task [1] to generate PNG versions of SVG icons
(just
run `grunt` in the console and see the converted files appear in the
dist/
directory). This is merged and used in production already, and would be trivial to adapt to any other repository.
There is a proof-of-concept patch for a SVG colorizer task, too [2] (run `grunt` to try it out). Right now all it does is generate variously
colored
versions of icons according to rules specified in Gruntfile.js; Trevor
was
meaning to extend it to generate necessary CSS rules and to accept configuration from a JSON file. If you're willing to write the LESS/CSS
by
hand, you can probably use it already. (The icons are naturally also converted to PNG by the task from the previous paragraph.)
(To run grunt tasks, you need to have Node.JS, NPM and Grunt installed,
then
run `npm install` in the root of any repository you want to use them in
to
install all task dependencies.)
There are some "prebuilt" libraries to do this, like Grunticon or
Iconizr,
but they all have very strong unoverridable conventions about the
outputs
and inputs that don't match our own. They insist on generating CSS
sprites,
store color information in file names, or alternatively don't allow for limiting available colors, and don't cooperate with MediaWiki's SVG+PNG fallback method.
[1] https://gerrit.wikimedia.org/r/#/c/158386/ [2] https://gerrit.wikimedia.org/r/#/c/158444/
-- Matma Rex
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
-- Jon Robson
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design
On Wed, Sep 24, 2014 at 12:04 PM, Jan Ainali jan.ainali@wikimedia.se wrote:
I am thinking of something like an icon library.
We are planning to add that to the current styleguide soon — http://tools.wmflabs.org/styleguide/desktop/
—prtksxna
Yup. I'm on this. As mentioned in my earlier message though I'll need help from Trevor/Bartosz.
On Wed, Sep 24, 2014 at 1:15 PM, Prateek Saxena psaxena@wikimedia.org wrote:
On Wed, Sep 24, 2014 at 12:04 PM, Jan Ainali jan.ainali@wikimedia.se wrote:
I am thinking of something like an icon library.
We are planning to add that to the current styleguide soon — http://tools.wmflabs.org/styleguide/desktop/
—prtksxna
Design mailing list Design@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design