Sencha Touch Theming: Getting Started
If you’ve worked with Sencha Touch for more than 5 minutes, you have GOT to appreciate the aesthetics which the framework brings out of the box. You literally have to do nothing at all in order to get a slick, polished looking interface that works in webkit browsers and on iPhone and Android devices.
However, if you’re like me, you probably get to the point with your apps where you want to customize the look and feel. I mean, while the Sencha Touch default palette is nice, it’s pretty generic, so before long you’ll need to start developing a custom theme for your app.
An Abortive Start
If you take a look at one of the stylesheets, you’ll notice how crazy complicated they are. Let’s say you wanted to change the color of all the navigation backgrounds, for example. Well, you could use Chrome’s developer tools to inspect each and every interface, grab the selectors, and then try to overwrite them with a custom style sheet (that’s what I did my first time). But you’d find that you’re editing dozens of lines of code, just to make a simple change.
And what about custom navigation toolbar icons? Well, by default Sencha Touch’s stylesheets use the base 64 dataUrls of the images within the stylesheets. And there are only a handful available by default. So if you wanted to add your own custom icon, not only would you have to replicate the exact lines of code for navigation icons, but you’d also have to figure out the base 64 of your image, enter it PRECISELY within the stylesheet, and hope for the best. Best of luck if you ever need to tweak that image in any way.
Sounds onerous, eh? That’s because using a traditional “modify and overwrite” approach to stylesheets won’t get you very far with customizing your own theme for Sencha Touch. In fact, if you’re like me, you’ll get frustrated with it in about 20 minutes and give up.
Starting Over (The Right Way)
Fortunately, there is a much better and far less painful way to customize Sencha Touch themes. The answer lies in SASS.
SASS, short for for Syntactically Awesome Stylesheets, is basically an extension of CSS that allows for lots of cool stuff that we all wish CSS had–variables, nesting selectors, functions or “mixins”–you know, THAT cool stuff . SASS makes this happen by using custom files with an extension of “.scss.” These files are then compiled in Ruby, and produce a valid, well-formatted .css file. But because of the extensible nature of SASS, simple, intuitive structures in the .scss files can create massively complex .css files, all without the pain of trying to maintain the complexity of the .css file itself.
So for example, let’s say you wanted to change the default “base” color of your Sencha Touch app. If you tried to do this via manual editing of the sencha-touch.css style sheet, you’d quickly find that you have literally hundreds of instances of this one color littered throughout your CSS file. While you could easily do a find-and-replace, that’s obviously not a great solution, and just opens the door to you messing up and breaking something.
With SASS, you can define this one color as a variable (more about this in future articles), and then use that variable throughout the .scss file to define this color. Yes, that’s right: define the color once, reuse it to your heart’s content. And when you’re sick of that color, you can simply change the value of the variable, and that’s all you have to worry about. Like I said, it’s exactly what we all wish CSS could do
This one example is just scratching the surface of what SASS can do. I won’t belabor the point here, but be sure to check out the SASS website to see the full story of what can be accomplished.
Getting Started With SASS
Even if changing the one color is all you want to accomplish, you’ll need to get your environment set up for SASS. Because .scss files are compiled into .css files, you’ll need to get Ruby set up in your development environment in order to take advantage of the awesomeness of SASS. Here are the steps for getting everything set up. I’m deliberately dumbing this process down, since a lot of the tutorials I found assumed more knowledge of command line stuff than I knew when I was setting SASS up. So my apologies if this is overly descriptive.
UPDATE! The following is for Sencha Touch 1.0.1. If you are trying to get setup using Sencha Touch 1.1.0, see this updated walk through instead. It will help prevent major compilation fails
Step 1: Install Ruby
To get SASS setup, you’ll first need to install Ruby and Ruby Gems (SASS is bundled with something called “Compass”, and Compass is a “Gem” that can be added into Ruby). You can go the painful route and install Ruby and then add Gems into it. However, if you’re stupid about these things, you can do what I did and just grab the Ruby 1.92 installer–it comes pre-built with Gems already configured.
- Get the Ruby 1.92 Installer
- Double-click the file to install, and choose “”Add Ruby executables to you PATH”
- I installed to the default directory on Windows (C:\Ruby192\)
Step 2: Setup Compass
Now that Ruby is installed, the next step is to get Compass (e.g., SASS) setup. This step actually took me the longest, simply because I’m stupid about command-line stuff. So here’s a play-by-play of what to do (this is for Windows…I assume Mac is similar), just in case you suffer from a similar level of stupidity:
- Open a new Command Shell (Start -> Run -> type “cmd”)
- Navigate to your Ruby installation directory (cd/ruby192)
- Type “gem install compass” – if it works, you should see a bunch of text appear about things being installed, configured, and what not.
Step 3: You’re Done!
At this point, “SASS” is ready to go. In the next article, I’ll walk through a basic setup for creating a custom theme file for your Sencha Touch app.
|Print article||This entry was posted by existdissolve on March 5, 2011 at 4:26 pm, and is filed under Mobile, Sencha Touch. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site.|
about 3 months ago - No comments
This will be a short post, I promise Recently, I posted my version of a time picker in Sencha Touch 2. As part of this, I wanted to *really* document the component. I decided to leverage JSDuck, the tool which is currently used by Sencha to provide API documentation for…well…everything that they do. Beyond looking…
about 1 year ago - 5 comments
During the course of developing your Sencha Touch app, you will inevitably get around to theming…after all, while the default styles are nice, they don’t exactly scream individuality. Fortunately, Sencha Touch makes theming ridiculously easy, and there are a lot of resources available to help with getting started with that. But let’s talk about a…
about 1 year ago - No comments
Yeah, I know, I’m not the first person to the “create an EditableList for Sencha Touch” party. In fact, if you Google “sencha touch editable list,” you’ll find a lot of really nice code that will let you pretty easily integrate basic delete/sort functionality into your Sencha Touch app. However, none of the offerings I…
about 1 year ago - 12 comments
Sencha Touch’s NestedList is an excellent component for creating the compact “drill-down” effect that we’re all used to on our mobile devices. It’s super-flexible, too. Whether you have a canned set of items, or need to retrieve each “level” via AJAX, it’ll handle it. I’ve used NestedList quite a bit, and have been generally happy…
about 2 years ago - 2 comments
In my last article, I showed how to get setup and started with creating custom stylesheets. After a significant release (1.1.0) and several reader requests, I’m updating the walkthrough with screenshots and instructions for v1.1.0. This version will be strictly business: for discussion about the more interesting points of what’s going on, refer back to…
about 2 years ago - 15 comments
Ok, let’s recap. So far, we’ve looked at some basic concepts related to how to approach modifying a Sencha Touch app theme, as well as walked through exactly how all the pieces fit together in the SASS magic. With all this behind us, it’s finally time to create a custom .scss file–let’s get started! Setting…
about 2 years ago - 1 comment
If you followed the steps in the last post on setting up your development environment to leverage SASS, you should be all set to start rocking some seriously awesome custom themes for your Sencha Touch app. But before you dive in, you might take a few moments to take a deep breath and survey all…
about 2 years ago - 3 comments
As readers of this blog know, I’m a pretty big Sencha fan. I <3 ExtJS…seriously, I love pretty much everything about it, from how great the default UI is, to how ridiculously easy it is to build awesome applications in zero time. So when I heard a while back that Sencha was combining ExtJS, jQTouch,…