Description
Fashion is your helper to share and reuse UI styles in a Swifty way. The
main goal is not to style your native apps in CSS, but use a set of convenience
helper functions to decouple your styles from a layout code, improving
customization and reusability. Also here we try to go beyond the UIAppearance
possibilities to customize appearance for all instance objects of the specified
type.
Table of Contents
Usage
Conventional way
Define styles in a stylesheet
enum Style: String, StringConvertible {
case customButton
var string: String {
return rawValue
}
}
final class MainStylesheet: Stylesheet {
func define() {
share { (label: UILabel) in
label.textColor = .blue
label.numberOfLines = 2
label.adjustsFontSizeToFitWidth = true
}
// register("custom-button") { (button: UIButton) in
register(Style.customButton) { (button: UIButton) in
button.backgroundColor = .red
button.setTitleColor(.white, for: .normal)
}
}
}Register a stylesheet
Fashion.register([MainStylesheet()])Apply a style
let button = UIButton() // let button = UIButton(styles: "custom-button")
button.apply(styles: Style.customButton) // backgroundColor => .red
let label = UILabel()
addSubview(label) // textColor => .blueStylesheet
Stylesheet is a protocol that helps you to organize your styles by registering
them in define method:
Register a style
// Registers stylization closure with the specified name.
register("card-view") { (view: UIView) in
view.backgroundColor = .white
view.layer.masksToBounds = false
view.layer.shadowColor = UIColor.black.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 0.5)
view.layer.shadowOpacity = 0.2
view.layer.cornerRadius = 8
}Unregister a style
// Unregisters stylization closure with the specified name.
unregister("card-view")Share a style
The style will be shared across all objects of this type, considering inheritance.
// All views will have red background color.
share { (view: UIView) in
view.backgroundColor = .red
}
// All table views will have white background color, it overrides the red
// background registered above.
share { (tableView: UITableView) in
tableView.backgroundColor = .white
tableView.tableFooterView = UIView(frame: CGRect.zero)
tableView.separatorStyle = .none
tableView.separatorInset = .zero
}Unshare a style
// Unregisters shared stylization closure for the specified type.
unshare(UITableView.self)UIAppearance
share is the recommended method to customize the appearance of class's
instances, but sometimes we still have to use UIAppearance because of
default styles set on the class’s appearance proxy when a view enters a window.
shareAppearance { (barButtonItem: UIBarButtonItem) in
barButtonItem.setTitleTextAttributes([
NSFontAttributeName : UIFont(name: "HelveticaNeue-Light", size: 12)!,
NSForegroundColorAttributeName : UIColor.red],
for: .normal)
}Stylist
When you register/share your styles in the Stylesheet all the actual work is
done by Stylist under the hood, so if you want more freedom it's possible
to use Stylist class directly. You can create a new instance Stylist() or
use the global variable Stylist.master which is used in stylesheets.
let stylist = Stylist()
stylist.register("card-view") { (view: UIView) in
view.backgroundColor = .white
view.layer.cornerRadius = 8
}
stylist.unregister("card-view")
stylist.share { (tableView: UITableView) in
tableView.backgroundColor = .white
tableView.tableFooterView = UIView(frame: .zero)
}
stylist.unshare(UITableView.self)Style
Use generic Style struct if you want to have more control on when, where and
how styles are applied in your app. Then you don't need to deal with style
keys, register or share closures.
let label = UILabel()
let style = Style<UILabel> { label in
label.backgroundColor = UIColor.black
label.textColor = UIColor.white
label.numberOfLines = 10
}
// The same as style.apply(to: label)
label.apply(style: style)It's also possible to create a style by composing multiple ones:
let label = UILabel()
let style1 = Style<UILabel> { label in
label.backgroundColor = UIColor.black
}
let style2 = Style<UILabel>{ label in
label.textColor = UIColor.white
}
let composedStyle = Style.compose(style1, style2)
// The same as composedStyle.apply(to: label)
label.apply(style: composedStyle)UIView extensions
It's super easy to apply previously registered styles with UIView extensions.
With convenience initializer
// A single style
let button = UIButton(styles: "custom-button")
// Multiple styles should be separated by a space
let label = UILabel(styles: "content-view cool-label")// The initialized also accepts StringConvertible, so something other
// than magic String could also be used
enum Style: String, StringConvertible {
case customButton
case contentView
case coolLabel
var string: String {
return rawValue
}
}
// A single style
let button = UIButton(styles: Style.customButton)
// Multiple styles
let label = UILabel(styles: [Style.contentView, Style.coolLabel])With apply functions
let label = UILabel()
// StringConvertible
label.apply(styles: Style.contentView, Style.coolLabel)
// String
label.apply(styles: "content-view", "cool-label")
// Style structs
let style = Style<UILabel> { label in
label.backgroundColor = UIColor.black
}
label.apply(style: style)With @IBInspectable property styles
let button = UIButton()
// A single style
button.styles = "custom-button"
// Multiple styles
button.styles = "content-view custom-button"Author
Vadym Markov, [email protected]
Installation
Fashion is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'Fashion'Fashion is also available through Carthage. To install just write into your Cartfile:
github "vadymmarkov/Fashion"Author
Vadym Markov, [email protected]
Contributing
We would love you to contribute to Fashion, check the CONTRIBUTING file for more info.
License
Fashion is available under the MIT license. See the LICENSE file for more info.