lejnieks

Externalizing CSS Text for Designer

Heres a quick and easy way to separate font styles from component styles which will allow ux teams to skin fonts independent of the development team or even independent of the encapsulating component itself. This all came up from a project im involved with right now requires a high regard to pixel perfect design, which meant a lot of back and forth between the ux team. Font rendering was clearly something that needed some direct tweaking from the ux guys. while I do think i have a pretty good eye for design, they are ultimately the ones who will sign off of subpixel font grid type fitting and so on. So now my goal was to separate as much of the text formatting from the components and hopefully normalize it as best as possible as well.

The separation and normalization went pretty well and reduced my css doc by about 1200 lines, however there were still elements of font control that i could not external, mostly in components like buttons. I didnt want to have the redundancy and overhead of

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

CustomButton
{
	font-family : 	"Myriad Pro Bold";
	font-weight :	normal;
	font-style : 	normal;
	font-size :	11;
	font-sharpness : 	0;
	font-thickness : 	0;
	letter-spacing :	.1;
	font-anti-alias-type :	advanced;
	font-grid-fit-type :	subpixel;
	text-align :	center;
	color :	#ff3300;
	textRollOverColor :	#ffffff;
	textSelectedColor :	#CC0000;
	fillAlphas : 1, 1, 1, 1;
	fillColors : #ffffff, #ffffff, #0099cc, #0099cc;
}

I was looking for a way to separate the design from the code in my styles similar to how the datagrid has references to text css

1

<mx:DataGrid headerStyleName="customHeaderStyleName"

so I looked around for a way to pull the text styles out of different components so the ux group can easily styles the different fonts in the application without having to worry about the actual component. After looking around I discovered most components can override the textStyle or similar such as

1
2
3
4
5
6
7
8
9
10
11
12
13

public class CustomButton extends Button
{
	public function CustomButton()
	{
		super();
	}
 
	override protected function commitProperties():void
	{
		var textFieldStyleName:String = getStyle("buttonLabelStyleName");
		textField.styleName = textFieldStyleName;
	}
}

this works exactly as i had hoped, now the ux group can set fonts independent of the components and spend the needed time exacting their fonts.

You can see a sample below, side click for the source.