CSS in iOS?
- Keith Norman
Quick about me…
What’s good about CSS?
•

loose coupling between style and content

•

cleaner code

•

makes design changes simple

•

an...
Bad practice #1: putting style
code in view controllers
textLabel.font
textLabel.textColor
textLabel.backgroundColor

= [U...
Bad practice #2: using
Interface Builder
Demo
UIAppearance

Subview
SubSubview
[[UILabel appearance] setTextColor:[UIColor cyanColor]];
[[UILabel appearanceWhenContaine...
UISearchBar barTintColor UINavigationBar barTintColor
UINavigationBar tintColor
Note: Not “officially” supported by UIAppearance

[[UINavigationBar appearance] setTintColor:[UIC...
window tintColor trickles down to all subviews

- (void)tintColorDidChange {
self.backgroundColor = self.tintColor;
}
A bit about font
label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];

Custom font:
UIFontDescriptor *user...
Core Graphics
// PlayPauseButton.h

!
@interface PlayPauseButton : UIControl
!
@property (nonatomic, assign) PlayerState p...
Theme + “styleClass”
Bold
Not Bold
<p class="strong">Lost At Sea</p>
<p>The Squirrel Nut Zippers</p>
- (void)awakeFromNib {
self.albumName.styleClass = @"strongLabel";
}

[some magic happens]
and the text is bold
StyleClass Category
//

UIView+StyleClass.h

!
@interface UIView (StyleClass)
!
@property (nonatomic, strong) NSString
!

...
Theme class

@implementation Theme

!

+ (void)styleStrongLabel:(UILabel *)label {
UIFontDescriptor *descriptor =
[UIFontD...
menuItem.styleClass = @"myCollectionMenuItem";
menuItem.styleClass = @"recentlyPlayedMenuItem";
UIView+CSS
(highly experimental)
@interface UIView (CSS)

!

@property
@property
@property
@property
@property

!

(nonato...
Further reading
Classy - https://github.com/cloudkite/Classy
UISS - https://github.com/robertwijas/UISS
WWDC 2012 #216 and...
Style vs. Content and Clean Theming in iOS
Style vs. Content and Clean Theming in iOS
Style vs. Content and Clean Theming in iOS
Style vs. Content and Clean Theming in iOS
Style vs. Content and Clean Theming in iOS
Style vs. Content and Clean Theming in iOS
Upcoming SlideShare
Loading in …5
×

Style vs. Content and Clean Theming in iOS

1,149 views

Published on

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.

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,149
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Style vs. Content and Clean Theming in iOS

  1. 1. CSS in iOS? - Keith Norman
  2. 2. Quick about me…
  3. 3. 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?
  4. 4. 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>
  5. 5. Bad practice #2: using Interface Builder
  6. 6. Demo
  7. 7. 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!
  8. 8. UISearchBar barTintColor UINavigationBar barTintColor
  9. 9. UINavigationBar tintColor Note: Not “officially” supported by UIAppearance [[UINavigationBar appearance] setTintColor:[UIColor redColor]];
  10. 10. window tintColor trickles down to all subviews - (void)tintColorDidChange { self.backgroundColor = self.tintColor; }
  11. 11. 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
  12. 12. 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/
  13. 13. Theme + “styleClass” Bold Not Bold <p class="strong">Lost At Sea</p> <p>The Squirrel Nut Zippers</p>
  14. 14. - (void)awakeFromNib { self.albumName.styleClass = @"strongLabel"; } [some magic happens] and the text is bold
  15. 15. 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
  16. 16. 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
  17. 17. menuItem.styleClass = @"myCollectionMenuItem"; menuItem.styleClass = @"recentlyPlayedMenuItem";
  18. 18. 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];
  19. 19. 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

×