An Introduction to Theming Sencha Touch http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch Sencha Touch has introduced a revolutionary new theming system, built on SASS and Compass, that allows you to create versions of our base theme custom tailored to your application and brand. en-us dave@sencha.com Copyright 2010 2010-12-17T10:00:39+00:00 Comment by Ben Judson For those of you looking to reduce the size of the CSS file, include this in your SCSS file: $include-default-icons: false; Since 18 pictos are included by default, and all are encoded into the generated CSS file, this adds a lot of extra weight. Just add the icons you need manually as described in the article—I was able to cut the size of the CSS file almost in half just by adding this line, and then manually including the 6 icons I actually wanted. For those of you looking to reduce the size of the CSS file, include this in your SCSS file:

$include-default-icons: false;

Since 18 pictos are included by default, and all are encoded into the generated CSS file, this adds a lot of extra weight. Just add the icons you need manually as described in the article—I was able to cut the size of the CSS file almost in half just by adding this line, and then manually including the 6 icons I actually wanted.

]]> Mon, 12 Sep 2011 16:32 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:26995#date:16:32 Comment by Lawrence Paje Thanks to this post, really help to customize the UI I wanted. I am working on windows and perfectly got the theming using ruby. Thanks to this post, really help to customize the UI I wanted. I am working on windows and perfectly got the theming using ruby. smile

]]> Tue, 06 Sep 2011 08:16 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:26407#date:08:16 Comment by amidude Seriously? How lame is this? I am a front-end developer and will never see the benefit to compiling anything to get straightforward CSS. It is an unnecessary and redundant effort. Why not simply support CSS3 and all us to link to our stylesheets accordingly? I can’t even get a simple answer ANYWHERE on how to invoke a background gradient. Even the Compass tool gives cludgy answers. Seriously? How lame is this? I am a front-end developer and will never see the benefit to compiling anything to get straightforward CSS. It is an unnecessary and redundant effort. Why not simply support CSS3 and all us to link to our stylesheets accordingly? I can’t even get a simple answer ANYWHERE on how to invoke a background gradient. Even the Compass tool gives cludgy answers.

]]> Fri, 26 Aug 2011 20:20 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:25968#date:20:20 Comment by stephanbit Hi there, i install ruby (1.9.2p290), sass, compass on win7 and it seems to work. but i facing two problems (i think it depends on the installed versions.) my gem list: chunky_png (1.1.0), compass (0.11.beta.7), haml (3.1.2), sass (3.1.7). When i compile, the outputted css has wired/wrong base64 styles and several warnings: the linear-gradient mixin is deprecated. how can i fix the problems! Hi there,

i install ruby (1.9.2p290), sass, compass on win7 and it seems to work. but i facing two problems (i think it depends on the installed versions.) my gem list: chunky_png (1.1.0), compass (0.11.beta.7), haml (3.1.2), sass (3.1.7). When i compile, the outputted css has wired/wrong base64 styles and several warnings: the linear-gradient mixin is deprecated. how can i fix the problems!

]]> Mon, 22 Aug 2011 07:46 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:25649#date:07:46 Comment by Farish In this line: load File.join(sass_path, ‘..’, ‘..’, ‘..’, ‘..’, ‘resources’, ‘themes’) I get an error: in ‘load’: no such file to load—./../themes (LoadError) from config.rb In this line:

load File.join(sass_path, ‘..’, ‘..’, ‘..’, ‘..’, ‘resources’, ‘themes’)

I get an error: in ‘load’: no such file to load—./../themes (LoadError) from config.rb

]]> Mon, 08 Aug 2011 08:50 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:25013#date:08:50 Comment by Farish Hi, I was trying to run the config.rb script but was getting errors. then i used require ‘sass’ and require ‘compass’ in the beginning of the file and that has made the errors disappear. But how do i get a css file as the output? I run ruby config.rb from windows command prompt. it runs for a while and then returns without any message and there is no file produced… Do I need to specify the input and output filenames as additional arguments? I am completely new to ruby, sass and compass! any help would be highly appreciated. Thanks, Farish Hi,

