Wednesday, January 24, 2007

Napkin skins, stage one: CSS styles and graphical skins

Quite a bit can be done using only CSS and graphical skins (click on the screenshot to see the app):

If you look at the source -- you can see the source files by selecting View Source from the app's context menu -- you will see that the MXML file only contains one new line:
    <mx:Style source="scrawl2.css"/>
The rest of the work is done by the CSS stylesheet. The font has been changed to AEnigma Scrawl (the font file is in the source tree under /assets, as are the images mentioned below) using the font declaration
    @font-face
{
font-family: scrawlFont;
src: url("assets/aescrawl.ttf");
font-weight: normal;
}
which is referenced in most cases by setting the style
    font-family: scrawlFont;
except for the DataGrid headers, which use the .Scrawl style declaration and
    header-drag-proxy-style-name: Scrawl;
header-style-name: Scrawl;
The background uses the napkin image from the Napkin L&F itself:
    background-image: Embed('assets/napkin.jpg');
and stretches to fill the background:
    background-size: '100%';
But, in order for the DataGrid to show us that background, we need to disable the alternating row colors:
    alternating-item-colors: ClassReference(null);
The DataGrid headers are still opaque; there's nothing we can do about it using only CSS as far as I know, but by the end of the third stage this will also be fixed.

Other graphical skins that are embedded in this version: the horizontal and vertical dividers and the DataGrid's sort arrow:
    divider-skin: Embed('assets/box_divider.gif');
sort-arrow-skin: Embed('assets/sort_arrow.gif');
The stylesheet also sets up the color styles for the components, as well as the border thickness for the DataGrid, in preparation for further skinning in the next stages.

Note: If you are looking to reuse the assets shown here, check out assets/aenigmascrawl.txt and assets/napkin.txt in the source view for the terms governing the use of AEnigma Scrawl font and the napkin (and postit) images. Thanks are due to Brian Kent and Ken Arnold for clarifying these terms for me and for creating these in the first place! The box divider and sort arrow are my creations and are, sadly, close to the limit of my graphical design ability. If you want to use either of those, knock yourself out. ;-)

5 comments:

Juan Sanchez said...

I really like this skin. I was just about to start creating one very similar to it. Are you going to create skins for all the components? If you finish a complete theme I could feature it on my site http://www.scalenine.com and have it link to your blog.

Great job.

Juan

James Whittaker said...

Interesting I like what you have done. I have written a little article over at FlexDeveloper.eu
about using SWFs as skins for your application. Its the first of many article / tutorials I aim to do. You can see the article here

Eylon said...

I'm glad people like this skin. :-)

Juan: I'm not planning to create a complete theme with skins for all components at this time. Thanks for linking here!

James: I didn't know you could do that -- it would be a good choice if I were to make the ScrollBar's arrow skin a graphical instead of programmatic skin.

Anonymous said...

Very Cool Skin. These LookandFeels I thought only available for Java.

Billigflug said...

It looks really, really stylish. Nice work!