search

plone / Products.CMFPlone

The core of the Plone content management system
https://plone.org
GNU General Public License v2.0
254 stars 191 forks source link

Plone custom icon font should have a custom name #1593

Closed agitator closed 2 years ago

agitator commented 8 years ago

We have a custom fontello font in Plone ( https://github.com/plone/Products.CMFPlone/tree/master/Products/CMFPlone/static/fonts ), with all kinds of custom names for the icons we use. It is referenced as font-family: "fontello" in our CSS: https://github.com/plone/Products.CMFPlone/blob/master/Products/CMFPlone/static/fonts/plone-fontello.less I came accross various kinds of side effects... Shouldn't we name "our" icon font something like "plone-icons.woff" or "plonicons.woff" ;-P ?

@plone/ux-team

RobZoneNet commented 8 years ago

Do you not want the css that normally comes with the font icons.. like icon-foo? The CSS uses the starts with icon- stuff. Perhaps this is the issue you are having? It is bleeding over?

If not, maybe the solution is icon-plone-foo?

On Fri, May 20, 2016 at 5:03 AM, agitator notifications@github.com wrote:

We have a custom fontello font in Plone with all kinds of custom names for the icons we use. I came accross various kinds of side effects... Shouldn't we name "our" icon font something like "plone-icons.woff" or "plonicons.woff" ;-P ?

@plone/ux-team https://github.com/orgs/plone/teams/ux-team

— You are receiving this because you are on a team that was mentioned. Reply to this email directly or view it on GitHub https://github.com/plone/Products.CMFPlone/issues/1593

Rob Porter http://robzone.net/

agitator commented 8 years ago

Yes it's about the overbleeding... Right now I do both prefixing the styles with something like "icon-project-myevent" and naming the icon font different from fontello.

I just think we should make life for integrators easier and get out of a their way with our custom font. (Positive sideeffect is that we make sure the default Plone icons are not overridden accidentially)

RobZoneNet commented 8 years ago

I am fine with that. At some point I considered proposing making them all SVGs. I have done it already for one project I was on. For all of plone.

On May 20, 2016, at 12:05 PM, agitator notifications@github.com wrote:

Yes it's about the overbleeding... Right now I do both prefixing the styles with something like "icon-project-myevent" and naming the icon font different from fontello.

I just think we should make life for integrators easier and get out of a their way with our custom font. (Positive sideeffect is that we make sure the default Plone icons are not overridden accidentially)

— You are receiving this because you are on a team that was mentioned. Reply to this email directly or view it on GitHub https://github.com/plone/Products.CMFPlone/issues/1593#issuecomment-220647937

agitator commented 8 years ago

I'm all in for using more SVG within Plone. @jensens had some nice ideas regarding the usage of SVGs, but I don't recall the issue# if there was one

RobZoneNet commented 8 years ago

Yeah it is good for governemental types or smart phones who don’t want to download fonts for bandwidth issues

On May 20, 2016, at 12:20 PM, agitator notifications@github.com wrote:

I'm all in for using more SVG within Plone. @jensens https://github.com/jensens had some nice ideas regarding the usage of SVGs, but I don't recall the issue# if there was one

— You are receiving this because you are on a team that was mentioned. Reply to this email directly or view it on GitHub https://github.com/plone/Products.CMFPlone/issues/1593#issuecomment-220651679

davilima6 commented 8 years ago

+1 for an SVG sprite. It's easier to customize/extend and gives more control for manipulation with CSS and JS: from basic color applying to states and animation of parts (SVG groups).

I think there are no blockers, maybe Fontello was chosen too much time ago (2 years, heh) and icon fonts were hotter at that time. I don't think it was a poor choice, but maybe we could review it now that Plone 5 is really out of the door (specially with 5.1 and all the resource registry fixes).

jensens commented 8 years ago

Better: You can also inline SVG so no extra request has to be done.

jensens commented 8 years ago

Inspiration could be this article: https://github.com/blog/2112-delivering-octicons-with-svg

davilima6 commented 8 years ago

@jensens Couldn't it be worse for caching? Instead of allowing caching that very immutable file, we'd serve it again in every html? Besides with so many icons in Plone I'm not sure if that doesn't also decreases browser performance having to parse such bigger HTML with slow processors like some mobile phones have.

Maybe that's best for other usecases like SPAs or smaller collection of icons. But would love to hear more experienced/devops opinions.

PS: After reading the article (and their performance considerations) I can see Github's inline approach working for Plone.

hvelarde commented 8 years ago

@davilima6 is funny to read about those "slow processors in today's mobile phones"; just take a look at this infographic: [The Supercomputer In Your Pocket](this: http://www.visualcapitalist.com/the-supercomputer-in-your-pocket/).

resuming: every person has today more computing power on their pockets than thw one that was available worldwide back in 1969, when we went to the moon but, like Peter Thiel use to say, we use that power for what? "to throw angry birds at pigs, to send pictures of your cat to people halfway around the world and to check in as the virtual mayor of a virtual nowhere while you’re riding a subway from the nineteenth century…"

back to the point, this is good for caching as every page is cached with the icons embedded, is compressed and you can send it in one request.

is a similar approach of I have used in collective.lazysizes where I include a gray square the data URI scheme.

davilima6 commented 8 years ago

I can see the value of full inlining for a small placeholder like Lazysize's one but plone-fontello.svg has around 42kb, so instead of caching:

It seems to me it'd be more efficient to cache the external file at once. User would have to download all those fat HTML at least in their first hit so I believe navigation would get slower sitewide. Varnish cache would also grow quite a lot, unnecessarily.

@hvelarde, re: processors, iPhones and some Androids may be powerful (although an order of magnitute below desktops afaik) but for a11n we should consider bad connectivity and low performance as much as possible. In general browser's render performance is poorer in mobile than in desktop. Not to mention developing countries ;-)

OTOH if we provide a browser view to easily inline only desired icons for each template, it may be quicker. And easier than a sprite to integrate (no background positions to worry about).

jensens commented 8 years ago

I think inlining the single SVGs at the places used is the way to go, not inlining a whole font. Actually the memory footprint of the pure SVG path information of an average icon is very small compared to a whole font. This also gives more flexibility for addons, using custom icons and so on.

davisagli commented 2 years ago

Plone 6 is using SVG for icons.