StyleKit

Roadmap to Version 1

3 min readSep 30, 2016

photo credit sweeticecream.fr — editing by Mario Borg

StyleKit is a micro-framework written in Swift that enables you to style your iOS applications using a simple JSON file. Behind the scenes, StyleKit uses UIAppearance and some selector magic to apply the styles.

While StyleKit is very powerful & flexible we feel that we’re not quite there yet. In order to reach version 1 we believe that the below features need to be implemented:

Better Test Coverage

The tests we have in place now are only checking whether JSON files are formatted properly. We need tests that make sure styles are being applied properly and that any errors are handled gracefully.

Travis CI

Travis CI will introduce stability and peace of mind when submitting pull requests, a hook needs to be setup so that every time a pull request is submitted or a commit is pushed the tests are executed automatically and a report of the result is generated.

Aliases

In keys and values we’re proposing the introduction of a reserved keyword ‘@’ that will be used to get and set aliases.

If a developer specifies ‘@primaryColor’ as a key then the value associated with the key will be stored as an alias with the name ‘@primaryColor’, if on the other hand a value of ‘@primaryColor’ is passed StyleKit will return the previously associated value.

{
 "@mainFont": "HelveticaNeue-Bold:20.0",
 "@primaryColor": "#000FFF",
 "UIButton": {
  "font": "@mainFont"
 },
 "MyApp.LoginView": {
  "UIButton": {
   "font": "HelveticaNeue-Light:25.0",
   "titleColor:normal": "@primaryColor"
  }
 }
}

Functions

In values we’re proposing the introduction of a set of reserved keywords that will serve as functions, by version 1 there will be a number of functions available:

ImageURL

{
 "@logoImageURL": "https://avatars1.githubusercontent.com/u/17726261",
 "MyApp.LoginView": {
  "MyApp.LogoView": {
   "backgroundImage": "ImageURL(@logoImageURL)"
  }
 }
}

Gradient

{
    "@primaryColor": "#641E16",
    "@secondaryColor": "#78281F",
    "MyApp.LoginView": {
        "backgroundColor": "Gradient(style: 'Horizontal', locations: [0.9, 1.0], colors: [@primaryColor, @secondaryColor])"
    }
}

Alpha

{
    "@primaryColor": "#641E16",
    "MyApp.LoginView": {
        "UILabel": {
            "tintColor": "@primaryColor"
        },
        "UIButton": {
            "backgroundColor": "Alpha(@primaryColor, 80)"
        }
    }
}

In addition to these functions StyleKit will also provide a function registry so developers can add their own custom functions.

Mixins

Mixins will give the ability to anyone styling the application to save and reuse styles. A mixin is created by treating an alias as a normal ‘Class’ that requires styling, StyleKit will then associate all the styles contained in the block to that alias. Mixins would then be used by setting the ‘mixins’ property that will be available on every component and passing in one or more aliases.

{
    "@primaryColor": "#641E16",
    "@secondaryColor": "#17202A",
    "@tertiaryColor": "#424949",
    "@textFieldStyle": {
        "font": "HelveticaNeue-Light:25.0",
        "color": "@primaryColor",
        "border": 0.5,
        "cornerRadius": 8.0
    },
    "MyApp.LoginView": {
        "MyApp.MainTextField": {
            "mixins": ["@textFieldStyle"],
            "backgroundColor": "@secondaryColor"
        },
        "MyApp.SecondaryTextField": {
            "mixins": ["@textFieldStyle"],
            "backgroundColor": "@tertiaryColor"
        }
    }
}

Live Reload

Live reload functionality will give developers the ability to reload styles at runtime. This enables developers to switch from one style to the other and opens up the possibility to create tools that hook up to the development environment and test styles on the fly without relaunching the application.

We’ve just released version 0.4.2 & 0.5 of StyleKit.

Version 0.4.2 can be built on both Swift 2.2 & Swift 2.3
Version 0.5 is Swift 3 compatible and will be the foundation for these features.