^{Artwork: Josef Čapek - 7. Povídání o pejskovi a kočičce (7/43)}

Styles

Styling framework that works

A declarative and type-safe framework for beautiful applications.

Table of Contents

• Features
• Requirements
• Examples
  • TextStyle
    • Updating TextStyle
    • Combining TextStyle
    • TextEffects
  • ViewStyle
    • Layer Properties
    • Updating ViewStyle
    • Combining ViewStyle
  • SwitchStyle
• Installation
• Contributions
• License
• Authors

Features

• declarative: You describe the style, framework will do the rest
• type-safe: Type system will help you describe your style
• plays nice with UIAppearance: In fact its designed for it.
• usable as settable property: Not only works as UIAppearance proxy, but also as settable property
• supports UIControl states and UITextField editing: You're gonna ❤︎ it.
• saves you from the NSAttributedString¹: Just work with Strings.
• text, color and layer properties: Custom line height, letter spacing, corners? Me gusta.
• supports Styles updating: Design base style for you app and update it on the fly as needed.
• Zeplin extension: Just copy styles over to your project. Super easy. Check out: https://github.com/inloop/styles-zeplin-extension

_{1: In some cases.}

Requirements

• iOS 10.0+
• Xcode 9.2+
• Swift 4.1+

Examples

For full set of feature examples refer to our wiki page.

TextStyle

leth1=TextStyle(.font(.preferredFont(forTextStyle:.largeTitle)),.foregroundColor(.black),.backgroundColor(.yellow),.letterSpacing(1.5),.paragraphStyle([.alignment(.natural),.lineSpacing(2.5)]),.strikethrought(TextDecoration(
style:.thick,
pattern:.dash
)),.underline(TextDecoration(
style:.single,
pattern:.dashDotDot,
byWord:true,
color:.red
)))UILabel.appearance().textStyle = h1
UIButton.appearance().setTextStyle(h1, for:.normal)

leth1=TextStyle(.font(.preferredFont(forTextStyle:.largeTitle)),.foregroundColor(.black),.backgroundColor(.yellow))
myLabel.textStyle = h1

Updating TextStyle

letfootnote=TextStyle(.font(.preferredFont(forTextStyle:.footnote)))letblueFootnote= footnote.updating(.foregroundColor(.blue))
myLabel.textStyle = blueFootnote

letblueFootnote=TextStyle(.font(.preferredFont(forTextStyle:.footnote)).foregroundColor(.blue))letredFootnote= blueFootnote.updating(.foregroundColor(.red))
myLabel.textStyle = redFootnote

Combining TextStyle

letblueFootnote=TextStyle(.font(.preferredFont(forTextStyle:.footnote)).foregroundColor(.blue))letyellowBackground=TextStyle(.backgroundColor(.yellow))
myLabel.textStyle = blueFootnote + yellowBackground

leth1=TextStyle(.font(.preferredFont(forTextStyle:.largeTitle)),.letterSpacing(1.5),.paragraphStyle([.alignment(.natural),.lineSpacing(2.5)]),.strikethrought(TextDecoration(
style:.thick,
pattern:.dash
)),.underline(TextDecoration(
style:.single,
pattern:.dashDotDot,
byWord:true,
color:.red
)))letblue=TextStyle(.foregroundColor(.blue))letyellowBackground=TextStyle(.backgroundColor(.yellow))letsecret=TextStyle(.writingDirectionOverrides([.rightToLeftOverride
]))lettitle= h1 + blue + yellowBackground
myLabel.textStyle = title
secretMessageLabel.textStyle = h1 + secret

TextEffects

letbigRed:TextStyle=...letbigGreen:TextStyle=...letsmallCyan:TextStyle=...letbigRedFirstWord=TextEffect(
style: bigRed,
matching:First(occurenceOf:"Styles"))letbigGreenLastWord=TextEffect(
style: bigGreen,
matching:Block{ $0.range(of:"awesome")})leteveryOtherTildaCyan=TextEffect(
style: smallCyan,
matching:Regex("~.*?(~)"))lettint=TextStyle(.foregroundColor(.red))letlogo:UIImage=...letlogoBeforeCompanyName=TextEffect(image: logo, style: tint, matching:First(occurenceOf:"INLOOPX"))letstyleWithEffects=TextStyle(.font(.preferredFont(forTextStyle:.body)),.backgroundColor(.yellow),
effects:[
bigRedFirstWord,
bigGreenLastWord,
everyOtherTildaCyan,
logoBeforeCompanyName
])

