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.

Comments

  1. Darius says on
    December 18, 2012 at 3:09 pm
    Reply

    Hi Lee, nice blog! Really nice tips about Sencha. The link for Spidey Theme isn’t working, if you could fix it i really appreciate. Greetings from Caracas

  2. Lee says on
    December 18, 2012 at 3:34 pm
    Reply

    Thanks Darius!
    I fixed the link so it should be possible to download it from now on!

  3. android says on
    February 13, 2014 at 6:17 am
    Reply

    I believe that is one of the so much significant info for
    me. And i am happy reading your article. But want to observation
    on few basic things, The website style is wonderful, the articles is truly great : D.
    Good task, cheers

  4. Alessandro says on
    February 1, 2015 at 12:40 pm
    Reply

    Hi! Is possibile to use Sencha watch to check for changes on the newly created theme folder, like what happens with the sass files in the resources/sass folder?

  5. Lee says on
    February 13, 2015 at 5:14 pm
    Reply

    yes that is possible Alessandro. – You will need to have Sencha Cmd installed on top of the Java JDK. – It will compile the sass files to a production ready css file, in the css folder.

Post a Comment

Your email is never published nor shared.
Required fields are marked *