Introduction

The purpose of the BlowMindStyle library is to provide the infrastructure for application styling. BlowMindStyle allows:

• write reusable styles for views
• write reusable styles for text formatting (based on SemanticString)
• add application themes
• dynamically update views depending on trait collection and theme
• dynamically update views depending on a model state.

Basic usage

1. Add resources, that will be used for stylization:

struct ButtonProperties {
    var backgroundColor: UIColor?
    var cornerRadius: CGFloat?
    var titleColor: UIColor?
    var font: UIFont?
    var contentEdgeInsets: UIEdgeInsets?
}

2. Define style:

final class ButtonStyle<Environment: StyleEnvironmentType>: EnvironmentStyle<ButtonProperties, Environment> { }

3. Apply resources to view:

extension EnvironmentContext where Element: UIButton {
    var buttonStyle: StylableElement<ButtonStyle<StyleEnvironment>> {
        stylableElement { button, style, resources in
            button.setTitleColor(resources.titleColor, for: .normal)

            let cornerRadius = resources.cornerRadius ?? 0

            if let normalColor = resources.backgroundColor {
                let normalBackground = UIImage.resizableImage(withSolidColor: normalColor, cornerRadius: cornerRadius)

                button.setBackgroundImage(normalBackground, for: .normal)
            } else {
                button.setBackgroundImage(nil, for: .normal)
            }

            button.titleLabel?.font = resources.font ?? UIFont.systemFont(ofSize: UIFont.buttonFontSize)

            button.contentEdgeInsets = resources.contentEdgeInsets ?? .zero
        }
    }
}

4. Use style:

button.setUpStyles {
    $0.buttonStyle.apply(.primary)
}

For more info see tutorial

Dependencies

• RxSwift 5
• RxCocoa 5
• SemanticString

Installation

CocoaPods

# Podfile
use_frameworks!

target 'YOUR_TARGET_NAME' do
   pod 'BlowMindStyle'
end

Swift Package Manager

In XCode select File/Swift Packages/Add Package Dependency. Type 'BlowMindStyle', select BlowMindStyle project and click 'Next', 'Next'

Tutorial

0. Preparing the project
1. Creating your own style
2. Creating a theme
3. Switching styles according to the state
4. Text stylization