ViewStyle

letpill=ViewStyle(.cornerRadius(10),.borderWidth(3),.borderColor(.red),.opacity(0.8))UILabel.appearance().viewStyle = pill

letred=ViewStyle(.backgroundColor(.red),.tintColor(.red),.borderColor(.red),.borderWidth(0.5),.shadow(Shadow(
color:.red,
offset:UIOffset(horizontal:0, vertical:8),
radius:16)))letblue=ViewStyle(.borderColor(.blue),.borderWidth(0.5),.shadow(.none))UITextField.appearance().setViewStyle(red, for:.editing)UITextField.appearance().setViewStyle(blue, for:.inactive)UITextView.appearance().setViewStyle(red, for:.editing)UITextView.appearance().setViewStyle(blue, for:.inactive)

letblue=ViewStyle(.borderColor(.blue),.borderWidth(0.5),.cornerRadius(10))
myButton.viewStyle = blue

Layer properties

If you set any of [.borderColor, .borderWidth, .cornerRadius, .opacity, .shadow] properties for particular states to UITextView or UITextField, the Styles will require to match properties under the hood. If you don't do so the styling becomes invalid because layer properties are not reset when state is changed. It is up to you to define the style. Below is the example which produces assertion error and second snippet is valid configuration.

letredBorder=ViewStyle(.borderColor(.red),.borderWidth(1.5))letroundedCorners=ViewStyle(.cornerRadius(10))UITextField.appearance().setViewStyle(redBorder, for:.editing)
// It throws an assertion error
// because rounded corners is missing .borderColor & .borderWidth UITextField.appearance().setViewStyle(roundedCorners, for:.inactive)

letredRoundedBorder=ViewStyle(.borderColor(.red),.borderWidth(1.5),.cornerRadius(10))letredFlatBorder=ViewStyle(.borderColor(.red),.borderWidth(1.5),.cornerRadius(0))UITextField.appearance().setViewStyle(redRoundedBorder, for:.editing)UITextField.appearance().setViewStyle(redFlatBorder, for:.inactive)

Updating ViewStyle

letapp=ViewStyle(.borderWidth(0.5),.cornerRadius(10))letblue= app.updating(.borderColor(.blue))

letapp=ViewStyle(.borderWidth(0.5),.cornerRadius(radius:10))letthick= app.updating(.borderWidth(3))

Combining ViewStyle

letapp=ViewStyle(.borderWidth(0.5),.cornerRadius(10))letsemiVisible=ViewStyle(.opacity(0.5))
myLabel.viewStyle = app + semiVisible

letapp=ViewStyle(.borderWidth(0.5),.cornerRadius(10))letsemiVisible=ViewStyle(.opacity(0.5))letblue=ViewStyle(.backgroundColor(.blue))letlabelStyle= app + semiVisible + blue
myLabel.viewStyle = labelStyle

SwitchStyle

letprettySwitchStyle=SwitchStyle(.onTintColor(.red),.tintColor(.blue),.thumbTintColor(.yellow))
// style only one switch
mySwitch.switchStyle = prettySwitchStyle
// style all switches
UISwitch.appearance().switchStyle = prettySwitchStyle

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

CocoaPods 1.1+ is required to build Styles.

To integrate Styles into your Xcode project using CocoaPods, specify it in your Podfile:

source'https://github.com/CocoaPods/Specs.git'platform:ios,'10.0'use_frameworks!target'<Your Target Name>'dopod'Styles',:git=>'https://github.com/inloop/Styles.git'end

Then, run the following command:

$ pod install

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate Styles into your Xcode project using Carthage, specify it in your Cartfile:

github "inloop/Styles"

Run carthage update to build the framework and drag the built Styles.framework into your Xcode project.

Contributions

ARE WELCOME! 🖖

License

Styles is available under the MIT license. See the LICENSE file for more info.

Authors

Radim Halfar	Jakub Petrik	Matěj Děcký

_{Built with ❤︎ at INLOOPX}