Classy Approach

Not CSS. Instead of trying to force UIKit to fit CSS syntax, properties, conventions and constructs. Classy is a stylesheet system built from the ground up to work in harmony with UIKit. It borrows the best ideas from CSS and introduces new syntax, conventions and constructs where appropriate.

Flexible, nestable syntax

Classy makes {   }   :   ; all optional so you can choose a style that suits you. It also saves you from worrying about small syntax mistakes like accidentally forgetting to end a line with a ;

You can use {   }   :   ; to delimit your stylesheets

$main-color = #e1e1e1;

MYCustomView {
  background-color: $main-color;
  title-insets: 5, 10, 5, 10;
  > UIProgressView.tinted {
    progress-tint-color: black;
    track-tint-color: yellow;
  }
}

^UIButton.warning, UIView.warning ^UIButton {
  title-color[state:highlighted]: #e3e3e3;
}

OR you can use whitespace to delimit your sytlesheets

$main-color = #e1e1e1

MYCustomView 
  background-color $main-color
  title-insets 5, 10, 5, 10
  > UIProgressView.tinted 
    progress-tint-color black
    track-tint-color yellow

^UIButton.warning, UIView.warning ^UIButton 
  title-color[state:highlighted] #e3e3e3

Installing Classy

The recommended method of integrating Classy into your project is using cocoapods

Add Classy to your Podfile

pod 'Classy'

Run pod install from your command line

$ pod install

Bootstrapping Classy

Beginning with release v0.2.5, Classy must be manually bootstrapped.

If your main UIWindow is loaded from a XIB or storyboard you should bootstrap Classy in your main.m file inside the int main(int argc, char * argv[]) method. This ensures your stylesheet is loaded before any windows are created.

Otherwise you can bootstrap it in your AppDelegate.m in - (BOOL)application:didFinishLaunchingWithOptions: before you create your main UIWindow.

Add the following:

[CASStyler bootstrapClassyWithTargetWindows:UIApplication.sharedApplication.windows];

Default Stylesheet

By default Classy will look for a file called stylesheet.cas in your application bundle. If you use this filename for your stylesheet file you don't need todo anything else

However if you want to use a different file path you can specify the filePath on [CASStyler defaultStyler]

[CASStyler defaultStyler].filePath = [[NSBundle mainBundle] pathForResource:@"myStyles.cas" ofType:nil];

If you want a reference to any errors that occurred while parsing you can use -(void)setFilePath:error: instead

NSError *error = nil;
NSString filePath = [[NSBundle mainBundle] pathForResource:@"myStyles.cas" ofType:nil];
[[CASStyler defaultStyler] setFilePath:filePath error:&error];

If your main UIWindow is loaded from a XIB or storyboard you should set the filePath in your main.m file inside the int main(int argc, char * argv[]) method. This ensures your stylesheet is loaded before any windows are created.

Otherwise you can set the filePath in your AppDelegate.m in - (BOOL)application:didFinishLaunchingWithOptions: before you create your main UIWindow.

Note that these routines should be performed after Classy is bootstrapped. See the bootstrapping section above.

Live Reload

Live reload can dramatically reduce your development time; with live reload enabled you can instantenously see your stylesheet changes. Without having to rebuild and navigate back to the same spot within your app.

To enable live reload you need to specify the absolute path to your stylesheet. You should only set this value when running from the simulator.

#if TARGET_IPHONE_SIMULATOR
    [CASStyler defaultStyler].watchFilePath = @"/users/Bonno/Projects/MyApp/Styles/stylesheet.cas";
#endif

Relative Path

However this path will be different across different computers. Classy provides a convienent macro which will grab the absolute path relative to the current file. So if we are setting the watchFilePath in MYAppDelegate.m and Imagine we have the following absolute paths.

MYAppDelegate.m: /users/Bonno/Projects/MyApp/Classes/MYAppDelegate.m

stylesheet.cas:        /users/Bonno/Projects/MyApp/Styles/stylesheet.cas

Then we can use CASAbsoluteFilePath() determine the absolute path, with the relative path between "MYAppDelegate.m" and "stylesheet.cas"

#if TARGET_IPHONE_SIMULATOR
    NSString *absoluteFilePath = CASAbsoluteFilePath(@"../Styles/stylesheet.cas");
    [CASStyler defaultStyler].watchFilePath = absoluteFilePath;
#endif

Some changes may require rebuilding and running your app.

One thing to keep in mind is that Classy does not keep a history of changes that have been applied to views. Therefore deleting a style property such as background color, will seem to have no effect. You will need to overwrite the property to another value to see a change. This of course does not apply if you rebuild and run your app.