PoringKit

PoringKit is a style sheet management for read ashionUI style directly from JSON. Based on Fashion.

Installation

PoringKit is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "PoringKit"

Usage

To start using PoringKit you need to start load file name by call:

PoringKit.startStyle("ui.json") // if file is in main bundle
PoringKit.startStyle("ui.json", bundle: bundle) // if file is in specific bundle

One more interesting feature. PoringKit provide live update in simulator for development phase. to quick adjust ui style. by update JSON file and save. It will manage and update in simulator right on time. No need to rebuild project again. to start doing this, Load PoringKit by using fullpath of JSON file by call:

PoringKit.startLiveStyle("/Users/Awesome/PoringKit/ui.json")

PoringKit Support JSON format to customize ui elements. Using key to specify group of element (called 'style').

Here the example of JSON style sheet:

{
  "title_text": {
    "font_family": "avanir",
    "font_size": 22,
    "text_color": "dark_gray"
  },
  "primary_button": {
    "tint_color": "dark_gray"
  }
}

In this code element that define style as "title_text" will be set font name, font size and text color, and element that define style as "primary_button" will be set tint_color

Style

To define style in element, You can define via storyboard or define directly in code

button.styles = "primary_button"

You can also define multiple style in one element. Using space to separate each style.

Fonts

To use font in style. You need to define font value in fonts dictionary,

{
  "fonts": {
    "avenir": {
      "regular": "AvenirNext-Regular",
      "bold": "AvenirNext-Bold",
    }
  }
}

From example above. This style will know avenir font family with 2 font styles (regular and bold). After defined font family in fonts dictionary. You can use those font family and font style to apply in each elements.

{
  "primary_button": {
    "background_color": "white",
    "text_color": "#1092A8",
    "font_family": "avenir",
    "font_style": "bold",
    "font_size": 16
  }
}

This will apply AvenirNext-Bold in to primary_button style.

In case of font_style not define with font_family in element. It will use regular style in font_family instead. You can use default font family by define system and use following font_style:

• regular
• bold
• italic
• black
• heavy
• light
• medium
• semibold
• ultra_light

Share Style

Share style is a style that will apply all elements that inherit from specific type. For example, If you want all buttons to have same font name. Define font name property in shared style button.

Here, PoringKit have some of element to supported in list below:

• view
• button
• label
• image_view
• text_field
• text_view
• segmented_control
• navigation_bar
• tool_bar
• switch
• page_control
• table_view
• collection_view

Share Property

PoringKit also have some of share property to support in list below:

• font_family: Use to set font family to defined style for example :

{
  "shared": {
    "font_family": "avenir",
    "button": {
      "background_color": "white"
    }
  },
  "primary_button": {
    "border_color": "#0155C8",
    "border_radius": 1
  }
}

