Subscribe to UISS mailing list.

UISS stands for UIKit Style Sheets.

UISS is an iOS library that provides you with a convenient way to define the style of your application. UISS is built on top of UIKit UIAppearance proxies.

UISS has the power to:

• replace unreadable UIAppearance code with a simple JSON dictionary,
• provide a way to change application style without the need to rebuild your code, without the need to restart your app, even without the need to reload your views - yep, this is the sexy feature of UISS.

UISS do not enforce any dependencies on your app. You can generate Objective-C code for your UISS style so you do not even have to link with UISS library in your production build.

Assuming you're familiar with UIAppearance proxy you probably wrote a piece of code similar to this one:

[[UITabBar appearance] setTintColor:[UIColor darkGrayColor]]

in UISS it looks like this:

{
    "UITabBar": {
        "tintColor": "darkGray",
    }
}

no big difference here, so lets look at more complex example:

[[UIButton appearance] setTitleColor:[[UIColor whiteColor] colorWithAlphaComponent:0.800]
                            forState:UIControlStateNormal];
[[UIButton appearance] setTitleColor:[UIColor whiteColor]
                            forState:UIControlStateHighlighted];
[[UIButton appearance] setBackgroundImage:[[UIImage imageNamed:@"button-background-normal"]
              resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 10.0, 0.0, 10.0)]
                                 forState:UIControlStateNormal];
[[UIButton appearance] setBackgroundImage:[[UIImage imageNamed:@"button-background-highlighted"]
              resizableImageWithCapInsets:UIEdgeInsetsMake(0.0, 10.0, 0.0, 10.0)]
                                 forState:UIControlStateHighlighted];
[[UILabel appearanceWhenContainedIn:[UIButton class], nil] setFont:[UIFont fontWithName:@"Copperplate-Bold" size:18.0]];
[[UIButton appearance] setTitleEdgeInsets:UIEdgeInsetsMake(1.0, 0.0, 0.0, 0.0)];

{
	"UIButton":{
	    "titleColor:normal":["white", 0.8],
	    "titleColor:highlighted":"white",
	    "backgroundImage:normal": ["button-background-normal", [0,10,0,10]],
	    "backgroundImage:highlighted": ["button-background-highlighted", [0,10,0,10]],
	    "titleEdgeInsets": [1,0,0,0],
	    "UILabel":{
	        "font":["Copperplate-Bold", 18]
	    }
	}
}

• get the code
• add UISS.xcodeproj to your project
• (optional) add UISSResource.bundle to your target

The simplest way to start with UISS is to create uiss.json file and add it to your project's resources. To activate this file add this line:

[UISS configureWithDefaultJSONFile];

This should be called before your views are displayed, the common place for that is your Application Delegate's didFinishLaunching method.

If you want to load your style from remote location to enable live updates, here's how to do that:

self.uiss = [UISS configureWithURL:[NSURL URLWithString:@"http://localhost/uiss.json"]];

UISS can detect if your style changed and automatically update your interface. To enable this feature call this method:

uiss.autoReloadEnabled = YES;
uiss.autoReloadTimeInterval = 1;

uiss.statusWindowEnabled = YES;

UISS will take a small portion of the screen (usually taken by status bar) to show you what is going on behind the scenes.

Tapping on UISS status bar will present console view where:

• you can get info about errors in your style
• you can generate UIAppearance code for your style

UISS has value converters for every type used to set UIAppearance properties. These converters provide useful shortcuts and convinient syntax for defining your properties.

Here are some examples and eqivalent values in Objective-C code.

"#ffffff"

[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:1]

"red"

[UIColor redColor]

"redColor"

[UIColor redColor]

"patternImageName"

[UIColor colorWithPatternImage:@"patternImageName"]

[0, 255, 255]

[UIColor colorWithRed:0.0f green:1.0f blue:1.0f alpha:1.0f]

["#ffffff", 0.5]

[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:.0.5f]

["red", 0.5]

[[UIColor redColor] colorWithAlphaComponent:0.5f]

[0, 255, 255, 0.5]

[UIColor colorWithRed:0.0f green:1.0f blue:1.0f alpha:.0.5f]

"imageName"

[UIImage imageNamed:@"imageName"]

["imageName", 1, 2, 3, 4]

[[UIImage imageNamed:@"imageName"] resizableImageWithCapInsets:UIEdgeInsetsMake(1, 2, 3, 4)]

14

[UIFont systemFontOfSize:14.0f]

["bold", 14]

[UIFont boldSystemFontOfSize:14.0f]

["italic", 20]

[UIFont italicSystemFontOfSize:14.0f]

["Georgia-Italic", 12]

[UIFont fontWithName:@"Georgia-Italic" size:12.0f]

{
	"font": ["bold", 12],
	"textColor": "black",
	"textShadowColor": "lightGray",
	"textShadowOffset": [1, 2]
}

[NSDictionary dictionaryWithObjectsAndKeys:
 [UIFont boldSystemFontOfSize:12], UITextAttributeFont,
 [UIColor blackColor], UITextAttributeTextColor,
 [UIColor lightGrayColor], UITextAttributeTextShadowColor,
 [NSValue valueWithUIOffset:UIOffsetMake(1, 2)], UITextAttributeTextShadowOffset, nil];

You can define variables that can be used in your UISS style. All variables shoud be defined under Variables key in your style dictionary. To reference a variable prefix its name with $ sign.

Example:

{
	"Variables": {
		"tintColor": "red"
	},

	"UIToolbar": {
		"tintColor": "$tintColor"
	}
}

Sometimes you want to have a slightly different look on the iPhone from the one you have on the iPad. With UISS you can create parts of style that apply only to a specified UI Idiom.

{
	"UINavigationBar": {
	    "Phone": {
	        "tintColor": "gray"
	    },
	    "Pad": {
	        "tintColor": "lightGray"
	    }
	}
}

JSON specification doesn't support comments. But sometimes being able to easly disable some parts of your UISS style can be really useful. You can do that by adding - prefix to dictionary keys. UISS will ignore those keys without reporting errors.

Example:

{
	"UIToolbar": {
		"-tintColor": "blue",
		"backgroundImage:any:default": "background"
	},
	"-UITabbar": {
		"tintColor": "blue"
	}
}

This will only set UIToolbar's background image.