Yahoo! Flash(R) Blog

Yahoo! and Flex: Feel Good In Your Own Skin

Posted in "Flex" at 4:33 pm on December 13, 2007 by Allen Rabinovich |

Have you ever used Flex and felt that the default Flex component skin was a little too utilitarian, lacking just a bit in the visual appeal and shiny disposition departments? Well, allow us to fix that problem for you. Two of our Flash and UI gurus, Joe Magnani and Jeff Bennett of the Media Innovation Group, have just developed a beautiful new skin for all of the default Flex components. The skin (which can be seen here) matches the look and style of UI components used throughout Yahoo! and balances the outward glossiness with some serious usability chops. Naturally, we are making it available to all of you under the very liberal BSD license — which does mean that you can use it, modify it, and distribute it to your heart’s content.

Check out Jeff’s intro to developing your own skins for Flex components, and then grab the Yahoo! Flex Skin and use it in a Flex app! And when you do, drop us a note — we love to hear from you!

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!

26 Comments »

RSS feed for comments on this post. TrackBack URI

1. Great work Y! guys
   Jeff’s intro is excellent.

   
<!---
Copyright (c) 2007 Yahoo! Inc. All rights reserved.
The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license
//--->


   generates an error (Flex SDK 2 compiler on mac OS X)
   the triple dash is not allowed apparently. I removed them from both demoapp & yflexskin, and everything compiled fine. I hope this helps.

   Comment by Tim — December 13, 2007 #

2. Very cool! Is it okay if I add a link to this skin on the ScaleNine homepage? Nice work guys!

   Comment by Juan Sanchez — December 13, 2007 #

3. […] came across this skin for Flex via the Yahoo! Flash Blog. It’s a very clean looking theme created by Joe Magnani and Jeff Bennett of the Yahoo Media […]

   Pingback by ScaleNine Blog » Blog Archive » Yahoo Flex Skin Available — December 13, 2007 #

4. […] Check it out here. […]

   Pingback by Mike Chambers » Blog Archive » Yahoo Releases Sweet Flex Component Skin — December 13, 2007 #

5. […] love this. Yahoo just released their new Flex component skin that matches the visual look of their UI components. This is one of the benefits of Flex that I […]

   Pingback by eismann-sf » Yahoo Flex Skin — December 13, 2007 #

6. Very cool! Is it okay if I add a link to this skin on the ScaleNine homepage? Nice work guys!

   Hey, Juan - that would be great! Thanks!

   Comment by Allen Rabinovich — December 13, 2007 #

7. generates an error (Flex SDK 2 compiler on mac OS X) the triple dash is not allowed apparentlyI removed them from both demoapp & yflexskin, and everything compiled fine. I hope this helps.

   Hi Tim — thanks for finding that. We’ll get the fixed version of the example out tomorrow.

   Comment by Allen Rabinovich — December 13, 2007 #

8. […] Read More […]

   Pingback by .byte-sm’s blog - Leonardo Risuleo » Yahoo! and Flex: new component Skin — December 14, 2007 #

9. Thanks the hard work and for allowing us to view and use the skin!

   Comment by Thomas M — December 14, 2007 #

10. […] Related Links: Yahoo! and Flex: Feel Good In Your Own Skin […]

    Pingback by Suketu Vyas’s Blog » New Flex Skin form Yahoo! — December 14, 2007 #

11. Questions of visual appeal are almost always subjective. After looking at this skin my immediate reaction was YAAAAWWWWWNNNN. What I do appreciate is that Flex makes customizing component styles relatively easy.

    Comment by Jon R — December 14, 2007 #

12. Hello guys! the theme is just great, however I think i found a bug, not sure if it is a Flex bug or a theme bug…. I’m using right now Flex 3 beta 3 and i’m using a Panel with controlbar, inside the controlbar there are 3 buttons and when I publish the controlbar shows sometimes a blue line and the buttons also show a wierd behaviour… any idea?

    greetings!!

    Comment by Andrés Santos — December 19, 2007 #

13. very useful, much much more thanks

    Comment by rabboni — December 20, 2007 #

14. […] http://www.yswfblog.com/blog/2007/12/13/yahoo-and-flex-feel-good-in-your-own-skin/  […]

    Pingback by KinRou Blog » Flex skin — December 20, 2007 #

15. Hi,

    I’m seeing issues with Flex 3 beta 3 too. I see it when I tried a simple alert…

    creationComplete=”mx.controls.Alert.show(’Hello’)”

    …on the top-level Canvas tag in DemoApp.mxml

    Comment by Paul Bohnenkamp — December 20, 2007 #

16. I’m see issues as well AIR Beta 3. The up skin for the Button class appears to be 1 or 2 pixels too large and when moused over, the button appears to shrink a little. Any idea? I don’t have illustrator to change the file myself.

    Comment by Tom Esposito — January 9, 2008 #

17. […] http://www.yswfblog.com/blog/2007/12/13/yahoo-and-flex-feel-good-in-your-own-skin/ […]

    Pingback by improvise adapt overcome » Blog Archive » Crawling in my skin: Flex Skinning Links — January 17, 2008 #

18. Thanks for the new skin guys.. I used it in my last blog post:

    http://adamflater.blogspot.com/2008/01/simple-transitions-to-improve-user.html

    —
    Adam Flater
    Flex Developer
    Universal Mind

    Comment by Adam Flater — January 28, 2008 #

19. Really would like to use this skin, but like others the skin is showing weird bugs in Flex 3 Beta 3.

    Has anyone out there been able to fix this?

    Thanks ahead!

    Comment by John Trudel — February 7, 2008 #

20. yeah, animations are not working right in flex 3 beta 3, please help.

    Comment by bob — February 18, 2008 #

21. Nice skin! Thank you and go on!

    Comment by Dmitry — February 19, 2008 #

22. Just installed AIR 1.0 and the Alert boxes don’t work correctly. Seems like an issue with the inherited Panel styles.

    Comment by Tom Esposito — March 1, 2008 #

23. Anyone else finding mx:Panel titles with this Yahoo! skin (Flex 3) are not appearing right? The background color gets cut off and the content of the panel gets pushed up *into* the panel title/header area.

    Comment by Chris — April 1, 2008 #

24. Hi,
    Also having problems using this skin with Flex 3. The Alert box looks very weird. The alert message overlaps the title for instance. Also having similar problems with the Panels?

    Is it a problem with the scale-9 grid? Please suggest how to rectify this?

    Kind Regards,
    San

    Comment by san — April 25, 2008 #

25. I was able to get this skin to work decently in Flex 3 by commenting-out the borderSkin line under the Panel declarations in yflexskin.css. It takes it back to the default panel border but I can live with that for now.

    Comment by Kevin F. — May 5, 2008 #

26. […] Myles he pointed me out to a few resources that have “skined” UI components for Flex. This one from Yahoo looks like what Grooveshark based their design off of. Here is another link to some more […]

    Pingback by The Flash Art of War » Blog Archive » Nice Flex Site — May 11, 2008 #

Leave a comment