Sencha Themer

1. © 2016 Sencha Inc
Build Great Looking Web App Themes with
Themer 1.1
Sandeep Adwankar
Sr. Product Manager

2. © 2016 Sencha Inc
Sencha Themer
• Design themes in an interactive visual
environment - no code
• Quick configurations for global theme
variables
• Support for component UIs
• View live style update to your Ext JS app –
No compile, build, reload
• Package your theme, apply to your app
and share with ease
2

3. © 2016 Sencha Inc
Classic Toolkit Modern Toolkit
base
neutral
classic
gray
neptune
crisp
crisp-touch
neptune-touch
triton
base
neptune
triton
ios
material
Create custom theme starting from Ext JS theme

4. © 2016 Sencha Inc
Supports theming apps with classic and modern toolkit
4

5. © 2016 Sencha Inc
Theme with innovative color selectors
• Color Palette showing base,
background and text color with 5%
lighter and darker
• Material Design based Color Palette
5

6. © 2016 Sencha Inc
Get comprehensive view of all updated styles
• View all Sass variables that you can
style
• As you style your app, filter view to see
updated Sass variables and their
values
6

7. © 2016 Sencha Inc
Easy way to add web fonts
• Add Google font URL to use web font
in your app
• Apply the web font to any component
7

8. © 2016 Sencha Inc
Manage “Big” mode for modern apps
• Themer creates “Big Mode” variables
to be more touch-friendly
- In Phone view
- Inspecting an app in “Big” mode
8

9. © 2016 Sencha Inc
What New in Themer 1.1
• Support for UIs for components such
as grid, list, tabpanel, title bar, form
components (text, datepicker), and
more
• Connect your app to Themer and
Inspect app
• Modify component styles and UI in
Inspect mode
9

10. © 2016 Sencha Inc
Themer 1.1 – Supports Extensive Component UIs
• Support for modern grid, list, tabpanel,
title bar, form components and more
• Full access to all Sass variables for
“UI” configuration.
10

11. © 2016 Sencha Inc
Column Header
Check Column Header
Group
Header
Row
Check
Cell
Expander
Cell
Paging
Toolbar
Text
Cell
Row Numberer
Cell
Number
Cell
Widget
Cell
Date
Cell
Theming Modern Grid

12. © 2016 Sencha Inc
Themer 1.1 – Theme Modern Grids and Make Them Unique
• Modern Grid consists of grid cells,
rows, columns, column header, paging
toolbar and more
• With Themer, each of these
subcomponents can be uniquely
themed
• Just add “ui” config for the specific
subcomponent in the grid and then
theme the UI with Themer.
12

13. © 2016 Sencha Inc
Themer 1.1 – Easily Connect app to Themer
• Directly connect your app to Themer
• Update app.json and view connected
apps from View -> Connected Apps
13

14. © 2016 Sencha Inc
Themer 1.1 – Directly Theme your app
• Inspect mode provides fine-grained
control over style selection in Your App
• Modify Sass variables and see
changes live
• Inspect mode allows freezing and
locking state of all components in
preview app
• Easy way to theme component states
such as – hover, pressed, open
14

15. © 2016 Sencha Inc
Themer 1.1 – Inspect and Style with Component Tree
• In “Inspect” mode, click on the app and
view component tree
• View and them selected component’s
styles and UIs
15

16. © 2016 Sencha Inc
Themer 1.1 – Import Colors from CSS
• Import colors from existing css files
and add to color palette
• Color palette will show imported colors
with lighter and darker options in
increments of +/- 5%.
16

17. © 2016 Sencha Inc
Architect 4.1.2 – New release to support Themer 1.1
• Import themes with UIs created using
Sencha Themer
• Architect copies theme package and
applies theme to app
17Pro and Premium

18. © 2016 Sencha Inc
Demo
Themer 1.1
18

19. © 2016 Sencha Inc
Theming Contest – Only 2 Weeks Left to win $2500
• Download Themer 1.1
• Download new contest app
https://www.sencha.com/sencha-theming-
contest-2016/
• Theme the app and send us github link
to your theme at contest@sencha.com
19
Theming Contest App

20. © 2016 Sencha Inc
Q & A
20