Custom Styling a Sencha Touch App

by Shea Frederick on December 16th, 2010

Default StylingWe all want our mobile app to look distinct, and with Sencha Touch it's quite easy to do. There are many additional reasons however to generate our own CSS, which is what we will take a look at here. One of the biggest reasons is actually to save file size, improving the time it takes to display our mobile app to the user. As it is, Sencha Touch comes with a very inclusive CSS file which has all of the components included - whether your using them or not - and a bunch of sample pictos. Let's get started removing some of this bloat from the default CSS.

Trimming The Fat

The default CSS that ships with Sencha Touch is roughly 133KB, which is honestly quite enormous. One way to trim some of the fat is to exclude styles for components, parts of components, or UI features that we're not using. There are a ton of variables built in that we can set to exclude certain things - some of these can be found in the 'resources/themes/stylesheets/sencha-touch/default/_variables.scss' file, and others will have to be tracked down by examining the other SCSS files in the widgets folder. Some of the standard ones include:

$include-form-sliders: false;
$include-floating-panels: false;

Let's go ahead and modify the '_variables.scss' file to set the two above variables to false, removing the '!default' flag as well, since we're going to override this default value with our own. If we poke around in the other SCSS files in the widgets folder, we will will find many more of these variables, such as:

$include-top-tabs: false;
$include-bottom-tabs: true !default;

Adding these variables to the '_variables.scss' file will let us override these settings in a central location. For my usage, im excluding the 'top-tabs' by setting the value to false. I'm not using top tabs in my mobile app, so I wont miss them. Now that we're done with those changes, let's move on to generating the new CSS.

Generating The CSS

We have made some changes to our SCSS, now we need to generate the new CSS file that Sencha Touch needs by using Ruby, Compass & SASS. I'm not going to get into detail about how to install these things, but I will say that you need to first install Ruby so that it can be used from the command line, then install rubygems and use rubygems to install the compass and haml gems (haml is a dependency of compass, so it's installed for you).

Generating the CSS from our SCSS files is a simple one line command that is executed from within the resources folder:

D:\Workspace\SpeckleMobile\src\resources>compass compile sass
   exists sass/../css
  compile sass/android.scss
overwrite sass/../css/android.css
  compile sass/apple.scss
overwrite sass/../css/apple.css
  compile sass/sencha-touch.scss
overwrite sass/../css/sencha-touch.css

I have included the successful output as well, which has generated the new CSS and placed it in the 'css' folder within our current directory. This will replace the existing 'sencha-touch.css' with our newly generated one. There will be no visible change in our app yet, however the file size will decrease. Poking around in the SCSS files in the widgets folder will reveal many more variables that can be set to reduce file size by excluding unused features. Let's next take a look at altering the color scheme.

Shiny Colors

Minty StylingThis is the point where we can really make some drastic styling changes with minimal effort. The '_variables.scss' file has a few options for changing color, but one main color can be used and the rest of the colors are extrapolated from it by altering the saturation and darkening or lightening the color. This main color is aptly named 'base-color' - go figure. I'm going to change it to a nice minty green.

$base-color: #8bc531;

After compiling the SASS again, we end up with a very different looking application. We can change the look of the app by modifying this single color and achieve a wide variety of color schemes.

Active Color StylingLighter StylingIf we go with a very light color then the active color will become so light that it starts to blend with the surrounding colors. To counteract this over-lightening we can adjust the 'active-color' variable in the '_variables.scss' file by either setting it to a color we prefer, or adjusting the saturation and darkness.

$base-color: #e2f0cc;
$active-color: darken(saturate($base-color, 55%), 90%);
// $active-color: #212325;