I was trying to run the config.rb script but was getting errors. then i used require ‘sass’ and require ‘compass’ in the beginning of the file and that has made the errors disappear. But how do i get a css file as the output? I run ruby config.rb from windows command prompt. it runs for a while and then returns without any message and there is no file produced… Do I need to specify the input and output filenames as additional arguments? I am completely new to ruby, sass and compass! any help would be highly appreciated.

Thanks,
Farish

]]> Mon, 08 Aug 2011 08:01 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:25009#date:08:01 Comment by Handy Wang @thedirector227   Actually, I can accept the Compass+SASS mode for theming my app, because I was a web app developer for several years ago, but for other C/S developers and some part of B/S developers. So, I think if some body want be a SenchTouch expert, he/she must take so much time to learn SenchaTouch API and Compass+SASS?So I told my colleague SenchaTouch isn’t suitable for us such as agile development team for the learning cost?   Recently, the SenchTouch make me crazy for that It’s so hard to add some button into List item, and I think there is also some bug for handling tap event for button which is in list item and list item. Because I cant prevent firing the ListItem’s tap event when I tab button which is in list item.   So, I give up for SenchaTouch and start with JQuery mobile. @thedirector227
  Actually, I can accept the Compass+SASS mode for theming my app, because I was a web app developer for several years ago, but for other C/S developers and some part of B/S developers. So, I think if some body want be a SenchTouch expert, he/she must take so much time to learn SenchaTouch API and Compass+SASS?So I told my colleague SenchaTouch isn’t suitable for us such as agile development team for the learning cost?
  Recently, the SenchTouch make me crazy for that It’s so hard to add some button into List item, and I think there is also some bug for handling tap event for button which is in list item and list item. Because I cant prevent firing the ListItem’s tap event when I tab button which is in list item.
  So, I give up for SenchaTouch and start with JQuery mobile.

]]> Fri, 05 Aug 2011 15:59 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:24919#date:15:59 Comment by thedirector227 Thanks @HandyWang.  I wonder if there is documentation to show exactly what elements we need to change in order to theme or how about a “Theme Sencha Touch WITHOUT SASS” tutorial?  That would be nice..  Can anyone help with this? Side Note (venting): I actually designed an built a mock application in 2 hours with html5, css & jquery and it took my programmers (like 8 of them) 3 weeks to finally add the buttons to the sencha software…and they said it still might look funny on an iPad.  ...Mine works great on every platform but only having an issue keeping the lower toolbar attached to the bottom of the screen when turned sideways (on smartphones).  Part of being the boss I guess…  2 hours vs. 3 weeks…c’mon man! Thanks @HandyWang.  I wonder if there is documentation to show exactly what elements we need to change in order to theme or how about a “Theme Sencha Touch WITHOUT SASS” tutorial?  That would be nice.. 

Can anyone help with this?

Side Note (venting):
I actually designed an built a mock application in 2 hours with html5, css & jquery and it took my programmers (like 8 of them) 3 weeks to finally add the buttons to the sencha software…and they said it still might look funny on an iPad.  ...Mine works great on every platform but only having an issue keeping the lower toolbar attached to the bottom of the screen when turned sideways (on smartphones).  Part of being the boss I guess…  2 hours vs. 3 weeks…c’mon man!

]]> Thu, 04 Aug 2011 16:36 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:24892#date:16:36 Comment by Handy Wang @thedirector227 I totally agreee with you “Why do I need two completely different tools to create a third?”. I think I needn’t . So , I thought the author of SASS+Compass is ruby fan! Why did us must complicate the simple issues! @thedirector227

I totally agreee with you “Why do I need two completely different tools to create a third?”. I think I needn’t . So , I thought the author of SASS+Compass is ruby fan!

