Create an amazing Sencha Touch theme with SASS

Posted on in CSS Sass Sencha Touch

This tutorial shows you how to build an amazing Sencha Touch 2.1 theme: Like this one.

Prerequisites:
generate your application with Sencha CMD, so you have the MVC folder structure:
[project]
- app
- - model
- - store
- - view
- - profile
- - controller
- resources
- - css
- - sass

  1. Open [project] /resources/ folder
  2. Create the following (new) folders:

- default
- spidey
- - sass
- - css
- - fonts
- - images

Download the zip file below. It contains the full theme including all the asets:
Spidey Theme.

Copy all the assets over from my attached zip; incase your default assets have no subfolder default, copy the original sass, css... folders
over to default. Note for fonts, you will need a fontface kit: .eot, svg, .ttf, .woff)

  1. Create 2 new files in the resources/spidey/sass/ folder: spidey.scss and config.rb
  2. Change the content of the config.rb file to:
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', '..', 'touch', 'resources', 'themes')

# Compass configurations
sass_path = dir

# Require any additional compass plugins here.
relative_assets = true

fonts_path = File.join(dir, "..", "fonts")
images_path = File.join(dir, "..", "images")
css_path = File.join(dir, "..", "css")

#output settings
output_style = :compressed
environment = :production

Actually what we are doing in this config file, is setting the paths to all your Sencha Touch framework folder and relative paths to your asset folders and CSS folder.
Last but not least there are some settings, to setup the production output of the generated CSS file. In this case the code will be minified.

  1. Incase you changed the folder structure of the default style files, you will need to make sure that it's pointing to the framework folder.
    Since now you are one extra level deep, you will need the sencha-touch framework dir:
load File.join(dir, '..', '..', '..', 'touch', 'resources', 'themes')

Read more on the next page about how to setup your SASS file.