Gaikan gives you powerful styling capabilities using a declarative DSL in Swift. Inspired by React: CSS in JS and CSS modules.
To style UIView(s) just give them a StyleRule
object:
let myLabelStyle = StyleRule() { (inout style: StyleRule) -> () in
style.color = UIColor.redColor()
style.border = Border(width: 1, color: UIColor.greenColor())
style.font = UIFont(name: "Courier", size: 24)
}
self.label.styleInline = myLabelStyle
Check out the sample to see how to well integrate Gaikan into a project.
- Apply a simple style using
styleInline
.... - ... or make theming using
styleClass
(see below for more information). - You can share styles using
extends
method to avoid repeating yourself. - You can style depending on your control state (enabled, highlighted, ...).
Depending on your view type (UILabel, UIScrollView, UITextField, ...) some properties may or may not have any effect. Here are all the available style properties you can use:
Property name | Apply to | Description | Available since |
---|---|---|---|
Background | UIView | Sets a background to your view (color, gradient and or image) | 0.3 |
Border | UIView | Sets the layer Border | 0.1 |
Clip | UIView | Make the content of the view hidden if larger than the frame | 0.4 |
Color | UILabel | Sets the text color | 0.1 |
CornerRadius | UIView | Sets the view layer corner radius | 0.4 |
Font | UILabel | Sets the text font | 0.1 |
Opacity | UIView | Change the view alpha (0...1) | 0.4 |
TextAlign | UILabel | Text horizontal alignment | 0.2 |
TintColor | UIView | Sets the tint color | 0.1 |
Transform | UIview | Apply transforms (rotation, ...) | 0.4 |
Visible | UIView | Sets the view hidden property | 0.1 |
Starting with 0.4, we also added VirtualView
. This allow you to apply style effects on some non UIView
attributes/objects:
NSObject | Virtual view | Description | Available since |
---|---|---|---|
UINavigationBar | titleStyle | Sets title navigation bar style | 0.4 |
Gaikan can be installed either using CocoaPods or Carthage.
Run the following command from your project folder:
pod install Gaikan
Theme
packages together multiple Style
definitions to make a whole set.
public class SampleTheme : Theme {
/// Non static is important if you want to reference them from InterfaceBuilder
lazy let logo = Style(...)
lazy let title = Style(...)
}
class CustomView: UIView {
typealias ThemeType = RailTheme
@IBOutlet weak var title: UILabel!
@IBOutlet weak var footnote: UILabel!
@IBOutlet weak var logo: UIImageView!
@IBOutlet weak var button: UIButton!
override func awakeFromNib() {
self.title.styleClass = SampleTheme().logo
self.logo.styleClass = SampleTheme().title
}
}
You can also apply themes right from InterfaceBuilder:
You can extend your styles to reuse common features:
func primary() -> Style {
return [
.Color: UIColor.greenColor()
]
}
func large() -> Style {
return [
.Font: UIFont.systemFontOfSize(18)
]
}
func merged() -> Style {
return Style().extends(primary(), large())
// color: green, font: 18
}
You can define styles for states. They'll extend from the default state :
func style() -> Style {
return [
.TintColor: UIColor.whiteColor()
]
.state(.Selected, attributes: [
.TintColor: UIColor.grayColor().colorWithAlphaComponent(0.6)
]
}
Don't hesitate to take a look at the sample to better understand how it works.
This project was first developed by Xebia IT Architects in Paris, France with the ultimate goal of releasing it as Open Source Software. We will continue working and investing on it.
We encourage the community to contribute to the project by opening tickets and/or pull requests.
Gaikan is released under the MIT License. Please see the LICENSE file for details.