Can you seperate out the icon sprite please?

8 posts, 1 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 09 Dec 2010 Link to this post

    The built-in icons are SUPER handy, but the single 30k sprite is WAY WAY to big.

    Even just separate into two sprites...large icons and small icons...like if I just need one small checkmark and X, on the entire page\app, a 30k sprite ads a lot of overhead for me.  I'm not sure where I'd ever need to intermingle the icons (large and small)...buttons on a page should be consistent.  So you'd have large OR small buttons?

    Ideally I'd like to see 4 sprites
    1) Small Basic (checks, and X's...common stuff)
    2) Small Tools (checkout, rss, etc...fringe stuff)
    3) Large Basic
    4) Large Tools

    Could you at least consider it? :)  I'm seeing a noticeable "pop" when my buttons load.
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 10 Dec 2010 Link to this post

    Hi Steve,

    Thanks for the suggestion, but it will be a breaking change to do something like that as I suppose there are already some customers that have extended the original predefined icons sprites with some custom solutions. Changing the sprite and CSS positions will affect them badly.

    As an alternative I could suggest you to create a few custom sprites and CSS files, that you could use in your projects instead the original predefined icons styles and sprite. If you use in your code custom solution and not the predefined, the 30kb sprite will not be loaded and will not make the request heavier.

    I suggested two different ways for embedding the icons. In all cases, you should prepare a sprite image. Then you have set class names related to the images in the sprite, and to group them and set the url to the sprite, that all these classes will use. Next step will be to define the background-positions for each icon and you are ready to use your new predefined icons. Just replace PrimaryIconCssClass="rbAdd" with PrimaryIconCssClass="cbHtml"  where the original embedded RadButton Predefined icond is replace form the new custom cbHtml class defining Custom Button Html icons. You could use the PrimaryIconTop, PrimaryIconRight, PrimaryIconBottom, PrimaryIconLeft properties to position the icon inside the button, or respectively SecondaryIconTop, SecondaryIconRight, SecondaryIconBottom, SecondaryIconLeft if you have SecondaryIconCssClass.

    The other suggested way is almost the same, but it predefine the icon position in the button directly form the custom css file. That will save some extra code lines. In the sample project, the CSS class used for this method is called: .cbMediaCssOnly.

    Attached is a sample project: button-custom-icons.zip which contains a sprite with five icons only and the size is 3.14 KB. The attached customicons.gif shows the result.

    Creating similar sprite and CSS will take a few minutes only, but you will have the desired result.
     
    Best wishes,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 10 Dec 2010 Link to this post

    Thanks for the reply :)

    I don't think this would be a breaking change at all...what would break?  rbAdd defines the icon and style for rbAdd even if it's a custom skin.  For anyone not using a custom skin, then it will just work better. 30k is a HUGE sprite.  It would almost even be faster to NOT make it a sprite.  If you're concerned about Custom Skins referencing the main sprite that you use now, then just keep that file there, and add in the few other leaner ones.  If this is deemed a breaking change it's certainly breaking the right way...

    I just think you have the opportunity on the ground floor of this control as lean as possible.  A site heavy with telerik controls is already quite large with all the css and scripts coming down....with an icon @ 30k you're almost certainly always going to see the icon "pop" onto the page.  I totally applaud the idea, I love this control, but I'm always looking to keep my pages as fast as possible.  So your MAKING me bypass your built-in functionality and create my own sprites.
  5. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 13 Dec 2010 Link to this post

    Hello Steve,

    It is obvious that we will not split the existing sprite to four new sprites.

    What I could help to you and the community is to create these four new sprites and four new CSS files that will be easily downloaded and inserted into your applications.

    For that task i will need a little assistance from your side. In your first post you mentioned the following four sprites:

    1) Small Basic (checks, and X's...common stuff)
    2) Small Tools (checkout, rss, etc...fringe stuff)
    3) Large Basic
    4) Large Tools

    Please, describe what icons should be included in each sprite e.g:

    1) Small Basic (checks, and X's...common stuff) - (OK_16x16, Remove_16x16...etc)

    Once I have that information I will create the necessary files and they will be available for download from a sticky forum thread. This way will be even easier because, every user will decide, which type of icons to use and insert into the application.


    Regards,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 13 Dec 2010 Link to this post

    "It is obvious that we will not split the existing sprite to four new sprites"

    Ok, so it's obvious now that I called you out on the total BS answer you gave on a breaking change.  It's not a breaking change...anyone who has made a custom skin already has these icons in their skin images folder.  Anyone using the existing out of the box implementation would just benifet automatically with the change.

    I could absolutely create my own sprite and because of your implementation I will HAVE to create my own sprite...how does that increase developer productivity or "deliver more than expected".  The FEATURE is nice, but delivers less than expected.  You're missing the fundantal reason why sprites are used...to reduce http traffic to avoid image popping.  However with this implimentation you've INCREASED traffic and popping for no apparent reason.  We're already dealing with a massive download on a telerik heavy page because the css isn't at all minimized.

    People use these controls to get out-of-the-box functionality quick...we assume telerik knows what they are doing and will implement features to the best of their ability.  Some developers might not be able to create or implement a proper sprite...which is why you guys should step in and show how it's done.

    4 is a wish list, but bloody hell, consider TWO...nobody will be mixing large and small icons, let alone enough to justify the 30k pricetag.

    If you want, I'll go in, split them up, and GIVE you the style positioning modifications if you guys are too busy to bother.
  7. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 14 Dec 2010 Link to this post

    Hello Steve,

    Saying that it is obvious we will not do that, I meant we will not do it a day or two before Q3 Service Pack 1 release. We will discuss your proposal in details and if we decide to implement it, we will do it in a future release - probably Q1 2011.

    Since the proposal for splitting the sprite in four pieces was your idea, I have asked you to share your opinion of how to split (distribute) the icons among the four sprites. Actually it will be between two sprites as the other two will be identical but with 24x24 icons. As splitting will not be available for the Service Pack, as an alternative we will create the sprites and CSS and they will be available to be implemented into a project as an external resource.

    All the best,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 14 Dec 2010 Link to this post

    Ahhh, okay thanks Bojo sorry for the confusion

    Can you please add this to PITS?  I'd like to set it as watched...
  9. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 15 Dec 2010 Link to this post

    Hi Steve,

    This is the PITS issue url: http://www.telerik.com/support/pits.aspx#/public/aspnet-ajax/4353.

    Best wishes,
    Bojo
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017