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. ;-)