Saturnboy
 2.8

Designing in Flex

,

Flex is awesome. In many ways, it’s the right tool for the job of bringing beautiful design to the web. I use flex every day at work, and also at home on my own fun projects. Today’s challenge is to take a very simple blog design and re-implement it in flex.

In The Red Corner

I’ll start with my simple two-column blog design that I like to call Circles of Doom. The original design was done in Inkscape, and assembled for the web using Blueprint CSS. You can read all the gory details of the design and assembly in a series of earlier posts: part 1, part 2, part 3, part 4.

Skipping right to the end result, you can view the final results here:

 

In The Blue Corner

Flex provides a lot of design leverage with its support for fills & strokes, gradients, rounded corners, and filters like drop shadow and glow. The original html design required the use of images to handle these features, but Flex’s CSS is powerful enough to handle everything with the exception of the blood red background circles.

The design architecture can be thought of as a simple three layer structure show here:

flex layers diagram

The bottom layer has the blood red background circle image. It is absolutely positioned vertically (y="-65") and horizontally centered (x="{(this.width - 950)/2}"). Like this:

<mx:Image source="@Embed(source='assets/circ.png')"
        x="{(this.width - 950)/2}" y="-65" />

The middle layer has the main box with rounded corners and a black glow. Like this:

<mx:VBox width="870" x="{(this.width - 870)/2}" y="130" styleName="body">
    <mx:filters>
        <mx:GlowFilter blurX="22" blurY="22" color="#111111" alpha="0.6" />
    </mx:filters>
</mx:VBox>

And the Flex CSS:

VBox.body {
	horizontalAlign: center;
	backgroundColor: #ffffff;
	borderStyle: solid;
	borderThickness: 10;
	borderColor: #886655;
	cornerRadius: 28;
	verticalGap: 10;
	paddingTop: 20; paddingBottom: 4;
}

And the top layer has the main content, sidebar & sidebar content, and footer. Like this:

<mx:Canvas width="790">
    <mx:Text text="main" width="590" styleName="contentTxt" />
 
    <mx:VBox width="190" x="600" styleName="sidebar">
        <mx:Text text="sidebar" width="100%" styleName="sidebarTxt" />
    </mx:VBox>
</mx:Canvas>
 
<mx:Text textg="footer" styleName="footerTxt" />

And the associated Flex CSS:

Text.contentTxt {
	fontFamily: Arial;
	fontSize: 12;
	fontWeight: normal;
	color: #000000;
}
 
VBox.sidebar {
	backgroundColor: #aa1100;
	borderStyle: solid;
	borderThickness: 2;
	borderColor: #ff2200;
	cornerRadius: 12;
	paddingLeft: 10; paddingRight: 10;
	paddingTop: 10; paddingBottom: 10;
}
 
Text.sidebarTxt {
	fontFamily: Arial;
	fontSize: 12;
	fontWeight: normal;
	color: #ffffff;
}
 
Text.footerTxt {
	fontFamily: Arial;
	fontSize: 10;
	fontWeight: normal;
	color: #886655;
}
The Result

Put it all together with some dummy Lorem ipsum text and you get a decent looking Flex blog design (just right-click, and select “view source” to see the code). It compares favorably to the original html design. The only obvious difference is the browser font rendering versus Flex’s font rendering.

The Files

Comments are closed

© 2017 saturnboy.com