SHINOBU KAWANO JavaScript / UX Design / Sencha Web Techinologies

Hello, Sencha Touch Flat UI Theme :)

Do you like Flat Design? If so, this is maybe good news for Sencha Touch developers.

This weekend, I created Sencha Touch custom theme based on Flat UI. You can check it at demo site, I deployed kitchin sink app with this theme.

Kitchen Sink with Flat UI Theme:

http://shinobukawano.com/apps/sencha-touch-flat-ui/

Repository is here:

https://github.com/shinobukawano/sencha-touch-flat-ui-theme

Usage

Easy to use, copy and compile.

Copy dist/src directory’s file to your project’s resource/touch directory.

cp -r ../sencha-touch-flat-ui-theme/dist/src/ touch/resources/`

Update your project’s app.scss file as following.

// @import 'sencha-touch/default';  
// @import 'sencha-touch/default/all';  
@import 'sencha-touch/flat';  
@import 'sencha-touch/flat/all';

// Custom code goes here..

Then, compile app.scss. That’s it!

compass compile resources/sass/`

Setup

In order to add a new swatch or colors you can add a new stylus file under src/themes/stylesheets/sencha-touch/flat and run grunt from your command line.

  • brew install node
  • npm install -g grunt-cli
  • cd to project's folder
  • npm install
  • grunt watch
  • start modifying src/themes/stylesheets/sencha-touch/flat files

Please try it!

Actually, it was started thanks to one email by foreign developer. it cheers me up :D

I’m happy if you try Sencha Touch Flat UI Theme, feedback is especially welcome!

Showcase