Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Titanium-PixateFreestyle Module


The Titanium-PixateFreestyle module requires Titanium 3.0.0.GA or greater.

Installing the Module

Unzip the module into your project's modules directory or install it globally. See Using Titanium Modules for information on how to install the module globally.

Configuring tiapp.xml

You can use the Ti Studio interface to add the Pixate module into your project, or just edit the tiapp.xml file directly and add this to your section:

<module platform="iphone">com.pixate.framework</module>

Adding the PixateFreestyle Runtime Properties

To let PixateFreestyle configure itself for working with Titanium, you'll need to update your tiapp.xml file by adding this entry:


Styling your Controls

When creating a control, just use styleId, styleClass, and/or styleCSS. For example:

var label = Ti.UI.createLabel({
	styleCSS:'background-color: blue; color:white;'

var button1 = Titanium.UI.createButton({
	title:'I am a Button 1',

var button2 = Titanium.UI.createButton({
	title:'I am a Button 2',

If using Alloy, just set styleId, styleClass, and/or styleCSS (yes, you can inline CSS) in your XML:

	<Window class="container">
		<Label id="label" styleId="myLabel" onClick="doClick">Hello, World</Label>
		<Button id="button" styleCSS='background-color: blue; color: white;' onClick="doClick">Click Me</Button>


Add a default.css file into your project's Resources folder. For Alloy users, add the file directly inside your assets folder. Here's an example CSS file:

#myLabel {
 color: blue;
 background-color: linear-gradient(gray,yellow);

#myButton {
  background-color: linear-gradient(red,green);
  border-radius: 20;
  color: white;

#myButton2 {
  background-color: linear-gradient(red,white);
  border-radius: 20;
  color: white;

#myButton2:highlighted {
  background-color: linear-gradient(blue,yellow);
  border-radius: 20;
  color: red;

Alloy Users

You can use your .tss files to layout your controls, or you can use just the .css files to do so. If using .css for layout, your .tss file needs to either not set the layout property or set it to absolute.

".container": {
	layout: 'absolute'

Here's a sample .xml file:

	<Window class="container" styleId='container'>
		<Label id="label" styleId='myLabel' onClick="doClick">Hello, World</Label>
		<Button id="button" styleId='myButton' onClick="doClick">Click Me</Button>

With it's accompanying .css file:

#container {
	background-color: linear-gradient(black,white);

#myLabel {
    color: blue;
    background-color: yellow;
  	position: 0 200;
    size: 100;

#myButton {
	position: 0 100;
	size: 100 50;
	color: white;
	border-radius: 10;
	transform : rotate(45);
	background-color: linear-gradient(red,blue);

Build Instructions

If you'd like to build the module yourself, this is the simple process. After cloning this project, start by creating a symbolic link to the PixateFreestyle framework file from your PixateFreestyle distribution in the PixateFreestyle folder. For example:

cd PixateFreestyle
ln -s ~/Documents/PixateFreestyle/PixateFreestyle.framework

Now just run


The resulting zip file can found in the PixateFreestyle directory. You may need to update your titanium.xcconfig file with the location of your SDK and version.

Common Build errors

  • If you see an error that 'PixateFreestyle/PixateFreestyle' could not be found, then you may be missing the symbolic link to PixateFreestyle.framework or it may be pointing to an invalid location. This will also show as an error coming from CompileC
  • If you see an error about a missing "tools" module, then your TITANIUM_SDK environment variable may not be pointing to your Titanium installation. You can update the SDK path and version in the titanium.xcconfig file. Be sure to verify if your SDK has been installed in /Library/... versus ~/Library and update TITANIUM_SDK accordingly.
  • Xcode may need to be closed if you encounter CompileC errors

Mailing List & Twitter

Keep up with notifications and announcements by joining Pixate's mailing list and follow us on Twitter.


License for the included source is available in the accompanying LICENSE file.

You can’t perform that action at this time.