Advance Theming with Sencha Fashion

In this session Lee Boonstra, course creator of the Sencha advanced theming course, will show you how to create professional themes for cross platform apps with Sencha Fasion. A talk about Sass, Cmd, variables and skins! You will learn how to make your components look different and unique

Transcript

2. Advanced theming techniques for Ext JS Lee Boonstra, Sencha Inc. @ladysign
3. Sales Engineer, Sencha Inc.
4. Lee Boonstra Sales Engineer & Trainer Sencha Twitter: @ladysign http://www.ladysign-apps.com
5. I  <3  JavaScript!  
6. I  <3  JavaScript!  
7. I  <3  JavaScript!   Purposes of JS: •  Enrich websites •  Build web applications •  Create native phone, tablet & desktop apps with Cordova •  Generate PDFs with JavaScript •  Create real-time web applications and web servers with Node JS •  Create browser chat and video apps with WebRTC •  Create 3D games with WebGL •  Web scarping & screenshotting with Phantom JS! • Compile Sass Stylesheets with Sencha Fashion!
8. A talk about design! •  Theming inheritance •  Sass Basics •  Unique Components •  Fashion
9. Design…
10. 2 things I learned…
11. 2 things I learned… 1.  The art director is always right
12. 2 things I learned… 1.  The art director is always right 2.  In case he is not right, then we will do everything to make sure he get his right
13. The problem we developers face… What the designer promised. (Is there a Lego image? Image 1. Some advanced construction. Image 2. Just square blocks) The toolkit that the developer has.
14. In an ideal world… …the designer knows the complete framework.
15. Sencha Demo Apps h"p://dev.sencha.com/ext/5.0.1/examples/themes/index.html  
16. App Templates
17. Prototype with Sencha Architect
18. We want custom designs!
19. Theming Inheritance
20. Ext JS 6 - Toolkits •  CLASSIC Toolkit Components with the (Ext JS) desktop themes. •  MODERN Toolkit Components with the (Sencha Touch) mobile device themes.
21. Out of the box themes
22. Neptune theme-neptune theme-neptune-touch
23. Crisp theme-crisp theme-crisp-touch
24. New Theme: Triton •  Universal theme •  Flat design •  No images •  Just CSS & icon & web fonts •  Easily change colors
25. CLASSIC Toolkit > Inheritance base neutral classic NEW ARIA neptune crisp neptune touch crisp touch gray
26. MODERN Toolkit > Inheritance base cupertino cupertino -classic mountain view windows BB neptune
27. You can extend too! base neutral neptune classic custom crisp crisp touch NEW neptune touch base cupertino cupertino -classic mountain view windows BB neptune custom
28. How to pick a theme?
29. How to pick a theme? app.json “theme”:    “theme-­‐neptune”     •  theme-­‐neptune   •  theme-­‐neptune-­‐touch   •  theme-­‐crisp   •  theme-­‐crisp-­‐touch   •  theme-­‐cupertino   •  …    
30. How to serve a theme? app.json “theme”:    “theme-­‐neptune”     •  theme-­‐neptune   •  theme-­‐neptune-­‐touch   •  theme-­‐crisp   •  theme-­‐crisp-­‐touch   •  theme-­‐cupertino   •  …  
31. How to serve a theme (in Ext 6)? app.json   ///"theme":  "ext-­‐theme-­‐neptune",   "builds":  {      "classic":  {      "toolkit":  "classic",      "theme":  "theme-­‐neptune"    },    "modern":  {      "toolkit":  "modern",      "theme":  "theme-­‐cupertino"    }   }  
32. Sass Basics
33. Write Sass, compile CSS Ext JS 4, Ext JS 5 & Sencha Touch 2 are running on top of Sass & Ruby! Ext JS 6 runs on top of Sencha Fashion! (but you will still write .SCSS files with the modern Sass syntax!) Sencha Cmd does the trick!
34. Fashion? “A brand-new blazing fast Sass compiler from Sencha written entirely in JavaScript. The developer achieved amazing improvements in productivity by using Sencha Fashion to compile the application's CSS.”
35. Sass Variables 1 $main&bg&color:#red;# 2 $main&color:##fff;# 3 # 4 .mypanel3{# 5 333background:#$main&bg&color;# 6 333color:#$main&color;# 7 }# ## //".mypanel"{"background:"red;"color:"#fff;"}# #
36. Code transformations 1 $main&bg&color:#red;# 2 .panel0{# 3 ###background:#lighten($main&bg&color,#30%);# 4 # 5 000color:##fff;# 6 000padding:#20px;# 7 }# #
37. Simple Math 1" $container*width:"300px;" 2" $font*size:"12px;" 3" $height:"1in4+"10px;" 4" .mypanel4{" 5" """width:"($container*width4/"3)"0"20px;" 6" """line*height:"$font*size4*"1.5;" 7" """min*height:"$height;" 8" """margin:"0"10px;" 9" }" " //".mypanel"{"""width:"80px;"line6height:"18px;" min6height:"1.10417in;"margin:"0"10px;"}" "
38. Sencha Variables •  Global CSS Variables •  Apply to the overall Style Sheet •  Component CSS Variables •  Apply to an Ext component
39. Global Vars Global variables which change the Overall look of the application: $base-­‐color   $font-­‐family   $font-­‐size   …  
40. Component Vars Variables for components specific: Button: $button-­‐default-­‐base-­‐color   $button-­‐default-­‐base-­‐color-­‐over   $button-­‐default-­‐color   $button-­‐toolbar-­‐base-­‐color   …  
41. How to compile?
42. Compiling the SCSS Variables are located in the sass/var/Application.scss.   Compile the Style Sheet with: >  sencha  app  build     >  sencha  app  watch  
43. Compiling the SCSS Variables are located in the sass/var/Application.scss.   Compile the Style Sheet with: >  sencha  app  build     >  sencha  app  watch  
44. Unique Components
45. Unique Components There are two solutions on how to give components a unique look and feel: •  Sencha UIs •  Style overrides UIs and CSS rules are located in: the sass/src/Application.scss.
47. UIs are Sass mixins under the hood An example of a mixin in Sass: 1 @mixin&custom,button($color)${$ 2 &&&background,color:$$color;$ 3 &&&&:hover&{$ 4 $$$$$$background,color:$lighten($color,$20%);$ 5 $$$}$ 6 }$ 7 $ 8 .x,btn.custom&{$ 9 $$$@include&custom,button(red);$ 10 }$ $
48. Mixins Compiled to: 1 .x"btn.custom+{$ 2 $$$background"color:$red;$ 3 }$ 4 .x"btn.custom:hover{$ 5 $$$background"color:$#ff6666;$ 6 }$ $
49. UI Skins 1 @include)extjs.button.small.ui(# 2 ###$ui:#'cancel',# 3 ###$background.color:#red,# 4 ###$background.color.over:#darken(red,#50%),# 5 ###$background.color.disabled:#lighten(red,#50%),# 6 ###$color:##fff,# 7 ###$glyph.color:##fff# 8 );# #
50. Sencha UI’s There are various components that have UIs: •  Global CSS •  Panels •  Windows •  Toolbars •  Buttons
51. Style overrides Every component in Ext JS will have it’s own prefix. .x-prefix
52. Style overrides tips & tricks •  Never style on tag names, or internal IDs DOM is different across browsers or framework versions •  Never make selectors too specific When you change your views, the styling would break •  Create your own CSS classes on components Your code is future proof •  Give your own custom components its own prefix It won’t collide
53. When Sencha UIs? Advantages •  Creates a new skin •  Set every CSS rule for this specific component •  By default cross browser compatible Disadvantages •  Can increase the file size of your Style Sheet •  Not every component has its own UI skin
54. When Style overrides? Advantages •  Simple solution •  Won’t increase the file size of your Style Sheet Disadvantages •  Overrides are visible in the compiled CSS •  Hard to maintain •  You will need to understand the Ext JS DOM
55. Fashion
56. Why not Less? •  No default variables •  No conditional statements •  Not backwards compatible with Ext JS 4 & Ext JS 5 themes.
57. Fashion is more. •  Backwards Compatible! •  Works with Ext JS 4 and Ext JS 5 StyleSheets •  JavaScript Compilation of Sass! •  Way Faster! •  Runs in browser •  Possible to debug •  You can extend on top of Fashion •  No Ruby (and Sass/CSS) dependencies! •  You don’t need to have Ruby installed •  No sass-cache meta files under source control •  No Ruby coding experience
58. Under the hood… How the Fashion compiler works…
59. DEMO Fashion •  sencha  app  watch   •  http://localhost:1841? platformTags=fashion:true •  @debugger;  
60. Extend on top of Fashion 1)  Create a JS file in sass/etc directory. (f.e. extensions.js) 2)  In your Sass StyleSheet: @require  “../extensions.js”; 3)  Write the JS extension: Fashion.Runtime.register({    multiply:  function(col1,  col2)  {          var  r  =  (col1.r  *  col2.r)  /  255,                        g  =  (col1.g  *  col2.g)  /  255,                        b  =  (col1.b  *  col2.b)  /  255;                                          return  new  Fashion.Color(r,g,b,1);                }   });     4) Use it: multiply(red,  gray);    
61. Fashion Types •  Fashion.Bool   •  Fashion.Number   •  Fashion.String   •  Fashion.List   •  Fashion.Color   •  Fashion.ColorStop   •  Fashion.LinearGradient   •  Fashion.RadialGradient     Take a look in the source! Cmd/bin/extensions/sencha-fashion/fashion/
62. Fashion will be enabled by default Important: Live Update will only work when viewing the page from the Cmd web server. In Ext JS classic toolkit, some Sass changes may require a layout or a full page reload. This will be less of an issue in the modern toolkit since it is more heavily based on CSS3 and will reflow to accommodate more aggressive changes.
63. Theme Organization
64. Customizing the app theme •  Variables into: sass/var/Application.scss •  Mixins and CSS rules into: sass/src/Application.scss
65. Examples Variables Mixins and CSS rules Application.js sass/var/Application.scss view/main/Main.js sass/var/view/main/Main.scss view/settings/Settings.js sass/var/view/settings/Settings.scss Application.js sass/src/Application.scss view/main/Main.js sass/src/view/main/Main.scss view/settings/Settings.js sass/src/view/settings/Settings.scss
66. Generating your own theme Advantages: •  This theme can be reused through all your projects •  You can create your own inheritance >  sencha  generate  theme  MyNewTheme  
67. Why your own theme package? Workspace ext packages global theme packages/MyNewTheme/sass AUDIO APP VIDEO APP app specific styles AudioApp/sass/ app specific styles VideoApp/sass/
68. Why your own theme package? Workspace ext packages global theme packages/MyNewTheme/sass AUDIO APP VIDEO APP app specific styles AudioApp/sass/ app specific styles VideoApp/sass/
69. packages/MyTheme/package.json 1 {# 2 ####"name":#"MyNewTheme",# 3 ####"type":#"theme",# 4 ####"extend":#"theme%neptune",#//ext9theme9 neptune#in#ext#5# 5 ####"toolkit":0"classic",0 6 ####"creator":#"Lee#Boonstra",# 7 ####"summary":#"Short#summary",# 8 ####"detailedDescription":#"Long#description",# 9 ####"version":#"1.0.0",# 10 ####"compatVersion":#"1.0.0",# 11 ####"format":#"1",# 12 ####"output":#"${package.dir}/build",# 13 ####"local":#true,# 14 ####"requires":#[]# 15 }# # #
70. Customizing the global theme packages/MyNewTheme/sass/ packages/MyNewTheme/resources/ Ext.Component packages/MyNewTheme/sass/src/Component.scss Ext.grid.Panel packages/MyNewTheme/sass/src/grid/Panel.scss Ext.Component packages/MyNewTheme/sass/var/Component.scss Ext.grid.Panel packages/MyNewTheme/sass/var/grid/Panel.scss packages/MyNewTheme/resources/fonts/MyFont.ttf packages/MyNewTheme/resources/images/logo.png
71. Compile order variables (var) mixins / CSS rules (src) app specific global theme code packages global theme code packages app specific
72. !default Assign a default value in the (global) theme. Override the value in an app theme. Global Theme: $base-­‐color:  red  !default;   App Theme: $base-­‐color:  blue;  
73. !default Example App Theme: (myapp/sass/) $base-­‐color:  red;   Global Theme: (packages/MyNewTheme/sass/) $base-­‐color:  blue;     Global Theme: (packages/MyNewTheme/sass/) $base-­‐color:  blue  !default;    
74. app.json 1 /**" 2 *#Sass#configuration#properties." 3 #*/" 4 "sass":"{" 5 ####"namespace":""MyApp"" 6 }," " "
75. Conclusion
76. Final words Theming in Ext JS requires: •  Knowledge of the framework •  Sass / CSS knowledge •  Sencha Variables •  CSS overrides vs Sencha UIs •  Knowledge of the theme inheritance •  Fashion
77. You can make beautiful themes!
80. Checkout: Theming Contest in July!
81. Questions?
82. Resources Twitter: @ladysign | lee@sencha.com •  http://www.speakerdeck.com/savelee •  https://github.com/savelee/senchacon2015 •  http://dev.sencha.com/ext/5.0.1/examples/themes/index.html •  http://docs.sencha.com/extjs/5.0/core_concepts/theming.html
83. Thank you! Lee Boonstra @ladysign lee@sencha.com
84. Why  would  you  choose  the  modern  toolkit  for  desktop  apps?    >  Performance  reasons.  The  Modern  (Sencha  Touch)  toolkit,  has  a  layout  engine  which  uses  CSS3  i.s.o.  JS.   Will  the  modern  toolkit  /  themes  have  RTL?    >  Not  at  release.  But  eventually.   I  didn’t  see  the  Tizen  theme  listed.  Did  we  drop  it?    >  Not  officially.  It’s  just  not  there  yet.  On  request  we  will  add  it.   Will  the  new  Classic  theme,  extend  from  Neptune  and  have  the  same  vars?    >  Yes.