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

1. View Slide

2. Advanced theming
   techniques for Ext JS
   Lee Boonstra, Sencha Inc.
   @ladysign
   

   View Slide

3. Sales Engineer, Sencha Inc.
   

   View Slide

4. Lee Boonstra
   Sales Engineer & Trainer
   Sencha
   Twitter: @ladysign
   http://www.ladysign-apps.com
   

   View Slide

5. I  <3  JavaScript!  
   

   View Slide

6. I  <3  JavaScript!  
   

   View Slide

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!
   

   View Slide

8. A talk about design!
   •  Theming inheritance
   •  Sass Basics
   •  Unique Components
   •  Fashion
   

   View Slide

9. Design…
   

   View Slide

10. 2 things I learned…
    

    View Slide

11. 2 things I learned…
    1.  The art director is always right
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

14. In an ideal world…
    …the designer knows the complete framework.
    

    View Slide

15. Sencha Demo Apps
    h"p://dev.sencha.com/ext/5.0.1/examples/themes/index.html  
    

    View Slide

16. App Templates
    

    View Slide

17. Prototype with Sencha Architect
    

    View Slide

18. We want custom designs!
    

    View Slide

19. Theming Inheritance
    

    View Slide

20. Ext JS 6 - Toolkits
    •  CLASSIC Toolkit
    Components with the (Ext JS)
    desktop themes.
    •  MODERN Toolkit
    Components with the (Sencha
    Touch) mobile device themes.
    

    View Slide

21. Out of the box themes
    

    View Slide

22. Neptune
    theme-neptune theme-neptune-touch
    

    View Slide

23. Crisp
    theme-crisp theme-crisp-touch
    

    View Slide

24. New Theme: Triton
    •  Universal theme
    •  Flat design
    •  No images
    •  Just CSS & icon & web fonts
    •  Easily change colors
    

    View Slide

25. CLASSIC Toolkit > Inheritance
    base
    neutral
    classic
    NEW
    ARIA
    neptune
    crisp
    neptune
    touch
    crisp
    touch
    gray
    

    View Slide

26. MODERN Toolkit > Inheritance
    base
    cupertino
    cupertino
    -classic
    mountain
    view
    windows
    BB
    neptune
    

    View Slide

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
    

    View Slide

28. How to pick a theme?
    

    View Slide

29. How to pick a theme?
    app.json
    “theme”:    “theme-­‐neptune”  
     
    •  theme-­‐neptune  
    •  theme-­‐neptune-­‐touch  
    •  theme-­‐crisp  
    •  theme-­‐crisp-­‐touch  
    •  theme-­‐cupertino  
    •  …  
     
    

    View Slide

30. How to serve a theme?
    app.json
    “theme”:    “theme-­‐neptune”  
     
    •  theme-­‐neptune  
    •  theme-­‐neptune-­‐touch  
    •  theme-­‐crisp  
    •  theme-­‐crisp-­‐touch  
    •  theme-­‐cupertino  
    •  …  
    

    View Slide

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"  
     }  
    }  
    

    View Slide

32. Sass Basics
    

    View Slide

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!
    

    View Slide

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.”
    

    View Slide

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;"}#
    #
    

    View Slide

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 }#
    #
    

    View Slide

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;"}"
    "
    

    View Slide

38. Sencha Variables
    •  Global CSS Variables
    •  Apply to the overall Style Sheet
    •  Component CSS Variables
    •  Apply to an Ext component
    

    View Slide

39. Global Vars
    Global variables which change the
    Overall look of the application:
    $base-­‐color  
    $font-­‐family  
    $font-­‐size  
    …  
    

    View Slide

40. Component Vars
    Variables for components specific:
    Button:
    $button-­‐default-­‐base-­‐color  
    $button-­‐default-­‐base-­‐color-­‐over  
    $button-­‐default-­‐color  
    $button-­‐toolbar-­‐base-­‐color  
    …  
    

    View Slide

41. How to compile?
    

    View Slide

42. Compiling the SCSS
    Variables are located in
    the sass/var/Application.scss.
     
    Compile the Style Sheet with:
    >  sencha  app  build  
     
    >  sencha  app  watch  
    

    View Slide

43. Compiling the SCSS
    Variables are located in
    the sass/var/Application.scss.
     
    Compile the Style Sheet with:
    >  sencha  app  build  
     
    >  sencha  app  watch  
    

    View Slide

44. Unique Components
    

    View Slide

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.
    

    View Slide

46. View Slide

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 }$
    $
    

    View Slide

48. Mixins
    Compiled to:
    1 .x"btn.custom+{$
    2 $$$background"color:$red;$
    3 }$
    4 .x"btn.custom:hover{$
    5 $$$background"color:$#ff6666;$
    6 }$
    $
    

    View Slide

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 );#
    #
    

    View Slide

50. Sencha UI’s
    There are various components
    that have UIs:
    •  Global CSS
    •  Panels
    •  Windows
    •  Toolbars
    •  Buttons
    

    View Slide

51. Style overrides
    Every component in Ext JS will
    have it’s own prefix.
    .x-prefix
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

55. Fashion
    

    View Slide

56. Why not Less?
    •  No default variables
    •  No conditional statements
    •  Not backwards compatible with
    Ext JS 4 & Ext JS 5 themes.
    

    View Slide

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
    

    View Slide

58. Under the hood…
    How the Fashion compiler works…
    

    View Slide

59. DEMO Fashion
    •  sencha  app  watch  
    •  http://localhost:1841?
    platformTags=fashion:true
    •  @debugger;  
    

    View Slide

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);
     
     
    

    View Slide

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/
    

    View Slide

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.
    

    View Slide

63. Theme Organization
    

    View Slide

64. Customizing the app theme
    •  Variables into:
    sass/var/Application.scss
    •  Mixins and CSS rules into:
    sass/src/Application.scss
    

    View Slide

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
    

    View Slide

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  
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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 }#
    #
    #
    

    View Slide

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
    

    View Slide

71. Compile order
    variables (var)
    mixins / CSS rules (src)
    app specific
    global theme
    code packages
    global theme
    code packages
    app specific
    

    View Slide

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;  
    

    View Slide

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;  
     
    

    View Slide

74. app.json
    1 /**"
    2 *#Sass#configuration#properties."
    3 #*/"
    4 "sass":"{"
    5 ####"namespace":""MyApp""
    6 },"
    "
    "
    

    View Slide

75. Conclusion
    

    View Slide

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
    

    View Slide

77. You can make beautiful themes!
    

    View Slide

78. View Slide

79. View Slide

80. Checkout: Theming Contest in July!
    

    View Slide

81. Questions?
    

    View Slide

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
    

    View Slide

83. Thank you!
    Lee Boonstra @ladysign
    lee@sencha.com
    

    View Slide

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.  
    

    View Slide