Mobile Apps in Titanium Studio Compared to CSS

This article is about Titanium Studio 3.4 circa iOS8 and Android 4.4, though it is also relevant to other versions. This article also assumes you're familiar with relevant technologies and what a "box model" is.

I'm writing this as a person who has been developing websites for 15 years. I'm branching out a bit and learning mobile app development using Appcelerator's free Titanium Studio. It's cross-platform and is easy to setup and use. Unfortunately there are huge differences between CSS and apps built using TSS, Titanium's stylesheets.

Some differences between CSS and TSS are:
 

• In an app one uses different units of measurement
• TSS files don't cascade
• TSS files lack many of the features which CSS has such as dotted borders, box-shadows, text-transform, and inline-block.
• TSS syntax works more like JSON
• TSS and CSS have different box models

 
Most of that is easy to get used to. It can be difficult to understand the differences in box-models but I plan to explain that a bit later. Before we continue there is one subtle but important difference between CSS and TSS. When you declare a class or ID twice in a stylesheet (because this operates similarly to JSON) the second declaration will completely override the first declaration. Unlike CSS it won't just combine attributes. The second use will override all contents of the selector. This concept is slightly abstract but here is an example:
 

'#helloWorld':
                      {
                          backgroundColor:'red',
                          borderColor: 'black',
                          borderWidth: '2',
                          color: 'green',
                          top:'20'
                      }
                      '#helloWorld':
                      {
                          borderColor:'blue',
                          width:'50%'
                      }

Select all Open in new window

If both parts of that example appeared in the same CSS file then the result would have a blue background, a black border, green text, a top position of 20, and a width of 50%.

If both parts of that example appeared in the same TSS file then the result would only be blue with a width of 50%. There would be no border, no text color, and top position.

With that out of the way let's move on to the box model. In Titanium there is no concept of padding. Titanium also lacks margins but their position attributes sometimes operate similarly to margins. There is no floating but again you can achieve a similar effect. Most importantly there is zero concept of inline-block (which makes it hard to align multiple things to center with an auto width).

Let's start with the lack of padding. This can be remedied by adding an extra wrapper and using position attributes.
 

---

 

CSS Example 1

In this example we applied a padding to the red box. Note this doesn’t change the outer box but instead it constricts the working area while preserving the box and it’s background color. This is normally the way one would create CSS.
 

#wrapper
                      {
                         /* Does not exist */
                      }
                      #redBox
                      {
                         background: blue,
                         padding: 10px;
                      }

Select all Open in new window

 

---

CSS Example 2

For this example instead of using padding we applied a margin to the red box. We also gave the blue background color to a wrapper. This is not the way one would normally create CSS though in theory one could.

Note that in CSS if the red box is short enough it may be more than 10px away from the bottom of the blue box.
 

#wrapper
                      {
                         background: blue;
                      }
                      #redBox
                      {
                         margin: 10px;
                      }

Select all Open in new window

 

---

TSS

In this example we added a wrapper to the markup. We then positioned the red box relative to it’s parent. We also gave the background color to the parent wrapper instead of the red box.

Note that in TSS if the red box is short enough it might be expanded so it is exactly 10px away from the bottom of the blue box.
 

'#wrapper':
                      {
                         backgroundColor: 'blue',
                         bottom: '10dp',
                         left: '10dp',
                         right: '10dp',
                         top: '10dp'
                      }
                      '#redBox':
                      {
                         // Nothing
                      }

Select all Open in new window

 

---

 
To conclude we've gone over differences between app development, TSS syntax and parsing, and the difference in box models. I'm still new to app development but this was information I really could have used sooner and I had a hard time finding any information about it.