Sencha Touch 2 Up and Running

Chapter 7. Styling Applications

Creating a good mobile application takes much more than just quality code. The most successful applications have a great personality, conveyed through the proper use of design elements like color, proportion, whitespace, and font choices.

Sencha Touch is no exception to this rule; thankfully, designers can leverage all their current CSS knowledge to provide a strong visual identity to their creations. In this chapter, we are going to learn how Sencha Touch empowers designers to customize the look and feel of their applications.

Using the Default Sencha Styles

The easiest and most straightforward way to style your Sencha Touch application is to use the default CSS files provided by Sencha in the resources/css folder of the framework distribution folder. Just adding the default stylesheets included there will provide a “native” look and feel to your Sencha Touch applications:

<!--The default Sencha Touch style-->
<link rel="stylesheet" href="resources/css/sencha-touch.css" />

<!--The default iOS style-->
<link rel="stylesheet" href="resources/css/apple.css" />

<!--The default Android style-->
<link rel="stylesheet" href="resources/css/android.css" />

<!--The default BlackBerry 6 style-->
<link rel="stylesheet" href="resources/css/bb6.css" />

You can use these stylesheets in lieu of the default one provided by Sencha in the file sencha-touch.css on the same folder. You can see the different look and feel of the same application, using these default stylesheets, ...