Why did us must complicate the simple issues!

]]> Tue, 02 Aug 2011 02:23 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:24755#date:02:23 Comment by thedirector227 Anybody actually look at the Theme CSS for this project (in the Sencha/resources/css folder)?  It’s a giant mess and in no way ‘easy’ to modify and customize…or read for that matter.  Whomever decided that SASS & Compass was a good way to produce “easily customizable” CSS was not thinking about the CSS Savvy designers out there.  Wish you could see the code I’m looking at right b/c this is awful.  ...looks like a massive run-on sentence with 800 character urls for the icons. WTF!? Why do I need two completely different tools to create a third?  Knowing CSS by itself is way more useful than compiling SASS with Compass. This is ridiculous.  Sheesh… p.s. wish i could copy & paste and example url, but it would really mess up this blog. wow Anybody actually look at the Theme CSS for this project (in the Sencha/resources/css folder)?  It’s a giant mess and in no way ‘easy’ to modify and customize…or read for that matter.  Whomever decided that SASS & Compass was a good way to produce “easily customizable” CSS was not thinking about the CSS Savvy designers out there.  Wish you could see the code I’m looking at right b/c this is awful.  ...looks like a massive run-on sentence with 800 character urls for the icons. WTF!?

Why do I need two completely different tools to create a third?  Knowing CSS by itself is way more useful than compiling SASS with Compass. This is ridiculous. 

Sheesh…

p.s. wish i could copy & paste and example url, but it would really mess up this blog. wow

]]> Mon, 01 Aug 2011 20:05 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:24719#date:20:05 Comment by Handy Wang Hi David Kaneda? In my development environment of Mac OS 10.6.7, I must install chunky_png-1.1.0 with command “sudo gem install chunky_png -v 1.1.0” before install compass with command “sudo gem install compass—pre”. So, I just want some body else can get the answer of same problem from here. Hi David Kaneda?

In my development environment of Mac OS 10.6.7, I must install chunky_png-1.1.0 with command “sudo gem install chunky_png -v 1.1.0” before install compass with command “sudo gem install compass—pre”.

So, I just want some body else can get the answer of same problem from here.

]]> Sat, 30 Jul 2011 18:39 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:24665#date:18:39 Comment by Handy Wang Hi David Kaneda, Thanks for your great article about Compass+SASS for generating CSS? However, I must say that there is a wrong code snapshot “@include pictos-iconmask(‘xxxxx’);” with command “compass compile” for compiling? After I trying, the corrent code should be “@include pictos-iconmask(xxxxx);”?In my application code is “@include pictos-iconmask(settings6);” So, if you agree with me, pls correct it. Thanks a lot! Hi David Kaneda,

Thanks for your great article about Compass+SASS for generating CSS?
However, I must say that there is a wrong code snapshot “@include pictos-iconmask(‘xxxxx’);” with command “compass compile” for compiling?

After I trying, the corrent code should be “@include pictos-iconmask(xxxxx);”?In my application code is “@include pictos-iconmask(settings6);”

So, if you agree with me, pls correct it.

