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.
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
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
Creating a custom theme
Use the contents of the
theming folder for creating your custom theme for the Roookies application.
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:
stylequery string to the app's URL to reference a custom CSS file:
Add an additional
fontparameter if you need to reference a Google font by name:
Refresh the application. You should now see the green and wood of (Jen Gordon's)[http://tapptics.com] sample theme.
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
Make changes to the
roookies.scssfile (or a copy of your own)
Run compass to compile the CSS:
> compass compile roookies.scss
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
Download the Sencha Touch v1.1 SDK from here and place (or symlink) the unzipped directory, renamed to
touch, into the
You can alter the
<script> tags in the
(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:
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:
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.