Custom Styling a Sencha Touch App
We all want our mobile app to look distinct, and with Sencha Touch it's quite easy to do. There are many additional reasons however to generate our own CSS, which is what we will take a look at here. One of the biggest reasons is actually to save file size, improving the time it takes to display our mobile app to the user. As it is, Sencha Touch comes with a very inclusive CSS file which has all of the components included - whether your using them or not - and a bunch of sample pictos. Let's get started removing some of this bloat from the default CSS.
Trimming The Fat
The default CSS that ships with Sencha Touch is roughly 133KB, which is honestly quite enormous. One way to trim some of the fat is to exclude styles for components, parts of components, or UI features that we're not using. There are a ton of variables built in that we can set to exclude certain things - some of these can be found in the 'resources/themes/stylesheets/sencha-touch/default/_variables.scss' file, and others will have to be tracked down by examining the other SCSS files in the widgets folder. Some of the standard ones include:
$include-form-sliders: false; $include-floating-panels: false;
Let's go ahead and modify the '_variables.scss' file to set the two above variables to false, removing the '!default' flag as well, since we're going to override this default value with our own. If we poke around in the other SCSS files in the widgets folder, we will will find many more of these variables, such as:
$include-top-tabs: false; $include-bottom-tabs: true !default;
Adding these variables to the '_variables.scss' file will let us override these settings in a central location. For my usage, im excluding the 'top-tabs' by setting the value to false. I'm not using top tabs in my mobile app, so I wont miss them. Now that we're done with those changes, let's move on to generating the new CSS.
Generating The CSS
We have made some changes to our SCSS, now we need to generate the new CSS file that Sencha Touch needs by using Ruby, Compass & SASS. I'm not going to get into detail about how to install these things, but I will say that you need to first install Ruby so that it can be used from the command line, then install rubygems and use rubygems to install the compass and haml gems (haml is a dependency of compass, so it's installed for you).
Generating the CSS from our SCSS files is a simple one line command that is executed from within the resources folder:
D:\Workspace\SpeckleMobile\src\resources>compass compile sass exists sass/../css compile sass/android.scss overwrite sass/../css/android.css compile sass/apple.scss overwrite sass/../css/apple.css compile sass/sencha-touch.scss overwrite sass/../css/sencha-touch.css
I have included the successful output as well, which has generated the new CSS and placed it in the 'css' folder within our current directory. This will replace the existing 'sencha-touch.css' with our newly generated one. There will be no visible change in our app yet, however the file size will decrease. Poking around in the SCSS files in the widgets folder will reveal many more variables that can be set to reduce file size by excluding unused features. Let's next take a look at altering the color scheme.
This is the point where we can really make some drastic styling changes with minimal effort. The '_variables.scss' file has a few options for changing color, but one main color can be used and the rest of the colors are extrapolated from it by altering the saturation and darkening or lightening the color. This main color is aptly named 'base-color' - go figure. I'm going to change it to a nice minty green.
After compiling the SASS again, we end up with a very different looking application. We can change the look of the app by modifying this single color and achieve a wide variety of color schemes.
If we go with a very light color then the active color will become so light that it starts to blend with the surrounding colors. To counteract this over-lightening we can adjust the 'active-color' variable in the '_variables.scss' file by either setting it to a color we prefer, or adjusting the saturation and darkness.
$base-color: #e2f0cc; $active-color: darken(saturate($base-color, 55%), 90%); // $active-color: #212325;
There are also variables to set the active color to an exact color, such as 'tabs-light-active' - these can be found by looking at the '_tabs.scss' file located in the widgets folder. A little exploration can reveal a ton of variables we can use to change the styling of our app (I can't stress this enough). Next, let's take a look at removing some more bloat by including only the icons we need in our app.
Icons, aka Pictos
The default CSS comes with a couple dozen icons, many of which we will not need in our app. First we need to add a setting to the '_variables.scss' file that excludes this default set of icons.
This leaves us with no icons included, so if we we're to compile the new CSS at this point, all of the icons just show up as square boxes with a gradient in them - notice the generated css file is almost half the size now. Now let's figure out which icons we need and add them back in one at a time. Take the following steps:
- Add a scss file to the 'default' folder called '_my.scss'
- Edit the file adding '@import 'my/pictos';'
- Add a folder in the 'default' folder called 'my'
- Add a scss file to the 'default/my' folder called '_pictos.scss'
- Edit the '_all.scss' file in the 'default' folder, adding '@import 'my';'
That sets up our custom SCSS includes where we can place our extra styling and icons. Edit the 'default/my/_pictos.scss' file and add our icons using the 'pictos-iconmask' mixin.
@include pictos-iconmask('search'); @include pictos-iconmask('bookmarks'); @include pictos-iconmask('time'); @include pictos-iconmask('favorites'); @include pictos-iconmask('settings');
Set Forth and Conquer
I hope that leaves you with enough information to get started hacking around in the SCSS files and creating some really cool color schemes and custom styling. Not to mention, trimming some of the bulk off the default CSS files included in the Sencha Touch SDK download.
Let me know in the comments what interesting variables you have found in the Sencha Touch SCSS files.