Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/robertwijas/UISS

UIAppearance Stylesheets
https://github.com/robertwijas/UISS

Last synced: 2 months ago
JSON representation

UIAppearance Stylesheets

Awesome Lists containing this project

README 

        
[Subscribe to UISS mailing list.](http://eepurl.com/bnNaq1)



# 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:



```objc

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

```



in UISS it looks like this:



```json

{

    "UITabBar": {

        "tintColor": "darkGray",

    }

}

```



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



```objc

[[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)];

```



```json

{

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



```objc

[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:



```objc

uiss.autoReloadEnabled = YES;

uiss.autoReloadTimeInterval = 1;

```



### Status bar



```objc

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



```json

"#ffffff"

```

```objc

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

````



#### Default UIColor colors



```json

"red"

```

```objc

[UIColor redColor]

````

```json

"redColor"

```

```objc

[UIColor redColor]

````



#### Colors with pattern image



```json

"patternImageName"

```

```objc

[UIColor colorWithPatternImage:@"patternImageName"]

````



#### RGB



```json

[0, 255, 255]

```

```objc

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

````



#### Colors with alpha



```json

["#ffffff", 0.5]

```

```objc

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

````

```json

["red", 0.5]

```

```objc

[[UIColor redColor] colorWithAlphaComponent:0.5f]

````

```json

[0, 255, 255, 0.5]

```

```objc

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

````



### Images



#### Simple image with name:



```json

"imageName"

```

```objc

[UIImage imageNamed:@"imageName"]

````



#### Resizable images:



```json

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

```

```objc

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

````



### Fonts



```json

14

```

```objc

[UIFont systemFontOfSize:14.0f]

````

```json

["bold", 14]

```

```objc

[UIFont boldSystemFontOfSize:14.0f]

````

```json

["italic", 20]

```

```objc

[UIFont italicSystemFontOfSize:14.0f]

````

```json

["Georgia-Italic", 12]

```

```objc

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

````



### TextAttributes



```json

{

	"font": ["bold", 12],

	"textColor": "black",

	"textShadowColor": "lightGray",

	"textShadowOffset": [1, 2]

}

```

```objc

[NSDictionary dictionaryWithObjectsAndKeys:

 [UIFont boldSystemFontOfSize:12], UITextAttributeFont,

 [UIColor blackColor], UITextAttributeTextColor,

 [UIColor lightGrayColor], UITextAttributeTextShadowColor,

 [NSValue valueWithUIOffset:UIOffsetMake(1, 2)], UITextAttributeTextShadowOffset, nil];

````



### Structures



#### CGSize



| JSON | Objective-C |

-------|--------------

| ```1``` | ```CGSizeMake(1, 1)``` |

| ```[1]``` | ```CGSizeMake(1, 1)``` |

| ```[1, 2]``` | ```CGSizeMake(1, 2)``` |



#### CGRect



| JSON | Objective-C |

-------|--------------

| ```[1, 2, 3, 4]``` | ```CGRectMake(1, 2, 3, 4)``` |



#### UIEdgeInsets



| JSON | Objective-C |

-------|--------------

| ```[1, 2, 3, 4]``` | ```UIEdgeInsetsMake(1, 2, 3, 4)``` |



#### UIOffset



| JSON | Objective-C |

-------|--------------

| ```1``` | ```UIOffsetMake(1, 1)``` |

| ```[1]``` | ```UIOffsetMake(1, 1)``` |

| ```[1, 2]``` | ```UIOffsetMake(1, 2)``` |



#### CGPoint



| JSON | Objective-C |

-------|--------------

| ```1``` | ```CGPointMake(1, 1)``` |

| ```[1]``` | ```CGPointMake(1, 1)``` |

| ```[1, 2]``` | ```CGPointMake(1, 2)``` |



### UIKit Enums



#### UIBarMetrics



| JSON | Objective-C |

-------|--------------

| ```default``` | ```UIBarMetricsDefault``` |

| ```landscapePhone``` | ```UIBarMetricsLandscapePhone``` |



#### UIControlState



| JSON | Objective-C |

-------|--------------

| ```normal``` | ```UIControlStateNormal``` |

| ```highlighted``` | ```UIControlStateHighlighted``` |

| ```disabled``` | ```UIControlStateDisabled``` |

| ```selected``` | ```UIControlStateSelected``` |

| ```reserved``` | ```UIControlStateReserved``` |

| ```application``` | ```UIControlStateApplication``` |



#### UISegmentedControlSegment



| JSON | Objective-C |

-------|--------------

| ```any``` | ```UISegmentedControlSegmentAny``` |

| ```left``` | ```UISegmentedControlSegmentLeft``` |

| ```center``` | ```UISegmentedControlSegmentCenter``` |

| ```right``` | ```UISegmentedControlSegmentRight``` |

| ```alone``` | ```UISegmentedControlSegmentAlone``` |



#### UIToolbarPosition



| JSON | Objective-C |

-------|--------------

| ```any``` | ```UIToolbarPositionAny``` |

| ```bottom``` | ```UIToolbarPositionBottom``` |

| ```top``` | ```UIToolbarPositionTop``` |



#### UISearchBarIcon



| JSON | Objective-C |

-------|--------------

| ```search``` | ```UISearchBarIconSearch``` |

| ```clear``` | ```UISearchBarIconClear``` |

| ```bookmark``` | ```UISearchBarIconBookmark``` |

| ```resultsList``` | ```UISearchBarIconResultsList``` |



## 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:



```json

{

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



```json

{

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



```json

{

	"UIToolbar": {

		"-tintColor": "blue",

		"backgroundImage:any:default": "background"

	},

	"-UITabbar": {

		"tintColor": "blue"

	}

}

```



This will only set _UIToolbar's_ background image.