Thanks a lot!

]]> Sat, 30 Jul 2011 18:33 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:24664#date:18:33 Comment by Alex Graham Am struggling to create the application.css file.  Have never used Ruby before but have installed it using the one click installer. I believe I do not have to install compass as its already installed with the Ruby install? Have multiple statements when compiling the scss file such as WARNING The linear-gradient mixin is deprecated. The resulting css file is full of non CSS code… Can someone advise where I may be going wrong?  Thanks Am struggling to create the application.css file.  Have never used Ruby before but have installed it using the one click installer. I believe I do not have to install compass as its already installed with the Ruby install? Have multiple statements when compiling the scss file such as WARNING The linear-gradient mixin is deprecated. The resulting css file is full of non CSS code… Can someone advise where I may be going wrong?  Thanks

]]> Fri, 29 Apr 2011 22:59 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:20331#date:22:59 Comment by Nimish I got the issue sorted out .. On Ubuntu 10.10 the version of Compass and SASS are lower end either you have to wait for the next release to have them or do it manually. Since I was short on time I tried it out on my Mac Mini . It installed both the requirements with the latest version I had to follow this too http://www.sencha.com/forum/showthread.php?128059-SASS-Errors-in-Version-1.1 to get it working but after that it was working fine ! I will also try to figure out on Linux by manually installing the SASS and Compass’s latest versions. Will update once I am done I got the issue sorted out .. On Ubuntu 10.10 the version of Compass and SASS are lower end either you have to wait for the next release to have them or do it manually. Since I was short on time I tried it out on my Mac Mini . It installed both the requirements with the latest version I had to follow this too http://www.sencha.com/forum/showthread.php?128059-SASS-Errors-in-Version-1.1 to get it working but after that it was working fine smile !
I will also try to figure out on Linux by manually installing the SASS and Compass’s latest versions. Will update once I am done

]]> Fri, 22 Apr 2011 04:43 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19902#date:04:43 Comment by Chris Scott @Dave I think the Ext theme has grown too complex to manage with traditional css.  You could always out-source the design of a custom theme to a 3rd-party who could provide you with the css output generated from a custom-designed compass theme. @Dave I think the Ext theme has grown too complex to manage with traditional css.  You could always out-source the design of a custom theme to a 3rd-party who could provide you with the css output generated from a custom-designed compass theme.

]]> Thu, 21 Apr 2011 17:33 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19888#date:17:33 Comment by Dave Why add Ruby and compass to the mix? To reach a larger audience of end users, it seems to me that it would be best to get away from these things. Why add Ruby and compass to the mix? To reach a larger audience of end users, it seems to me that it would be best to get away from these things.

]]> Thu, 21 Apr 2011 13:47 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19883#date:13:47 Comment by NImish I am facing the same problem as shubakk Can someone help me out ? I am facing the same problem as shubakk
Can someone help me out ?

]]> Mon, 18 Apr 2011 11:15 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19729#date:11:15 Comment by Roger Wyatt @Lee Probert / @Ron I had the same problem and found some documentation that Sencha is using a different version of Chunky_png gem Here’s what I did: gem install chunky_png -v 0.12.0 gem install compass—pre Then I could compile the CSS and everything is great. @Kennwhy: Yes, this works on windows. You need to have Ruby installed, but once it’s installed, it works like a champ. @Lee Probert / @Ron
I had the same problem and found some documentation that Sencha is using a different version of Chunky_png gem
Here’s what I did:
gem install chunky_png -v 0.12.0
gem install compass—pre

Then I could compile the CSS and everything is great.

@Kennwhy: Yes, this works on windows. You need to have Ruby installed, but once it’s installed, it works like a champ.

]]> Thu, 14 Apr 2011 00:40 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19594#date:00:40 Comment by Kennwhy Hi i’m newbie and i would like to Know if this works on windows??? and the installation process thanks Hi
i’m newbie and i would like to Know if this works on windows??? and the installation process
thanks

]]> Tue, 12 Apr 2011 23:56 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19547#date:23:56 Comment by Lee Probert Ron. There’s another thread that answers this question here : http://www.sencha.com/forum/showthread.php?128059-SASS-Errors-in-Version-1.1&p=586976#post586976 $ gem install chunky_png -v 1.1.0 $ gem install compass—pre Ron. There’s another thread that answers this question here : http://www.sencha.com/forum/showthread.php?128059-SASS-Errors-in-Version-1.1&p=586976#post586976

$ gem install chunky_png -v 1.1.0
$ gem install compass—pre

]]> Fri, 08 Apr 2011 09:29 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19380#date:09:29 Comment by Ron Solution to the inline_image_string problem http://www.sencha.com/forum/showthread.php?127994-Attn-David-Kanada-Version-1.1.0-Cant-compile-custom-application.scss&p=584296&viewfull=1#post584296 Solution to the inline_image_string problem

