Fashion is your helper to share and reuse UI styles in a Swifty way.

Related tags

UI Fashion
Overview

Fashion

CI Status Version Carthage Compatible Swift License Platform

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

.red let label = UILabel() addSubview(label) // textColor => .blue ">
let button = UIButton() // let button = UIButton(styles: "custom-button")
button.apply(styles: Style.customButton) // backgroundColor => .red

let label = UILabel()
addSubview(label) // textColor => .blue

Stylesheet

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

{ label in label.backgroundColor = UIColor.black } label.apply(style: style) ">
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.

Comments
  • Swift version fixes

    Swift version fixes

    opened by RomanPodymov 3
  • Multiple styles

    Multiple styles

    This allows you to register multiple styles for the same strings. This is useful when grouping different styles ie (all these get shadows), and then setting other properties in other closures.

    This pull request also allows you to clear styles, and fixes some swift warnings

    opened by yonaskolb 3
  • fix(iOS) Address Xcode 13 issue: Swift libraries may fail to build for iOS targets that use armv7

    fix(iOS) Address Xcode 13 issue: Swift libraries may fail to build for iOS targets that use armv7

    This PR address an xcode 13 know issue. See release notes for Xcode 13

    Swift libraries may fail to build for iOS targets that use armv7. (74120874) Workaround: Increase the platform dependency of the package to v12 or later.

    opened by eduardo-miranda-deltatre 1
  • SwiftLint v0.18.1 Fixes

    SwiftLint v0.18.1 Fixes

    This PR adds a fix under SwiftLint v0.18.1 that was preventing this project from building under Carthage (& manually).

    It does introduce a breaking change on Swizzer.Kind in that all cases now start with a lowercase letter - this resolves the SwiftLint issue in question. This could alternatively be resolved by adding some // swiftlint:disable comments.

    opened by SimonRice 1
  • Improve: styles

    Improve: styles

    There are some changes that go to the next 3.0 release.

    1. Style and Stylist: rename applyTo to apply(to.
    2. Make swizzler internal because there is no reason to keep as a part of public API.
    3. Expose generic Style struct to create reusable, composable styles without registering them.
    opened by vadymmarkov 0
  • Changing styles in case of table cell selection not working

    Changing styles in case of table cell selection not working

    First of all, very thank you for this nice library.

    I tried to change the style of tableViewCell title when user selects the cell item. But, it doesn't seem to be changing the style.

    For e.g., In my custom cell,

        override func setHighlighted(_ highlighted: Bool, animated: Bool) {
            super.setHighlighted(highlighted, animated: animated)
            if (highlighted) {
                styles = LabelStyle.mainMenuCellSelected.rawValue
                highlightedView.isHidden = false
            } else {
                styles = LabelStyle.mainMenuCellNormal.rawValue
                highlightedView.isHidden = true
            }
        }
    

    It's not changing the style at all. Correct me If I missed anything obvious. Any help would be appreciated.

    opened by dinarajas 2
Releases(4.2.0)
Owner
Vadym Markov
iOS Software Engineer
Vadym Markov
A UI Helper for youtube-dl

使用第三方框架:youtube-dl, aria2 使用教程(现在太累了,之后补充详细 安装homebrew:/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Derek Jing 9 Feb 24, 2022
A panel component similar to the iOS Airpod battery panel or the Share Wi-Fi password panel.

A SwiftUI panel component similar to the iOS Airpod battery panel or the Share Wi-Fi password panel.

Red Davis 12 Feb 7, 2022
Custom emojis are a fun way to bring more life and customizability to your apps.

Custom emojis are a fun way to bring more life and customizability to your apps. They're available in some of the most popular apps, such as Slack, Di

Stream 240 Sep 5, 2022
Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle.

Twinkle ✨ Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle. This library creates several CAEmitterLayers and animate

patrick piemonte 599 Aug 11, 2022
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting

Features • Guides • Installation • Usage • Miscellaneous • Contributing ?? README is available in other languages: ???? . ???? . ???? . ???? . ???? To

Juanpe Catalán 11.5k Sep 21, 2022
List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model and doesn't depend on UI framework

SwiftListTreeDataSource List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model, so can

Dzmitry Antonenka 25 Sep 14, 2022
The Bloc Pattern is a way to separate UI and Logic in SwiftUI codes;

The Bloc Pattern is a way to separate UI and Logic in SwiftUI codes. The Bloc is like a state machine where it accepts an event and produce a state.

mehdi sohrabi 3 Apr 20, 2022
CITreeView created to implement and maintain that wanted TreeView structures for IOS platforms easy way

CITreeView CITreeView created to implement and maintain that wanted TreeView structures for IOS platforms easy way. CITreeView provides endless treevi

Cenk Işık 126 May 28, 2022
A way to quickly add a notification badge icon to any view. Make any view of a full-fledged animated notification center.

BadgeHub A way to quickly add a notification badge icon to any view. Demo/Example For demo: $ pod try BadgeHub To run the example project, clone the r

Jogendra 738 Aug 26, 2022
A better way to present a SFSafariViewController or start a ASWebAuthenticationSession in SwiftUI.

BetterSafariView A better way to present a SFSafariViewController or start a ASWebAuthenticationSession in SwiftUI. Contents Motivation Requirements U

Dongkyu Kim 360 Sep 18, 2022
An easy way to add a shimmering effect to any view with just one line of code. It is useful as an unobtrusive loading indicator.

LoadingShimmer An easy way to add a shimmering effect to any view with just single line of code. It is useful as an unobtrusive loading indicator. Thi

Jogendra 1.4k Sep 18, 2022
A simple way to hide the notch on the iPhone X

NotchKit NotchKit is a simple way to hide the notch on the iPhone X, and create a card-like interface for your apps. Inspired by this tweet from Sebas

Harshil Shah 1.8k Sep 13, 2022
DrawerKit lets an UIViewController modally present another UIViewController in a manner similar to the way Apple's Maps app works.

DrawerKit What is DrawerKit? DrawerKit is a custom view controller presentation mimicking the kind of behaviour in the Apple Maps app. It lets any vie

Babylon Health 772 Sep 5, 2022
ToastSwiftUI-master - A simple way to show a toast or a popup in SwiftUI

ToastSwiftUI-master - A simple way to show a toast or a popup in SwiftUI

Kushal Shingote 2 May 25, 2022
Lightweight touch visualization library in Swift. A single line of code and visualize your touches!

TouchVisualizer is a lightweight pure Swift implementation for visualising touches on the screen. Features Works with just a single line of code! Supp

Morita Naoki 846 Sep 9, 2022
Circular progress indicator for your macOS app

CircularProgress Circular progress indicator for your macOS app This package is used in production by apps like Gifski and HEIC Converter. Requirement

Sindre Sorhus 502 Sep 20, 2022
Show progress in your app's Dock icon

DockProgress Show progress in your app's Dock icon This package is used in production by the Gifski app. You might also like some of my other apps. Re

Sindre Sorhus 931 Sep 11, 2022
A child view controller framework that makes setting up your parent controllers as easy as pie.

Description Family is a child view controller framework that makes setting up your parent controllers as easy as pie. With a simple yet powerful publi

Christoffer Winterkvist 245 Sep 11, 2022
A fancy hexagonal layout for displaying data like your Apple Watch

Hexacon is a new way to display content in your app like the Apple Watch SpringBoard Highly inspired by the work of lmmenge. Special thanks to zenly f

Gautier Gédoux 336 Sep 9, 2022