Sencha Touch theming guidelines ?

[touchy]

How can we start our company theming work today without next week feeling we did it all wrong and should start over after we'll attend Nov. 17th presentation: "Theming Sencha Touch by David Kaneda: Sencha Touch features a novel theming system built on top of SASS & Compass. This session will show you how to quickly customize the look and feel of your application, extend core styles, and optimize your stylesheets to download faster. Lot of code samples and walkthroughs included."

Any writeup posted anywhere that we should have found already?

[Steffen Hiller]

David Kaneda posted recently a nice theming guide on Twitter which is still work in progress, and things gonna change like "_" in var names will changed to "-".
But it gave me a good idea about the theming stuff. Since I saw it on Twitter I guess it's not secret: http://cl.ly/34p6

[sandor]

SWEET! Thanks Steffen. I have spent a part of my weekend playing around with SASS & Compass. Great tools. Wish i had this info on sunday ;-) I ended up by customizing some of the existing parts (i.e. a docked toolbar at the bottom) - and this is i quess not correct. Is there an easy way to declare/define a new kind of toolbar without destroying the default one?

Thanks,

[touchy]

Extend the Sencha Touch class (that's not a HTML or CSS class) Ext.Toolbar to create a subclass. Possible e.g. by using method Ext.extend. Then change config options like cls, baseCls, componentCls, whichever you need. Double check effect of your changes in desktop Safari by looking at elements. See http://dev.sencha.com/deploy/touch/docs/ both for class Ext.Toolbar and class Ext.

[adana325]

Hi there, I am a coworker of touchy's..thanks for the PDF..very helpful!

I was able to create my own .scss file and use it to change default variables.

One thing that I need to do is alter the default list widget and remove a bunch of padding around each item. What is the the best practice way to do this kind of thing? I do want to change the default behavior for lists. I can change the _list.scss file successfully and do it..but that doesn't seem right.

I tried adding the following to my custom .scss file both before and after the @import section. It doesn't fail but doesn't return any error messages. No idea if I am on the right track or not :-)

@mixin sencha-list{
.x-list-group-items > .x-list-item,
&.x-list-flat .x-list-parent > .x-list-item {
padding: 0em;
}

}

[davidkaneda]

@touchy — Generally, unless you're doing a giant style rewrite, it's best to leave those classes alone and only extend the 'ui' attribute when styling components.

@adana325 — Great to hear you were able to get up and running! Any input to that doc is greatly appreciated. Note: You're _defining_ a mixin there, but probably not calling it. Remove the @mixin line (and closing bracket) and include that after the @imports section (just as a plain ol' custom style) and it should overwrite the default ones. You could also try using !important in case we changed how the rules cascade.

[adana325]

Ah, yes that did it thanks!

For anyone who stumbles across this later, what actually worked for me was this rule after the @imports section. (I had to look up what & did in Sass as well..I had I tried just sticking the syle in before posting and it hadn't worked for me.)

.x-list {
.x-list-group-items > .x-list-item,
&.x-list-flat .x-list-parent > .x-list-item
{
padding: 0em;
}

}

edit: and I don't even need the !important..that's great. I hate to use them. (This is my first week with Touch but I've used EXTJS Grid a bit. The framework has a ton of useful options which I great..but I find the CSS kind of hard to manage. Things are declared with such specific selectors that it can be really hard to gain control where I need it. I guess that is a by product of all those useful options! )

[davidkaneda]

Just to clean it up some, you could also probably just do:

.x-list-item { padding: 0 !important; }

Because we don't use importants in the framework, you shouldn't have to worry much about the selector specificity-

[sandor]

David, thanks for commenting. Well that was my intention - not to rewrite a
bunch of things and i don't want to touch the classes. Currently i am using
following "hack" - which works well for this single application since i am
having only one toolbar that is docked on the bottom (see the attached
picture - it is the toolbar on the bottom). I know it is very ugly on this
way. So that's why i would love to see a different 'ui' for this (if such
things are even possible):

@mixin sencha-toolbar {
  
  .x-toolbar {
    height: $global-row-height;
    padding: 0 $toolbar-spacing * 2;
    overflow: hidden;
    position: relative;
    
    & > * {
      z-index: 1;
    }
    
    &.x-docked-top {
      border-bottom: .1em solid;
    }

    &.x-docked-bottom {
      border-top: .1em solid;
      height :	3.2em;

	.x-segmentedbutton .x-button {
		@include border-radius(0);
	    margin: 0;
		border-top: 0;
		border-bottom: 0;
		border-left-radius: 0;
	    &:first-child {
	      @include border-left-radius(0);
	    }
	    &:last-child {
	      @include border-right-radius(0);
	    }
	    &:not(:first-child) {
	      border-left: 0;
	    }
	

		img {
	        -webkit-mask-size: $toolbar-bottom-icon-size;
	        width: $toolbar-bottom-icon-size;
	        height: $toolbar-bottom-icon-size;
	        display: block;
	        margin: .0em auto .0em;
	        position: relative;
	      }
		.x-button-pressed {
	        img {
	          @include background-gradient($button-active-color);
	        }
	      }

		.x-button-active {
	        img {
	          @include background-gradient($button-active-color);
	        }
	      }

		 .x-button-label {
	        margin: 0;
			margin-top: 3px;
	        font-size: 12px;
	        line-height: 12px;
	        text-rendering: optimizeLegibility;
	        -webkit-font-smoothing: antialiased;
	      }
	
	  }
    }
  }

Thanks,

[davidkaneda]

Just a side note: the app looks fantastic!