1. #1
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default Styling, Compass and SASS (0.94)

    Styling, Compass and SASS (0.94)


    After upgrading to 0.94 I need to change some of the styling again.

    How do I set up and compile the new structure/project?

    I am a total newbie to Ruby, Compass and SASS so a step by step recipe would be great.

    Basically I only need to change the $base_color: variable and recompile the css.

    Any help would be greatly appreciated.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,951
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    There's lots of tutorials out there: http://net.tutsplus.com/tutorials/ht...-next-project/
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Thanks for the quick reply and the link. But not really what I was looking for.

    I have installed compass and played arpund with sass but I am more interested in how to specifically set up and compile the files located in sencha-touch-beta-0.94/resources to produce a new ext-touch.css with the colors I need (Commercial Branding).

    I was able to complile older versions (after a while) but 0.94 seems to contain a different (more complicated) folder structure.

    Everything I try seems to result in errors.

    We have implemented a comercial business App using Sencha-Touch that is ready for Beta testing and I only need to change the colors of the toolbars and buttons before I can release it.

    I am assuming that I need to change the variables like "$base_color:" found in "sencha-touch-beta-0.94\resources\themes\stylesheets\sencha-touch\default\_variables.scss" - But I am only guessing.

    Do I need to set-up-any-new/change-any config files or should I just be able to make the changes and then compile everthing as is?

    Like I said I am new to compass and sencha's sass resources are a little hard to follow. Spending hours of time learning SASS and COMPASS to figure this out by myself is not very cost effective when all I need to do is change 1 or 2 colors.

    Have I understood how sencha is ment to be styled or am I fiddling in the wrong place?

    If I am on the right track all I need is a pointer as to what files/variables control the base colors, help setting up any config files if needed and instructions as to what/where (folder) to compile to produce a new ext-touch.scss with correct colors.

    Also... Is this stuff documented anywhere?

    Any help is greatly appreciated.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,951
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Assuming you have everything installed:

    1) Create a new folder, myproject
    2) Copy the resources/sass and resources/themes folder to myproject
    3) Open themes/stylesheets/sencha-touch/default/_variables.scss
    4) Change $base_color to #ff0000
    5) cd myproject
    6) compass compile sass
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Yeah... Thats what I figured and have been trying to do...

    Here is a screen shot.



    Any ideas what I am doing wrong.

  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


    Hi all — I know this is not the response you're looking for, but I would hold off on major styling at the moment. .94 and .95 represent the start of a major refactoring, which will be finalized by 1.0. A lot of variables are either changing names (to be better scoped) or turning into mixins. Around 1.0, we'll start to release demos and tutorials that cover styling in great detail.

    In the meantime, if you are feeling extra experimental, just make sure you're running the very latest version of Compass — it's necessary to use our new sencha-touch compass "Extension".

  7. #7
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Cool.. I'll try upgrading compass.

    Fully understand regarding senchas position regarding styling at the moment.

    Thanks for the reply.

  8. #8
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Well. I upgraded to 0.10.5 but still get the same error.

    It was worth a try ;-)

  9. #9
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Wohoo!

    I upgraded to Sencha-Touch 0.95 and it compiled!!!

  10. #10
    Sencha Premium Member
    Join Date
    Aug 2008
    Location
    USA
    Posts
    61
    Vote Rating
    1
    Podlipensky is on a distinguished road

      0  

    Default


    How did you run compass command successfully? Here what I got:
    Code:
    c:\Personal\sencha-published\resources>compass compile sass
    'compass' is not recognized as an internal or external command,
    operable program or batch file.
    Did you change something in global variables in Windows?
    My recent commitment into Sencha community:
    Star Rating Field: https://github.com/podlipensky/Ext.ux.touch.Rating
    Sencha Articles on my blog: http://podlipensky.com

Similar Threads

  1. How can I compile css using sass?
    By meshulro in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 29 Sep 2010, 2:28 PM
  2. Compiling SASS files into one css file
    By Acsm in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 13 Sep 2010, 1:57 PM
  3. sass, compass, ruby getting started problems
    By willi in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 9 Sep 2010, 2:06 AM
  4. positioning and styling
    By willi in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 7 Sep 2010, 9:24 AM
  5. Is SASS the direction for CSS in Ext JS 4.0?
    By stever in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 26 May 2010, 7:30 AM

Thread Participants: 3