From Groupon Mobile Tech Talks on 2/27/2014 - a web developers approach to CSS-like separation between style and content in native iOS apps.

1. CSS in iOS?
- Keith Norman

2. Quick about me…

8. What’s good about CSS?
•
loose coupling between style and content
•
cleaner code
•
makes design changes simple
•
and redesigns feasible (iOS 7?)
•
Come on, does this slide really need to exist?

9. Bad practice #1: putting style
code in view controllers
textLabel.font
textLabel.textColor
textLabel.backgroundColor
= [UIFont fontWithName:kOpenSansFont size:17];
= RGBCOLOR(51, 51, 51);
= [UIColor clearColor];
=
<p style="font: 15px opensans; color: rgba(51, 51, 51, 1); background: none;"></p>

10. Bad practice #2: using
Interface Builder

11. Demo

12. UIAppearance
Subview
SubSubview
[[UILabel appearance] setTextColor:[UIColor cyanColor]];
[[UILabel appearanceWhenContainedIn:
[Subview class], nil] setTextColor:[UIColor redColor]];
[[UILabel appearanceWhenContainedIn:
[SubSubview class], [Subview class], nil] setTextColor:[UIColor greenColor]];
You can set these up in AppDelegate!

13. UISearchBar barTintColor UINavigationBar barTintColor

14. UINavigationBar tintColor
Note: Not “officially” supported by UIAppearance
[[UINavigationBar appearance] setTintColor:[UIColor redColor]];

15. window tintColor trickles down to all subviews
- (void)tintColorDidChange {
self.backgroundColor = self.tintColor;
}

16. A bit about font
label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
Custom font:
UIFontDescriptor *userFont =
[UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleBody];
float userFontSize = [userFont pointSize];
UIFont *font = [UIFont fontWithName:@"OpenSans" size:userFontSize];
Bold font:
UIFontDescriptor *descriptor =
[UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleCaption1];
descriptor = [descriptor fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold];
UIFont *font = [UIFont fontWithDescriptor:descriptor size:0];
[label setFont:font];
https://gist.github.com/nuthatch/7594460

17. Core Graphics
// PlayPauseButton.h
!
@interface PlayPauseButton : UIControl
!
@property (nonatomic, assign) PlayerState playState;
!
@property (nonatomic, strong) UIColor *controlButtonColor UI_APPEARANCE_SELECTOR;
!
@end
// PlayPauseButton.m
!
- (void)setControlButtonColor:(UIColor *)controlButtonColor {
_controlButtonColor = controlButtonColor;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, self.controlButtonColor.CGColor);
// ... draw icon ... //
}
PaintCode App (for learning Core Graphics)
http://www.paintcodeapp.com/

18. Theme + “styleClass”
Bold
Not Bold
<p class="strong">Lost At Sea</p>
<p>The Squirrel Nut Zippers</p>

19. - (void)awakeFromNib {
self.albumName.styleClass = @"strongLabel";
}
[some magic happens]
and the text is bold

20. StyleClass Category
//
UIView+StyleClass.h
!
@interface UIView (StyleClass)
!
@property (nonatomic, strong) NSString
!
*styleClass;
@end
//
UIView+StyleClass.m
!
@implementation UIView
!
@dynamic styleClass;
!
(StyleClass)
- (void)setStyleClass:(NSString *)styleClass {
NSString *selectorName = [@"style" stringByAppendingString:[NSString stringWithFormat:@“%@%@:",
[[styleClass substringToIndex:1] uppercaseString], [styleClass substringFromIndex:1]]];
SEL sel = NSSelectorFromString(selectorName);
if (class_getClassMethod([Theme class], sel) != NULL) {
[Theme performSelector:sel withObject:self];
}
}
!
@end

21. Theme class
@implementation Theme
!
+ (void)styleStrongLabel:(UILabel *)label {
UIFontDescriptor *descriptor =
[UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleCaption1];
descriptor = [descriptor fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold];
UIFont *font = [UIFont fontWithDescriptor:descriptor size:0];
[label setFont:font];
}
!
@end

22. menuItem.styleClass = @"myCollectionMenuItem";
menuItem.styleClass = @"recentlyPlayedMenuItem";

23. UIView+CSS
(highly experimental)
@interface UIView (CSS)
!
@property
@property
@property
@property
@property
!
(nonatomic,
(nonatomic,
(nonatomic,
(nonatomic,
(nonatomic,
strong)
strong)
strong)
strong)
strong)
CSSBorder *border UI_APPEARANCE_SELECTOR;
CSSBorder *borderTop UI_APPEARANCE_SELECTOR;
CSSBorder *borderBottom UI_APPEARANCE_SELECTOR;
CSSDropshadow *dropShadow UI_APPEARANCE_SELECTOR;
CSSBorderRadius *borderRadius UI_APPEARANCE_SELECTOR;
@end
CSSBorderRadius *borderRadius = [[CSSBorderRadius alloc] init];
borderRadius.radius = 15.0f;
[[AlbumCard appearance] setBorderRadius:borderRadius];

24. Further reading
Classy - https://github.com/cloudkite/Classy
UISS - https://github.com/robertwijas/UISS
WWDC 2012 #216 and 2013 #214!
https://developer.apple.com/wwdc/videos/
Record Collection!
https://github.com/keithnorm/RecordCollection