Automattic/Genericons

Possible Stylesheet Organization Regression in 3.1

Closed this issue · 3 comments

I've just updated to the latest version of Genericons (3.1) and noticed that the organization of the CSS has changed slightly, such that icon blocks are no longer grouped by theme but put into one large list under Individual icons. This is what the old stylesheet looked like, which made understanding the icons very easy. There's a block for Post formats, Social icons, and so forth.

/* Meta icons */
.genericon-comment:before {         content: '\f300'; }
.genericon-category:before {        content: '\f301'; }
.genericon-tag:before {             content: '\f302'; }
.genericon-time:before {            content: '\f303'; }
.genericon-user:before {            content: '\f304'; }
.genericon-day:before {             content: '\f305'; }
.genericon-week:before {            content: '\f306'; }
.genericon-month:before {           content: '\f307'; }
.genericon-pinned:before {          content: '\f308'; }

In the new stylesheet everything is blocked together so it's hard to understand which icons belong to which group.

/**
 * Individual icons
 */
.genericon-404:before { content: "\f423"; }
.genericon-aside:before { content: "\f101"; }
.genericon-attachment:before { content: "\f416"; }
.genericon-audio:before { content: "\f109"; }
.genericon-bold:before { content: "\f471"; }
.genericon-book:before { content: "\f444"; }
.genericon-cart:before { content: "\f447"; }
.genericon-category:before { content: "\f301"; }
.genericon-chat:before { content: "\f108"; }
.genericon-checkmark:before { content: "\f418"; }
.genericon-close:before { content: "\f405"; }
.genericon-close-alt:before { content: "\f406"; }

Is this due to the way that the file is being generated or a design decision? Would you be open to re-blocking the icons into themes or sequentially so that we're able to more easily understand which selectors belong to which group?

This is solely due to the fact that both the CSS and example HTML are baked automatically along with the font files by FontCustom. Alas there's no way to add category metadata to each icon using FontCustom, so that they might be grouped later on. Which means I'd have to do it manually each time I added new icons.

I agree this is an unfortunate regression. But the use of FontCustom has a number of pros that hopefully outweigh this nuisance:

  • The font is no longer meticulously built using Glyphs app and copy/pasting from Illustrator. It's a one line command in the terminal.
  • This incidentally means we'll be releasing the source for Genericons soon, so you could theoretically add to or remove icons from the font, so you have a version just for you.

Thanks so much for the thoughtful response Joen. I figured it may be because of the auto-generation happening, so let's close this out. Cheers.