Sencha Touch Theming Contest, April 2011

This project is the application to be used in the Sencha Touch Theming Contest. By default it uses the standard Sencha Touch theme, but it also includes a sample custom theme which can be easily switched in.

Read more about the contest here, and be sure to read the rules too.

You can try out the (unthemed) application live here, or with the sample custom theme here. Think you can do better?

To get an idea of how this all works, take a look at the sample roookies.scss (and the resulting roookies.css) files that are shipped in the theming directory of this project. This theme was crafted by Jen Gordon of the awesome Tapptics

For more information about how to use SCSS and Compass, please consult the Sass and Compass web sites.

Other resources that will help you include:

• Sass and Compass - The Next Wave in Styling and Theming
• An introduction to theming Sencha Touch
• Theming Sencha Touch
• Sencha Touch SASS Variables and Mixins Reference
• Contest help in the Sencha forums

Entries to the competition should comprise a single CSS file only: no changes are allowed to the JavaScript of the application. We recommend that images are included inline in the generated CSS (as they are in the example), simply so that the judges can easily test them without having to extract directories of additional resources. However, you may also wish to submit your SCSS source too, to show us how elegant your Sass is.

Creating a custom theme

Use the contents of the theming folder for creating your custom theme for the Roookies application.

Important: the themes directory includes a copy of part of the Sencha Touch SDK, placed here for your convenience to get started quickly with your theming work. This directory is distributed under the (same licence)[http://dev.sencha.com/deploy/touch/license.txt] as the Sencha Touch SDK as a whole.

To create your custom theme for the Roookies app:

1. Add a style query string to the app's URL to reference a custom CSS file:

   http://myserver/roookies/?style=theming/roookies.css
   

2. Add an additional font parameter if you need to reference a Google font by name:

   http://myserver/roookies/?style=theming/roookies.css&font=Perfecto
   

3. Refresh the application. You should now see the green and wood of (Jen Gordon's)[http://tapptics.com] sample theme.

4. To compile your own theme, ensure you have Compass 0.11.beta.3 (or later) installed:

   > sudo gem install compass -v 0.11.beta.3
   
   > compass -v
   Compass 0.11.beta.3
   

5. Make changes to the roookies.scss file (or a copy of your own)

6. Run compass to compile the CSS:

   > compass compile roookies.scss
   

7. Refresh the application to see the changes.

You will need to submit the resulting CSS file to enter the theming competition. However, feel free to submit the Sass (.scss) file too if you want to show us how clever you've been!

Installing Sencha Touch

By default, the Roookies app links to online versions of the JavaScript and CSS files, and uses the query string of the app to switch CSS. However, you may also want to download the Sencha Touch SDK and link to those files locally - this means you will be able to work on the app offline, and you get the benefits of the documentation and examples present in the SDK.

Download the Sencha Touch v1.1 SDK from here and place (or symlink) the unzipped directory, renamed to touch, into the lib folder.

You can alter the <link> and <script> tags in the index.html of the application itself point to the correct locations for the local JavaScript and CSS resources if you wish:

<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
<link  href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

(If you link to your CSS files explicitly like this, you should remove the <script> block that writes them in based on the query string).

You should then be able to test that the application works by opening the index.html file in a WebKit desktop browser. To try your local copy of the application on a mobile simulator (or real handset), you will have to deploy this directory onto a local (or external) web server.

Submitting your entry

To submit an entry, you'll need to provide at least an external link to your resulting CSS file. You can try out your CSS on our live application by altering the style parameter of the URL. For example:

http://senchalearn.github.com/roookies/?style=http://mysite.com/awesome.css

If you have used a custom font face in your theme, don't forget to provide the name of the Google web font used. Again, check this works using the query string:

http://senchalearn.github.com/roookies/?style=http://mysite.com/awesome.css&font=bangers

To submit your theme to the competition, use this form to provide both the CSS URL and the font name, and be sure to get your entry in before the deadline, 2nd May 2011.

Good luck!