Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
02/05/2018

Exercise 2-11: Theming your Apps

Page of 168

Overview

During this exercise you will use Sass and Compass to transform the look and feel of your app.

  • Set the base-color of the application.
  • Reduce the size of the generated CSS file by excluding defaut icons and unused classes.
  • Apply a web font
  • Set a custom toolbar/titlebar image
  • Improve performance by base-64 encoding images

Steps

Set the Base Colors of the App

  1. Using a text editor, open the following file:
    /path/To/Arch101/mobile/lab/exercise11/resources/sass/app.scss
  2. At the top of the file, insert the following code to set the base color and gradient for the app:

    $base-color: #da9100;
    $base-gradient: glossy;


  3. Save the file
  4. Open a Command prompt to /path/To/Arch101/mobile/lab/exercise11/resources/sass/
  5. Type the following command:

    compass watch .

  6. After receiving a message that the app.css file was built, browse to http://localhost/arch101/mobile/lab/exercise11/app.html. You should notice that the colors in your application have changed.
Integrate a Web Font
  1. Underneath the code that you inserted in step 2, add the following declarations to load a Google Fonts API font and use it as the default font throughout your application:

    @import url(http://fonts.googleapis.com/css?family=Rambla:700);
    $font-family: 'Rambla', sans-serif !default;


  2. Save the file
  3. Return to your Command prompt and confirm that Compass has successfully updated the style sheet.
  4. Refresh the application in your browser. You should notice that the fonts have changed.
Theme the Titlebars and Toolbars
  1. At the top of the file, insert the following statement to enable use of the inline-image function to base-64 encode images:

    @import "compass/css3";

  2. Using a text editor, open the following file:

    /path/To/Arch101/mobile/lab/exercise11/resources/sass/config.rb

  3. On line 14, add the following directive that instructs Compass as to where your images are stored:

    images_path = File.join(dir, "..", "images")

  4. Save the file.
  5. At the bottom of the app.scss file, insert the following declarations to theme the toolbars, titlebars, containers:
.x-innerhtml {
 color: #3a1515;
 text-shadow: 0px 1px rgba(255,255,255,.3);
}

.x-toolbar-dark, .x-tabbar-dark {   
   background-image: inline-image('top-grain.png'), -webkit-radial-gradient(top center, circle, #9f5628, #5d2f17);
   background-repeat: repeat-x;
   .x-innerhtml {
     color: #3a1515;
     text-shadow: 0px 1px rgba(255,255,255,.3);
   }
}

.x-scroll-container{
 background: inline-image('background.png');
 background-size: cover;
}
  1. Save the file
  2. Return to your Command prompt.
  3. Press control+c on your keyboard to stop Compass.
  4. Re-run Compass and confirm that Compass has successfully updated the style sheet.

    compass watch .

  5. Refresh the application in your browser. You should notice that the look of the toolbar and titlebars have changed.
Define a Custom Button UI
  1. At the bottom of the file, add the following code to define a custom button ui named "amberBeerButton":

    @include sencha-button-ui('amberBeerButton', #FFAC00,'glossy');

  2. Save the file.
  3. Return to your Command prompt and confirm that Compass has successfully updated the style sheet.
  4. Return to Sencha Architect.
  5. Click on the following View component:

    Main > friends > friendForm > buttonContainer

  6. In the config panel, click on the button adjacent to the Defaults property.
  7. Type the following code into the editor in order to apply the amberBeerButton ui class to each of the buttons:

    {ui: 'amberBeerButton'}

  8. Click Save.
  9. Browse the application. Note that the color of the buttons on the friendform has changed.
Optimize the Stylesheet
  1. Note the size in bytes of the following file:
    /path/To/Arch101/mobile/lab/exercise11/resources/css/app.css
  2. Return to your editor and app.scss.
  3. At the top of the file, insert the following directive that prevents the default iconography from being loaded:

    $include-default-icons: false;

  4. Comment out the following @include statements that generate styles for components that your application is not using:

    // @include sencha-list-paging;
    // @include sencha-list-pullrefresh;
    // @include sencha-draw;
    // @include sencha-charts


  5. Save the file.
  6. Return to your Command prompt and confirm that Compass has successfully updated the style sheet.
  7. Refresh the application in your browser. Nothing should have changed.
  8. Review the size of the /path/To/Arch101/mobile/lab/exercise11/resources/css/app.css file. Compare the file size to the one that you noted from step 24.

-- End of Exercise --

Page of 168
comments powered by Disqus