php|architect - July 2013 by php|architect

Author:php|architect
Language: eng
Format: epub
Publisher: php[architect]
Published: 2013-07-27T04:00:00+00:00

Styling and Fine-tuning Beyond the Basics

All the standard components are, of course, a great way to get your basic applications out there and to provide your users with the services they are looking for, but your app might not feel ‘hipster’ enough yet. To work on putting your own flavor on your app, you can get creative by styling the components you’re using.

For this, Sencha uses a Ruby gem called Compass (http://compass-style.org). Compass is described as a “CSS Authoring Framework” and is built on SASS which describes itself as “an extension of CSS3”.

Once you have the Ruby gem installer on your system (installed by default on Macs), you can run the following command to get Compass:

gem install compass

You’ll need to do this only once as it will make Compass generally available on your system.

You can then go to the folder containing your project’s SASS file (by default: resources/sass), and run the following command:

compass watch

Compass will now listen for changes to your app.scss file and trigger a new build of the CSS once you save the SASS file. Remember that building might take some time. Before you refresh your browser, you might want to check your command-line screen to see if building the file has already finished.

Now it’s time to start editing. Open the resources/sass/app.scss file. The most basic editing is just plain CSS you’d use in any web application or website, but SASS really shows its power when we start using the pre-defined variables.

The most drastic change is to change the $base-color variable provided by Sencha Touch. By putting the following line on top of our app, we will see a huge change in our color scheme:

$base-color: #DC5921;

Once Compass has finished building the application, we will see that the whole color scheme has changed to php[architect]’s main color, as shown in Figure 6.

Figure 6: The event being handledAll the available SASS variables and mixins can be found in the Sencha Touch documentation and provide a lot of ways to style an app in any way you see fit.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.