http://www.sencha.com/forum/showthread.php?127994-Attn-David-Kanada-Version-1.1.0-Cant-compile-custom-application.scss&p=584296&viewfull=1#post584296

]]> Thu, 07 Apr 2011 19:36 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19343#date:19:36 Comment by Ron I’m having the same problem as Lee Probert. I’m having the same problem as Lee Probert.

]]> Thu, 07 Apr 2011 19:32 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:19342#date:19:32 Comment by Lee Probert More information here : http://www.sencha.com/forum/showthread.php?128059-SASS-Errors-in-Version-1.1 Think I’l revert to 1.0.1 and see if I can get it to work. More information here : http://www.sencha.com/forum/showthread.php?128059-SASS-Errors-in-Version-1.1

Think I’l revert to 1.0.1 and see if I can get it to work.

]]> Wed, 30 Mar 2011 10:31 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:18957#date:10:31 Comment by Lee Probert The theme_images.rb file has a line which is ... images_path = File.join(File.dirname(__FILE__), “..”, “images”, theme.value) The images folder has a subfolder called ‘default’ ... could this be the problem? The theme_images.rb file has a line which is ...

images_path = File.join(File.dirname(__FILE__), “..”, “images”, theme.value)

The images folder has a subfolder called ‘default’ ... could this be the problem?

]]> Wed, 30 Mar 2011 10:20 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:18956#date:10:20 Comment by Lee Probert I have Ruby installed and have installed the Compass gem. When I compile my scss file I get the following error : undefined method `inline_image_string’ for #<Sass::Script::Functions::EvaluationContext:0x101781110 Am wondering if I need to update Ruby or if the Sencha touch 1.1.0 files are not quite right. I have Ruby installed and have installed the Compass gem.
When I compile my scss file I get the following error :

