Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Idea: Icons based on CSS #43

Closed
Closed
@toddparker

Description

@toddparker
Contributor

Try and create some basic icons using CSS instead of bitmaps? We could inject the necessary markup with JS. These would be high res and scalable. Most core icons are very simple right now:

+, -, x (delete), arrow up/down/left/right, sort grippy bars

Ideally, we could use this for radiobuttons and checkboxes too. Since Doug's the master, maybe he can weigh in on whether this is feasible.

_t

Activity

dcneiner

dcneiner commented on Sep 20, 2010

@dcneiner
Contributor

I think this is feasible, but not necessarily practical. CSS has no concept of negative space, so the icons can only be additive. In your examples, they are all doable without needing negative space, but we would start to hit a limit as we got more complex.

The best place to start might be determining the support of :after and :before pseudo elements. The use of these elements allow for a more streamlined markup structure, though of course it could be done w/o them.

dcneiner

dcneiner commented on Sep 20, 2010

@dcneiner
Contributor

Not saying this is a bad idea, but we need to be clear on just how far this could actually go. The markup in many cases could end up being as large as the actual image we are trying to replace, especially when dealing with solid color icons.

toddparker

toddparker commented on Sep 20, 2010

@toddparker
ContributorAuthor

Understood. The motivation is resolution independence not file size reduction so this might be ok. If we stick with bitmaps, we need to work out how to deal with iPhone 4 vs. normal resolution. Current icons look jaggy on iPhone 4.

dcneiner

dcneiner commented on Sep 20, 2010

@dcneiner
Contributor

It is totally worth checking into. I can run point on this if you want, if you can run tests on the devices :)

toddparker

toddparker commented on Sep 20, 2010

@toddparker
ContributorAuthor

Sounds like a plan.

scottjehl

scottjehl commented on Sep 20, 2010

@scottjehl

Doug, I added a support property for $.support.cssPseudoElement if that helps. It's based on the content property, which should infer support for :before, :after selectors.

That said, I agree the overhead on this may make it now worthwhile. Worth checking into though, at some point.

jordandobson

jordandobson commented on Oct 16, 2010

@jordandobson

I've done quite a bit of work on this front and I find that it works pretty well. If it's all ems based they will scale pretty nicely as well when the font size grows. You also could have a default size for these and allow for increasing the size without the need for extra images.

I would be happy to work on this for you guys if you would like.

Here's a few webkit examples of a few things I've done that are very similar to what you're talking about here:

Plus & Minus Icons

Back & Down Chevron

Checkbox Input Elements with Checkmark (also have "-", "+" and "x")

Checkbox Input as a Switch

Animated Loading Indicator

iOS Tab Bar Highlight (mostly just gradients)

These were all CSS only and made for webkit. They could easily have Mozilla support as well.

Also consider that you do have some ability to draw with gradients... You can make lines at almost any angle and it's pretty simple to include multiples as background images. I can send you some stuff I've been doing with repeating gradients to create grids for layout if you want.

Let me know if this is something you might like me to take on.

toddparker

toddparker commented on Oct 18, 2010

@toddparker
ContributorAuthor

I think the criteria for icons is that they need to work in as many places as possible and be as lightweight and bulletproof as possible. I'd take bulletproof over very detailed. If these are more file weight or slow down rendering (radial gradients are killer on performance and should probably be completely avoided on mobile) than the low and high res image sprites we're using, that might be a hard sell. For basic icons like +,-, >, <, grid, etc. seems like a good way to go.

BTW - those demos are awesome. I'd like to look into your switch plugin and compare to our approach.

jordandobson

jordandobson commented on Oct 19, 2010

@jordandobson

Thanks! A lot of my code involves using Pseudo elements ::before ::after. Is that something I should avoid and create a tag for each element?

toddparker

toddparker commented on Oct 19, 2010

@toddparker
ContributorAuthor

I would go with whatever will work in the most places. I'm already concerned that this may not work in as many devices as we need so let's play it as safe as we can with selectors. Think of this as a proof of concept -- we'll do some testing and make a call on css vs. images.

naton

naton commented on Oct 19, 2010

@naton

FWIW, a "<" character means "less than", not "left". I'm personally not too fond of using CSS generated content and/or markup for all kinds of icons on the web, not only because of debatable semantics but also (and specially so on mobile devices) because of the performance issues @toddparker mentions.

jordandobson

jordandobson commented on Oct 19, 2010

@jordandobson

@naton - I don't suspect we'll have any issues with performance. I don't think for the first set I will need to use any gradients at all. I think semantically there are many ways you could go about it depending on how important that is. I'll give a few options. :)

toddparker

toddparker commented on Feb 15, 2011

@toddparker
ContributorAuthor

Moving to the feature requests page for post-1.0:
https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

townxelliot

townxelliot commented on Sep 28, 2011

@townxelliot
Contributor

Is drawing them using canvas in any way possible/feasible/desirable?

staabm

staabm commented on Sep 28, 2011

@staabm
Contributor
jordandobson

jordandobson commented on Nov 11, 2011

@jordandobson

I would say so. From my experiments it seems totally feasible to deliver over webkit at least. Passing that over to CSS is pretty easy at that point.

Jordan Dobson • Designer / Developer • 425-444-8014 • JordanDobson.com

On Sep 28, 2011, at 7:35 AM, Elliot Smithreply@reply.github.com wrote:

Is drawing them using canvas in any way possible/feasible/desirable?

Reply to this email directly or view it on GitHub:
#43 (comment)

toddparker

toddparker commented on Nov 11, 2011

@toddparker
ContributorAuthor

Since we're close to shipping 1.0, would you want to do a proof of concept for this @jordandobson? Would be nice to have cleaner icons.

jordandobson

jordandobson commented on Nov 11, 2011

@jordandobson

@toddparker - would you like to see both CSS and Canvas based icons? is there a small subset you would like to see? The nice thing with CSS icons is they are resolution independent... but I can whip up some Canvas based ones as well.

toddparker

toddparker commented on Nov 11, 2011

@toddparker
ContributorAuthor

I'm good with trying both to do some testing. We could just pick a few icons and see how it goes.

jordandobson

jordandobson commented on Nov 11, 2011

@jordandobson

Okay. I'll take a look at what we have now and work out a subset... I'll get started and suggest a few and go from there.'

Sound good?

toddparker

toddparker commented on Nov 11, 2011

@toddparker
ContributorAuthor

Perfect. Looking forward to seeing what you cook up.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @jordandobson@townxelliot@dcneiner@staabm@scottjehl

        Issue actions

          Idea: Icons based on CSS · Issue #43 · jquery-archive/jquery-mobile