Subscribe to UISS mailing list.

What is UISS?

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.

What UISS can do for you?

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.

Design goal

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.

But how does it really look?

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]
	    }
	}
}

Install

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

Configure UISS

Local

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.

Remote

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"]];

Live updates

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;

Status bar

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.

Console

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

Syntax

Axis parameters

Containment

Converters

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.

Colors

Hex

"#ffffff"

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

Default UIColor colors

"red"

[UIColor redColor]

"redColor"

[UIColor redColor]

Colors with pattern image

"patternImageName"

[UIColor colorWithPatternImage:@"patternImageName"]

RGB

[0, 255, 255]

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

Colors with alpha

["#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]

Images

Simple image with name:

"imageName"

[UIImage imageNamed:@"imageName"]

Resizable images:

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

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

Fonts

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]

TextAttributes

{
	"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];

Structures

CGSize

CGRect

UIEdgeInsets

UIOffset

CGPoint

UIKit Enums

UIBarMetrics

UIControlState

UISegmentedControlSegment

UIToolbarPosition

UISearchBarIcon

Variables

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"
	}
}

User Interface Idioms

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"
	    }
	}
}

Comments

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.