1. #1
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    104
    Vote Rating
    6
    touchy is on a distinguished road

      0  

    Default Sencha Touch theming guidelines ?

    Sencha Touch theming guidelines ?


    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?

  2. #2
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    773
    Vote Rating
    28
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      0  

    Default


    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

  3. #3
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default


    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,
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

  4. #4
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    104
    Vote Rating
    6
    touchy is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    21
    Vote Rating
    0
    adana325 is on a distinguished road

      0  

    Default Question about the pdf

    Question about the pdf


    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;
    }
    }

  6. #6
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
    davidkaneda is on a distinguished road

      0  

    Default


    @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.

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    21
    Vote Rating
    0
    adana325 is on a distinguished road

      0  

    Default


    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! )

  8. #8
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
    davidkaneda is on a distinguished road

      0  

    Default


    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-

  9. #9
    Ext User
    Join Date
    Aug 2010
    Posts
    48
    Vote Rating
    0
    sandor is on a distinguished road

      0  

    Default


    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):

    Code:
    @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,
    Sandor
    --
    sharksinn gmbh

    corporate links:
    ------------------------------
    http://www.sharksinn.com

    developer links:
    ------------------------------
    http://www.xtuio.com

  10. #10
    Sencha User davidkaneda's Avatar
    Join Date
    Jan 2010
    Location
    Bay Area, CA
    Posts
    147
    Vote Rating
    0
    davidkaneda is on a distinguished road

      0  

    Default


    Just a side note: the app looks fantastic!

Similar Threads

  1. Replies: 10
    Last Post: 20 Jan 2012, 10:10 AM
  2. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM
  3. Replies: 2
    Last Post: 9 Sep 2010, 10:24 AM

Thread Participants: 5