There are also variables to set the active color to an exact color, such as 'tabs-light-active' - these can be found by looking at the '_tabs.scss' file located in the widgets folder. A little exploration can reveal a ton of variables we can use to change the styling of our app (I can't stress this enough). Next, let's take a look at removing some more bloat by including only the icons we need in our app.

Icons, aka Pictos

The default CSS comes with a couple dozen icons, many of which we will not need in our app. First we need to add a setting to the '_variables.scss' file that excludes this default set of icons.

$include-default-icons: false;

No PictosThis leaves us with no icons included, so if we we're to compile the new CSS at this point, all of the icons just show up as square boxes with a gradient in them - notice the generated css file is almost half the size now. Now let's figure out which icons we need and add them back in one at a time. Take the following steps:

  1. Add a scss file to the 'default' folder called '_my.scss'
  2. Edit the file adding '@import 'my/pictos';'
  3. Add a folder in the 'default' folder called 'my'
  4. Add a scss file to the 'default/my' folder called '_pictos.scss'
  5. Edit the '_all.scss' file in the 'default' folder, adding '@import 'my';'

That sets up our custom SCSS includes where we can place our extra styling and icons. Edit the 'default/my/_pictos.scss' file and add our icons using the 'pictos-iconmask' mixin.

@include pictos-iconmask('search');
@include pictos-iconmask('bookmarks');
@include pictos-iconmask('time');
@include pictos-iconmask('favorites');
@include pictos-iconmask('settings');

My PictosAfter compiling our CSS again, we will have our icons back, but only the icons we specifically imported, which brings our CSS file down to 88KB - almost half of the original CSS file size.

Set Forth and Conquer

I hope that leaves you with enough information to get started hacking around in the SCSS files and creating some really cool color schemes and custom styling. Not to mention, trimming some of the bulk off the default CSS files included in the Sencha Touch SDK download.

Let me know in the comments what interesting variables you have found in the Sencha Touch SCSS files.

Enjoy!

From Touch

15 Comments
  1. Hi Shea — Glad to see you’re getting into the theming in Touch! You have a lot of great tips in here, but just so you know, the only different we recommend making is always creating your own stylesheets, instead of editing the ones provided in the library. We actually have a similar article going up on http://www.sencha.com/blog/ tomorrow-

    Best,
    Dave

    • Awesome, looking forward to that post.

      I never thought about importing all of the sencha-touch styles into my own, thats a great suggestion. Ill have to play with that and post a follow up article, or modify this one a bit. Thanks.

  2. gkatz permalink

    regarding pictos: is it possible to just add my.scss (with pictos include inside) in the default folder and import it from the main scss? the suggested 5 step like an extra level of indirection…

  3. Hi Shea,
    Thanks for sharing this. Although I’m not a Touch developer, I’m assuming ExtJS 4 will follow a similar approach, so it’s great to see some useful info on theming (always the hardest part of ExtJS!).

    Regards,
    Andy

  4. apos permalink

    Hello!
    Read your tutorial along with that of David’s in sencha website, but what keeps bugging me, is that compiling with compass produces css files with bad encoding!

    Is that a known issue that you can tip me about? I can’t find a solution…

    Thank you!

    • Not really sure, havent had a problem with that myself. You getting strange characters mixed in with the CSS output?

      • apos permalink

        Yes, I get strange characters instead of base64 code in the css file. The rest of the code seems ok…

  5. apos permalink

    Yes, I get strange characters where the base64 code should be. The rest of the css code seems ok.
    Thanks for taking time to answer to me.

  6. apos permalink

    I really need to have a custom button added to my theme and due to the problem I described, I cannot. I managed to change the colors by editing the css file myself.
    What can I do to add the png manually? I got the base64 code of the image via an online converter, what could be the next step?

    Thanks

  7. Premier permalink

    Hello,
    can you give me your source code?
    I’ve created a new theme for my sencha app, and MessageBox is broken. I’m unable to read message in alert.

    Thank you

  8. can I use sencha-touch for custom themes keeping sencha touch package outside app?

  9. jiwon permalink

    @Premier,
    maybe attach this code in your scss file would be helpful :) :
    @include sencha-msgbox;

Trackbacks & Pingbacks

  1. Tweets that mention Custom Styling a Sencha Touch App | VinylFox -- Topsy.com
  2. Sencha Touch theming | nikolaimuhhin.eu

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS