App design is an evolving space and it seems a lot of publishers are recognising the importance of having a good design. The best part of the evolution is the companies that are springing up to make the journey to great app design easier.

One of such companies that promises to make that journey easier is Pixate and I have been following their progress since the launch on Kickstarter a while back.

The Pixate Engine lets you style your iOS controls using stylesheets. If you are at home with CSS, you will love using the engine.

At App Design Vault, we have got the best app design templates on the Internet :-). So we decided to give you a head start by making one of our templates available to you to download, tweak and make your app rock.

Also, what better way to put the engine through its paces than to implement one of our templates using the Pixate Engine?

The guinea pig in this case is the Metropolitan template. You can find out more about it here. I am going to show you how the UI was transformed and the code behind.

At the end, you will be able to download a free sample

Styling colours and fonts

The first easy win with Pixate is it allows you style the colors and fonts for your controls. Here you see the original header bar of the Metropolitan template looking all drab with the gray and standard Helvetica font.

After setting appropriate style Id’s and style Class’s in the project (either in Xcode’s Interface Builder or directly in the source code), and after implementing some styling in the CSS below, the colour of the view has been changed. The font used is now “Open Sans” and the menu items have been styled be bold and smaller.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.header-bar {
  background-color: #288de3;
}
 
.header-title {
  background-color: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Open Sans";
  font-weight: light;
}
 
.header-button {
  background-color: none;
  color: white;
  font-family: "Open Sans";
}

Styling Shadows And Backgrounds

The items in the UITableViewCell have also been styled. You will see a subtle shadow behind the cells. This is achieved using the box shadows.

See the CSS below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.product-name {
    color: rgb(20%, 20%, 20%);
    font-family: "Open Sans";
    font-size: 17px;
}
 
.product-price {
    color: #288de3;
    font-family: "Open Sans";
    font-size: 17px;
    font-weight: bold;
}
 
#product-bottom-line {
    background-color: #288de3;
}
 
#product-bottom-view {
    background-color: white;
}
 
.product-view-shadow {
    box-shadow: 1 1 3 #aaa;
}

Styling UIControls

Another nice feature of the Pixate Engine is the possibility of styling your UIControls. All of the major UIControls are supported. Here is a full list of controls that are supported. It is good to know that so many controls are supported out of the box because you now have the opportunity to make your entire app unique.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
#top-slider thumb {
  background-color: white;
  background-size: 30px 30px;
  border-radius: 14px 14px;
  border-color: rgba(192, 192, 192, 0.5);
  border-width: 2px;
}
 
#top-slider thumb:highlighted {
  background-color: #288de3;
  background-size: 30px 30px;
  border-radius: 14px 14px;
  border-color: rgba(192, 192, 192, 0.5);
  border-width: 2px;
}
 
#top-slider min-track {
  background-color: #288de3;
  background-size: 10px 10px;
  background-inset: 0px 5px;
  border-radius: 3px;
}
 
#top-slider max-track {
  background-color: rgba(192, 192, 192, 0.5);
  background-size: 10px 10px;
  background-inset: 0px 5px;
  border-radius: 3px;
}
 
navigation-bar {
    color: white;
    background-color: #288de3;
}
 
tab-bar {
    color: #288de3;
    selected-color: white;
    background-color: #288de3;
}
 
tab-bar-item {
    color: white;
    font-family: "Open Sans";
    font-weight: semibold;
    font-size: 12;
}
 
#elements-blue-button {
    color: white;
    font-family: "Open Sans";
    font-size: 15px;
    font-weight: bold;
    background-color: #288de3;
}
 
#elements-gray-button {
    color: #eee;
    font-family: "Open Sans";
    font-size: 15px;
    font-weight: bold;
    background-color: #aaa;
}
 
#elements-text-field {
    color: #ddd;
    font-family: "Open Sans";
    font-size: 15px;
    font-weight: bold;
    background-color: white;
}

Easy and Quick Customizations

The killer feature of using declarative styling like this is that you can make massive changes with minimal code. Here I have changed the colour scheme of the entire screen by replacing the HEX value of the blue colours with red.

1
2
3
4
5
6
7
8
9
10
11
tab-bar {
  color: #e32828;
  selected-color: white;
  background-color: #e32828;
}
 
tab-bar {
  color: #288de3;
  selected-color: white;
  background-color: #288de3;
}

Device-Specific Styling

One of the other cool things that the Pixate Engine supports is the @media tag. That means you can specify different styles for different devices. For example, in this sample project, the header title size is adjusted based on the device it is running on like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media (device: iphone) {
  .header-title {
    font-size: 38;
  }
 
  .header-button {
    font-size: 12;
  }
}
 
@media (device: ipad) {
  .header-title {
    font-size: 70;
  }
 
  .header-button {
    font-size: 19;
  }
}

Get Sassy

You’ll notice that in the sample project, the CSS was actually generated using Sass. Sass is cool because you can use variables to completely change the resulting CSS. For example, the blue theme and red themes used in this sample were geneated by using different variables like this.

1
2
3
4
5
6
$tab-bar-font: "Open Sans";
$product-font: "Open Sans";
$header-font: "Open Sans";
$element-font: "Helvetica";
$element-progress-font: "Open Sans";
$border-color: rgba(192, 192, 192, 0.5);

With Sass, you can also nest the states of your controls, for example, for the thumb of the slider, you can set it’s stylings as well as the highlighted state stylings.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#top-slider {
    thumb {
        background-color: white;
        background-size: 30px 30px;
        border-radius: 14px 14px;
        border-color: $border-color;
        border-width: 2px;
        &:highlighted {
            background-color: $primary-background-color;
            background-size: 30px 30px;
            border-radius: 14px 14px;
            border-color: $border-color;
            border-width: 2px;
        }
    }
}

Download the Sample Project

So I hope I have been able to whet your appetite to see what’s possible. You can download the sample project to see how these changes were made and play around with it.

Download the sample project here

This sample is nearly all converted to Pixate Engine CSS, but we left a few items in their original objective-c styling so that you can compare the differences as well as the dramatic reduction in code when using CSS.

The sample includes a non-commercial version of Pixate Engine. You can visit Pixate.com if you need a license.

Check out our other templates here and if you want to see them implemented using the Pixate Engine, let us know.

I would love to know your thoughts. Please leave a comment below and let’s chat about it. I’m sure Paul, Co-Founder of Pixate, would also chime in.

3 comments

  1. Nuno

    That’s fantastic!
    Will’b nice if you could do some Titanium mobile / Alloy templates and tutoriais 🙂 I Love your youtube channel 😉

    Keep your good work!

  2. Ray

    Yes, but pixate looks really, really elegant. I really like the way the have done things. Great.