Chameleon für Nimbus

Gestern hat Jeff Verkoeyen in seinem Blog ein neues Feature für Nimbus angekündigt. Der Untertitel zu seinem Post lautet “Stop compiling. Start building.”

Chameleon brings real-time CSS styling to your iOS applications. Good bye long compile times. Good bye re-installs and good bye re-navigating to the changed view controller. Say hello to seeing your changes reflected in real time.

Kurzgesagt: Chameleon lauscht auf Änderungen in bestimmten .css Dateien und informiert die App (egal ob auf dem Simulator oder dem Gerät) darüber. Diese passt dann das Aussehen der App an die neuen Änderungen an. Der Vorteil daran ist vor allem bei großen Projekten sichtbar. Für kleine optische Änderungen muss nicht die ganze App noch einmal neu gebaut werden. Alle Änderungen sind wenige Sekunden später auf dem Gerät sichtbar.

Imagine this. As you are working on the app at your desk, the designer has an iPad propped up next to their laptop on the other end of the office. As you’re making modifications based on the new mocks the designer just sent you, the changes are being reflected in real time on the designer’s iPad. Talk about cool.

In der ersten Version, die derzeit (14.10.2011) noch nicht veröffentlicht ist, verfügt Chameleon (verständlicherweise) erst über wenige CSS Properties:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
UIView {
  border: <dimension> <ignored> <color> {view.layer.borderWidth view.layer.borderColor}
  border-color: <color>       {view.layer.borderColor}
  border-width: <dimension>   {view.layer.borderWidth}
  background-color: <color>   {view.backgroundColor}
  border-radius: <dimension>  {view.layer.cornerRadius}
  opacity: <number>             {view.alpha}
}

UINavigationBar {
  -ios-tint-color: <color>     {navBar.tintColor}
}

UILabel {
  color: <color>                  {label.textColor}

  font: <font-size> <font-name>   {label.font}
  font-size: <font-size>          {label.font}
  font-name: <font-name>          {label.font}

  /**
   * Can't be used in conjunction with font/font-name properties. Use the italic/bold font name
   * instead.
   */
  font-style: [italic|normal]     {label.font}
  font-weight: [bold|normal]      {label.font}

  text-align: [left|right|center] {label.textAlignment}

  text-shadow: <color> <x-offset> <y-offset> {label.shadowColor label.shadowOffset}

  -ios-line-break-mode: [wrap|character-wrap|clip|head-truncate|tail-truncate|middle-truncate] [label.lineBreakMode]
  -ios-number-of-lines: xx             {label.numberOfLines}
  -ios-minimum-font-size: <font-size>  {label.minimumFontSize}
  -ios-adjusts-font-size: [true|false] {label.adjustsFontSizeToFitWidth}
  -ios-baseline-adjustment: [align-baselines|align-centers|none] {label.baselineAdjustment}
}

Das Potential in Chameleon ist enorm und lässt auf schnelles Wachstum hoffen. Auf jeden Fall ist es schön zu sehen, dass sich Nimbus entwickelt.