The document discusses building the Triton theme and admin dashboard for Ext JS. Key points include: - The Triton theme provides prepackaged themes, goes beyond basic kitchen sink themes, and needs a makeover. - New theme properties include being responsive, having a flat design, using font icons instead of images, and being image-less. - The theme hierarchy and variables are explained. Font icons are lighter, resolution free, standard, and allow changing colors. Responsiveness is achieved through layouts, anchors, and responsive configuration.

2. MITUL BID
CEO, CODITAS

3. BUILDING THE TRITON THEME AND
THE ADMIN DASHBOARD

4. THE CONVERSATION

9. TAKE AWAYSTAKE AWAYS
 PREPACKAGED THEMES

12. TAKE AWAYSTAKE AWAYS
 PREPACKAGED THEMES
 MAKEOVER NEEDED

15. TAKE AWAYSTAKE AWAYS
 PREPACKAGED THEMES
 BEYOND KITCHENSINK
 MAKEOVER NEEDED

18. IT IS IN THE ROADMAP !

19. BOOTSTRAP V/S SENCHA

20. NEW THEME PROPERTIES
 RESPONSIVE*
 FLAT DESIGN
 FONT ICON
 IMAGE-LESS

21. NEW THEME PROPERTIES
 RESPONSIVE*
 FLAT DESIGN
 FONT ICON
 IMAGE-LESS

22. DESIGN FIRST

28. DEMO

29. UNDERSTAND THE FRAMEWORK

30.  THEME
 APPLICATION
 USER-INTERFACE
THEMING OPTION LEVELS

31.  THEME
 APPLICATION
 USER-INTERFACE
THEMING OPTION LEVELS

32. THEME HIERARCHY

34. THEME VARIABLES SRC (LINES)
NEUTRAL 1406 18992
CLASSIC 76 216
NEPTUNE 72 394
TRITON 68 1251
GRAY 23 0
BASE 20 2380
CRISP 8 0

35. FONT ICONS

36.  LIGHTER
 RESOLUTION FREE
 STANDARD
 CHANGE COLORS
FONT ICON ADVANTAGES

37.  LIGHTER
 RESOLUTION FREE
 STANDARD
 CHANGE COLORS
FONT ICON ADVANTAGES

38. .#{$prefix}form-date-trigger
{
background-image: theme-background-
image('form/date-trigger');
}
.#{$prefix}form-date-trigger
{
background-image: none;
@extend .fa;
@extend .fa-calendar;
}
CODE

39. RESPONSIVENESS
THROUGH LAYOUTS

40. DEMO

41. 1 2
3 4

42. 1
2
3
4

43. Auto
50%
Auto
50%

44. Auto
50%
Auto
50%
VBOX

45. Auto
50%
Auto
50%
VBOX
ANCHORS

46. 100%

47. 100%
VBOX

48. 100%
VBOX
v
ANCHOR WITH
DISPLAY BLOCK

49. RESPONSIVENESS
USING RESPONSIVE CONFIG

50. DEMO

51. responsiveConfig : {
'width < 1000' :
{
width: 0,
visible: false
},
'width >= 1000 && width < 1600':
{
width: 230,
visible: true
},
'width >= 1600':
{
width: 300,
visible: true
}
}
RESPONSIVE CONFIG CODE

52. mitul@coditas.com
THANK YOU