Fill Colors: Flex CSS styles and skins

It’s happened to all of us. At first, the default Flex style looked nice. But after a while, we started wishing the gray background would go away and wondering whether our Flex applications will always look so… alike. Fill Colors wants to show that Flex applications can completely change their look and feel and are not limited to the Flex default styles.

Fill Colors is an invitation to designers and developers to show their Flex skins. It is also an invitation to take Flex skinning to the next level. We expect you to push the limits of Flex skinning and to test your own skills while creating your design.

Fill Colors is modeled around the idea that a developer creates a functional application and a designer creates the look and feel for it. One of the two, or a third person, needs to apply this design to the application. Even if all of this is done by the same person, having this separation allows the developer to be able to change the look and feel at any point during development or after. We are not saying that the developer that writes the application has no idea how it will look like in the end, but rather that establishing this separation makes it easier to work with other developers and designers and makes it easier to be able to make changes in the future. 

Fill Colors’ inspiration is the classic CSS Zen Garden. You are probably familiar with the same idea applied to HTML and CSS. It is widely known that drastic changes in design can be achieved by simply switching styles sheets. However, not all HTML pages can easily change look and feel. If the HTML code behind the page was not well thought out, style names and ids were not in place and everything was laid out with tables, or colors and backgrounds were applied “inline”, it is much more difficult or close to impossible to be able to change how this page looks. As you can imagine, the same principle applies to changing style sheets to Flex applications. If the buttons have their icon images embedded inline, its colors, font, etc., all defined within the buttons themselves, it will be very hard to be able to change them from the style sheet alone. That is where the separation between style and the actual components becomes so important. As a side note, unlike HTML, you can still overwrite many of the inline attributes with Flex programmatic skins.

So how can you do it? Skinning a Flex application can be done by creating style sheets or by creating custom programmatic skins. Fill Colors application allows for both of these techniques to be used. Creating programmatic skins is not necessary unless you want to go beyond the regular styles provided by the Flex framework. But even if you create your own programmatic skin, you will probably still need to create style sheets.

Furthermore, Fill Colors allows you to also change some of the layout of the application in addition to the colors, fonts and graphics. Although this could not be always done, we added some of those properties to the styles. You can see the styles in the gallery for examples of this.

What more information? See how you can participate.

Thanks

We would like to acknowledge and thank Ely Greenfield for the use of some of his source code in our FillColors application. 

Disclaimer

Fill Colors Flex application isn’t really a full “RIA” and it can be argued that the same application could be done with HTML. In some aspects, it looks like a website more than an application. We are aware of this, but you must realize that the purpose of Fill Colors is not to showcase Flex and its richness but Flex and its ability to be fully skinned.

Also, Fill Colors doesn’t try to show best practices with regards of usability or code. In order to keep it simple, we did not add features that may have been useful to the user. In some other parts, we added controls that may not be the best choice, but we wanted to have a certain amount of variety of controls to skin. Lastly, Fill Colors’ code may not adhere to best practices. We tried to keep it simple so we used shortcuts (such as states) to get the job done. On the other hand, the code got more complex than it would normally be so that it would accommodate any future skin.