dates1967 / simpleinvoices

Automatically exported from code.google.com/p/simpleinvoices
GNU General Public License v3.0
0 stars 0 forks source link

Icons: switch from individual IMG elements to CSS-sprites #227

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
The benefits of changing to CSS-sprites:

- faster, sprite image cached to CSS file
- cleaner template code, remove image URLs to the CSS file
- opens the door for making it easier to update and customize the application's 
UX 

Work Jason Simanek will be doing to complete this ticket:

- develop CSS class system for presenting hyperlinks as icons in UX
- assemble all 16px icons into one consolidated sprite image

CSS classes will be something like this:

icon               overflow, display, padding, margin, width, height, 
                   background-image:url(images/icons_16px.png);

icon-edit          background-position
icon-save          background-position

At the moment it looks like all icons are the same dimensions: 16 x 16px. Once 
the above tasks are completed it will be easier to switch to different-sized 
icon sets. However, in the event that various icon sizes will be integrated 
simultaneously, I think it will be practical to consider the "icon" class as 
the primary icon size and then create new classes such as "icon-small" and 
"icon-large" for icon size variations that will employ a different sprite 
collection.

Original issue reported on code.google.com by jsima...@gmail.com on 6 Mar 2012 at 2:37