undefined method `inline_image_string’ for #<Sass::Script::Functions::EvaluationContext:0x101781110

Am wondering if I need to update Ruby or if the Sencha touch 1.1.0 files are not quite right.

]]> Wed, 30 Mar 2011 10:15 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:18955#date:10:15 Comment by shubakk This introduction seems broken, at least for me (on Ubuntu) compass compile get me nothing but a compile folder containing some sort of initialization file (ie.css, ...) compass—watch give me an error (sencha-touch/resources/sass/config.rb: no such file to load—sencha-touch/resources/sass/../themes) as if it doesn’t see the compass_init.rb in the themes directory. And if i change the following line in the config file : load File.join(dir, ‘..’, ‘themes’,‘compass_init.rb’) i get another error : LoadError on line 31 of /usr/lib/ruby/1.8/rubygems/custom_require.rb: no such file to load—fssm/ext My gems are up to date : compass (0.10.6), haml (3.0.25) i don’t understand what’s going on and what to do. does somebody have any idea how to fix this? This introduction seems broken, at least for me (on Ubuntu)
compass compile get me nothing but a compile folder containing some sort of initialization file (ie.css, ...)
compass—watch give me an error (sencha-touch/resources/sass/config.rb: no such file to load—sencha-touch/resources/sass/../themes) as if it doesn’t see the compass_init.rb in the themes directory.

And if i change the following line in the config file :

load File.join(dir, ‘..’, ‘themes’,‘compass_init.rb’)

i get another error :

LoadError on line 31 of /usr/lib/ruby/1.8/rubygems/custom_require.rb: no such file to load—fssm/ext

My gems are up to date : compass (0.10.6), haml (3.0.25)

i don’t understand what’s going on and what to do. does somebody have any idea how to fix this?

]]> Tue, 15 Mar 2011 15:50 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:18396#date:15:50 Comment by Imanol Do somebody mind to put in github or somewhere the source for this demos, i’m trying to do the theming, and understand de sass and compass, but i have problems with the config.rb I think. here is my error message: Errno::ENOENT on line 116 of /Library/Ruby/Gems/1.8/gems/compass-0.10.6/lib/compass/compiler.rb: No such file or directory - /Users/tototo/Sites/sencha/pt/resources/sass/scss Run with—trace to see the full backtrace Do somebody mind to put in github or somewhere the source for this demos, i’m trying to do the theming, and understand de sass and compass, but i have problems with the config.rb I think.

here is my error message:
Errno::ENOENT on line 116 of /Library/Ruby/Gems/1.8/gems/compass-0.10.6/lib/compass/compiler.rb: No such file or directory - /Users/tototo/Sites/sencha/pt/resources/sass/scss
Run with—trace to see the full backtrace

]]> Sun, 13 Mar 2011 16:21 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:18299#date:16:21 Comment by Claudio Palladini Veeeeeeeeeeeeeeeeeeeeeeeeery very very nice…. Veeeeeeeeeeeeeeeeeeeeeeeeery very very nice….

]]> Thu, 03 Mar 2011 11:01 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:17899#date:11:01 Comment by Josh Nursing Ruby is exactly the scripting tool for the job here, and for those who are saying they don’t want to learn Ruby, well, you don’t have to as mentioned in the text. It’s just a configuration file for setting up your own environment. Ruby is exactly the scripting tool for the job here, and for those who are saying they don’t want to learn Ruby, well, you don’t have to as mentioned in the text. It’s just a configuration file for setting up your own environment.

]]> Mon, 21 Feb 2011 08:42 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:17579#date:08:42 Comment by Chris For Ruby noobs out there, using Windows, you might want to have a look at Pik:&nbsp; https://github.com/vertiginous/pik For those on Mac / Linux, use RVM (Ruby Version Manager). http://rvm.beginrescueend.com/ For Ruby noobs out there, using Windows, you might want to have a look at Pik: 
https://github.com/vertiginous/pik

For those on Mac / Linux, use RVM (Ruby Version Manager).
http://rvm.beginrescueend.com/

]]> Sun, 20 Feb 2011 22:53 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:17571#date:22:53 Comment by David Kaneda @Jeremy: First off, your SASS-joke has made my day. Second, I’m somewhat in the same boat — this has been my first (very limited) glimpse of Ruby, but for it’s use here, it’s been crazy easy to get up and running. @Rob: This is definitely on the way. @Jeremy: First off, your SASS-joke has made my day. Second, I’m somewhat in the same boat — this has been my first (very limited) glimpse of Ruby, but for it’s use here, it’s been crazy easy to get up and running.

@Rob: This is definitely on the way.

]]> Sun, 20 Feb 2011 22:09 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:17570#date:22:09 Comment by Jeremy Voros Not a javascript or Ruby developer here, but this design framework has been a snap to learn. With this set up I can easily and powerfully change the feel of my app.&nbsp; $me-color: #impressed; Thank you. Not a javascript or Ruby developer here, but this design framework has been a snap to learn. With this set up I can easily and powerfully change the feel of my app.  $me-color: #impressed;

Thank you.

]]> Sat, 19 Feb 2011 19:39 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:17540#date:19:39 Comment by chris scott @JavaDeveloper why not try out jRuby? @JavaDeveloper why not try out jRuby?

]]> Wed, 16 Feb 2011 19:31 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:17391#date:19:31 Comment by Rob Jones Can you provide a link to the project files? I am having a hard time creating the layout with the toolbar at the top and the bottomtabs at the bottom (I am more of a designer than a Ext coder)... Can you provide a link to the project files? I am having a hard time creating the layout with the toolbar at the top and the bottomtabs at the bottom (I am more of a designer than a Ext coder)...

]]> Wed, 12 Jan 2011 21:38 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16792#date:21:38 Comment by Rob Jones Great article, very useful for the project I am working on! Quick question: You show a few theme properties, but Is there a more comprehensive list of the properties used for theming? I am sure there are a lot, but I bet there’s a subset that would suffice for most themes…. Great article, very useful for the project I am working on!

Quick question:
You show a few theme properties, but Is there a more comprehensive list of the properties used for theming? I am sure there are a lot, but I bet there’s a subset that would suffice for most themes….

]]> Wed, 05 Jan 2011 17:27 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16791#date:17:27 Comment by JavaDeveloper Oh no! Ruby! I don’t want to install Ruby and learn it for just this. Sencha guys, can you please come up with something that is Ruby independant? Oh no! Ruby! I don’t want to install Ruby and learn it for just this. Sencha guys, can you please come up with something that is Ruby independant?

]]> Mon, 03 Jan 2011 03:38 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16790#date:03:38 Comment by dmassiani mmm, yeah i have found the problem, i have just included this line : @include sencha-msgbox; and my question: where exactly i can read all possible include and variable ? i love sencha touch and sass. mmm, yeah i have found the problem, i have just included this line :
@include sencha-msgbox;

and my question: where exactly i can read all possible include and variable ?

i love sencha touch and sass.

]]> Wed, 29 Dec 2010 09:56 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16789#date:09:56 Comment by dmassiani I have try this customization and finally that’s rocks but i have a problem, the message box have bad weight, i can’t touch “ok” button ... what i doesn’t ? (sorry for my bad english) I have try this customization and finally that’s rocks but i have a problem, the message box have bad weight, i can’t touch “ok” button ...
what i doesn’t ?
(sorry for my bad english)

]]> Wed, 29 Dec 2010 09:30 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16788#date:09:30 Comment by Shea Frederick (VinylFox) @Aaron - you need to adjust the path in config.rb. The line that starts ‘load File.join….’, for instance, I use: load File.join(sass_path, ‘..’, ‘themes’) @Aaron - you need to adjust the path in config.rb. The line that starts ‘load File.join….’, for instance, I use:

load File.join(sass_path, ‘..’, ‘themes’)

]]> Mon, 27 Dec 2010 21:33 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16787#date:21:33 Comment by Guy Wow This needs way more cover than a short blog… Wow
This needs way more cover than a short blog…

]]> Mon, 27 Dec 2010 21:18 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16786#date:21:18 Comment by elmasse David, tremendous post! Nice work! Just to head up. Picto include is wrong defined: @include pictos-iconmask(‘wifi’); You should put the name of the image without the quotes! @include pictos-iconmask(wifi); David, tremendous post! Nice work! Just to head up. Picto include is wrong defined:

@include pictos-iconmask(‘wifi’);

You should put the name of the image without the quotes!

@include pictos-iconmask(wifi);

]]> Fri, 24 Dec 2010 01:50 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16785#date:01:50 Comment by Thomas I have done something like this and it works in ubuntu sudo gem uninstall chriseppstein-compass sudo gem install compass and compass compile sass I have done something like this and it works in ubuntu smile

sudo gem uninstall chriseppstein-compass
sudo gem install compass


and
compass compile sass

]]> Thu, 23 Dec 2010 09:52 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16784#date:09:52 Comment by Thomas I’m using ubuntu version to run sass, what command should we use in Terminal i have used compass compile but it just generated another folder . So i tried compass -compile but it returned some error I’m using ubuntu version to run sass, what command should we use in Terminal
i have used compass compile but it just generated another folder .

So i tried compass -compile but it returned some error

]]> Thu, 23 Dec 2010 05:38 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16783#date:05:38 Comment by Roy Hey everyone—what’s wrong with a Ruby dependency? What ever happened to using the best tool for the job? Ruby’s text processing and DSL abilities make it an excellent tool for this job. Hey everyone—what’s wrong with a Ruby dependency? What ever happened to using the best tool for the job?

Ruby’s text processing and DSL abilities make it an excellent tool for this job.

]]> Mon, 20 Dec 2010 17:49 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16782#date:17:49 Comment by Aaron Am I the only one having a fail moment here? I can’t get this configured properly. When I compile, it throws me this: WARNING: Neither sencha-touch/default/all.sass nor .scss found. Using sencha-touch/default/all.css instead. This behavior is deprecated and will be removed in a future version. If you really need sencha-touch/default/all.css, import it explicitly. Am I the only one having a fail moment here? I can’t get this configured properly. When I compile, it throws me this:


WARNING: Neither sencha-touch/default/all.sass nor .scss found. Using sencha-touch/default/all.css instead.

This behavior is deprecated and will be removed in a future version.
If you really need sencha-touch/default/all.css, import it explicitly.

]]> Mon, 20 Dec 2010 06:38 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16781#date:06:38 Comment by Hunter This is a great tutorial / idea.&nbsp; I love the simplicity and it means the future is very bright. It does not however currently reflect the Sencha download packages though.&nbsp; It would be great to have that be “plug-and-play” with a working sass setup.&nbsp; Running a sass—watch on the current /resources/sencha-touch.scss (what I am assuming is your “application.scss”) results in an error, even when the config.rb is updated to your example. Please let me know when this is fixed, as I would love to be able to try this out. This is a great tutorial / idea.  I love the simplicity and it means the future is very bright.

It does not however currently reflect the Sencha download packages though.  It would be great to have that be “plug-and-play” with a working sass setup.  Running a sass—watch on the current /resources/sencha-touch.scss (what I am assuming is your “application.scss”) results in an error, even when the config.rb is updated to your example.

Please let me know when this is fixed, as I would love to be able to try this out.

]]> Sun, 19 Dec 2010 23:48 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16780#date:23:48 Comment by Anthony Matejcich yeah the ruby focus is an issue for me but i guess its a willingness to learn! Awsome move though. yeah the ruby focus is an issue for me but i guess its a willingness to learn! Awsome move though.

]]> Sun, 19 Dec 2010 22:08 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16779#date:22:08 Comment by Andreas I don’t like the ruby dependancy but the results are awesome. I don’t like the ruby dependancy but the results are awesome.

]]> Sat, 18 Dec 2010 10:13 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16778#date:10:13 Comment by AwesomeBob I think I might just work on a PECL extension for SASS so the PHP community can really make use of these new technological innovations. I think I might just work on a PECL extension for SASS so the PHP community can really make use of these new technological innovations.

]]> Fri, 17 Dec 2010 22:15 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16777#date:22:15 Comment by Jonathan Can’t wait ‘till we get this theming with Ext JS 4.0! Can’t wait ‘till we get this theming with Ext JS 4.0! grin

]]> Fri, 17 Dec 2010 20:23 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16776#date:20:23 Comment by Shea Frederick Good stuff - glad to see the themeing process being demystified. Ill have to post a follow up to my own blog post on Theming Sencha Touch after experimenting with the techniques outlined here. Thanks for the post Dave. Good stuff - glad to see the themeing process being demystified. Ill have to post a follow up to my own blog post on Theming Sencha Touch after experimenting with the techniques outlined here. Thanks for the post Dave.

]]> Fri, 17 Dec 2010 20:00 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16775#date:20:00 Comment by Nirav Mehta I’ve been keeping away from SASS as I thought it was too complicated - at least their site made me go away. This introduction rekindled that interest. It’s amazing what can be done with this, and I am going to try it out soon. Did not like the Ruby dependency though.. I’ve been keeping away from SASS as I thought it was too complicated - at least their site made me go away. This introduction rekindled that interest. It’s amazing what can be done with this, and I am going to try it out soon.

Did not like the Ruby dependency though.. wink

]]> Fri, 17 Dec 2010 19:40 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16774#date:19:40 Comment by Awesome Bob Boo at Ruby. Loved the rest. Boo at Ruby. Loved the rest.

]]> Fri, 17 Dec 2010 19:27 GMT http://www.sencha.com/blog//an-introduction-to-theming-sencha-touch#id:16773#date:19:27