This style will apply to all of button elements will have background color as white, Elements that defined style as primary_button will have border color as blue (#0155C8) and border_radius as 1. And also have font family as avenir.

Variable

Some style need to be configure by using the same value. You can using variable to apply any duplicate value, For doing this you need to define variable name and value in constants dictionary. To use this constants use this variable name by start with '$' (Dollar Sign). In example below:

{
  "constants": {
    "marin": "#0157C3"
  },
  "monster_title": {
    "tint_color": "$marin"
  }
}

Property Type

PoringKit using JSON file to customize ui, There are some type of ui property are not support. So, PoringKit already created several type to support some ui components in list below

Color

String to represent color using Codable.

• Decodable extension for UIColor using DecodableColor class, Represent color, there are 2 ways to define color
• Hex Color: Hex color format (supported both 6 digits and 8 digits) ex. "#00FF00", "#FFFFFF50"
• Hex Color - Short Hex color short form format (supported both 3 digits and 4 digits) ex. "#AAA", "#FFFC"
• Predefined Color: Predefine color name. see supported color in this list below:
• red
• green
• blue
• light_gray
• dark_gray
• gray
• white
• black
• clear
• cyan
• magenta
• yellow
• orange
• brown
• purple

Element Property

UIView

Property	Type	Apply to
opacity	double	alpha
background_color	Color	backgroundColor
corner_radius	double	layer.cornerRadius
border_width	double	layer.borderWidth
border_color	Color	layer.borderColor
tint_color	Color	tintColor

UIButton / UIBarButton

Property	Type	Apply to
font_family	Font Family	titleLabel.font
font_style	Font Style	titleLabel.font
font_size	Double	titleLabel.font
text_alignment*	TextAlignment	titleLabel.textAlignment
text_color	Color	setFontColor(_, .normal)
text_color_selected	Color	setFontColor(_, .selected)
text_color_disabled	Color	setFontColor(_, .disabled)
text_color_highlighted	Color	setFontColor(_, .highlighted)

*UIBarButton does not have 'text_alignment' property

UILabel

Property	Type	Apply to
opacity	Double	alpha
background_color	Color	backgroundColor
corner_radius	Double	layer.cornerRadius
border_width	Double	layer.borderWidth
border_color	Color	layer.borderColor
tint_color	Color	tintColor
font_family	Font Family	titleLabel.font
font_style	Font Style	titleLabel.font
font_size	Int	titleLabel.font
text_alignment	TextAlignment	textAlignment

UITextField / UITextView

Property	Type	Apply to
opacity	Double	alpha
background_color	Color	backgroundColor
corner_radius	Double	layer.cornerRadius
border_width	Double	layer.borderWidth
border_color	Color	layer.borderColor
tint_color	Color	tintColor
font_family	Font Family	titleLabel.font
font_style	Font Style	titleLabel.font
font_size	Int	titleLabel.font
text_alignment	TextAlignment	textAlignment
keyboard_type	KeyboardType	keyboardType
border_style	TextBorderStyle	borderStyle

UIPageControl

Property	Type	Apply to
opacity	Double	alpha
color	Color	pageIndicatorTintColor
current_color	Color	currentPageIndicatorTintColor

UISegmentedControl

Property	Type	Apply to
opacity	Double	alpha
tint_color	Color	tintColor

UISwitch

Property	Type	Apply to
opacity	Double	alpha
active_color	Color	onTintColor
thumb_color	Color	thumbTintColor

UITableView

Property	Type	Apply to
opacity	Double	alpha
background_color	Color	backgroundColor
corner_radius	Double	layer.cornerRadius
border_width	Double	layer.borderWidth
border_color	Color	layer.borderColor
tint_color	Color	tintColor
separator_color	Color	separatorColor

UICollectionView

Property	Type	Apply to
opacity	Double	alpha
background_color	Color	backgroundColor
corner_radius	Double	layer.cornerRadius
border_width	Double	layer.borderWidth
border_color	Color	layer.borderColor
tint_color	Color	tintColor

UINavigationBar / UIToolBar

Property	Type	Apply to
tint_color	Color	tintColor
bar_color	Color	barColor
translucent	Boolean	translucent
font_family*	Font Family	titleTextAttribute[font], largeTitleTextAttribute[font]
font_style*	Font Style	titleTextAttribute[font], largeTitleTextAttribute[font]
font_size*	Int	titleTextAttribute[font]
large_font_size*	Int	largeTitleTextAttribute[font]

*UIToolBar does not have font relate properties

Custom Element

PoringKit support custom element to be style-able. Starting by add PoringStyleElement protocol into the class (Only support UIAppearance class). Next, implement apply function to style this element. In this function will receive JSON Data of element. You can use Codable in Swift 4 for extract JSON Data to JSON Object.

class CustomTextField: UITextField, PoringStyleElement {

  func apply(_ styleData: Data) {
    let style = try? JSONDecoder().decode(CustomTextFieldPoringStyle.self, from: styleData)
    text = style?.custom
  }

}

Change Log

• Version 1.0.0:
  • Initial version.
• Version 1.2.2:
  • Increase version to previous support.

Author

• Siwasit Anmahapong @bazaku
• Rawipon Srivibha @phoeniex
• Vadym Markov, @vadymmarkov - Fashion Developer