SlideShare une entreprise Scribd logo
1  sur  35
Télécharger pour lire hors ligne
Monday, November 29, 2010
Theming Sencha Touch




Monday, November 29, 2010
@davidkaneda




Monday, November 29, 2010
Theming is wicked easy!
       CSS3
       Gradients
       Shadows
       Selectors
       !important

       SASS & Compass




Monday, November 29, 2010
The wonderful world of SASS
       Variables
       Mixins
       Color functions
       Compiled into CSS
       Compass
       CSS3 mixins
       Dev tools
       Extensions

       http://www.sass-lang.com
       http://www.compass-style.org/




Monday, November 29, 2010
Variables
                            SCSS                     CSS
      $blue: #3bbfce;                   /* line 4, ../src/test.scss */
      $margin: 16px;                    .example1 {
                                          border-color: #3bbfce;
      .example1 {                       }
        border-color: $blue;
      }                                 /* line 8, ../src/test.scss */
                                        .example2 {
      .example2 {                         margin: 16px;
        margin: $margin;                  color: #3bbfce;
        color: $blue;                   }
      }




Monday, November 29, 2010
Math Functions
                            SCSS                   CSS
      $one: 8px;                      /* line 5, ../src/test.scss */
      $two: 16px;                     .example1 {
      $three: 3px;                      border: 1px solid 4px;
                                      }
      .example1 {
        border: 1px solid $one / 2;   /* line 9, ../src/test.scss */
      }                               .example2 {
                                        margin: 48px;
      .example2 {                     }
        margin: $two * $three;
      }




Monday, November 29, 2010
Color Functions
                            SCSS                             CSS
      .example1 {                               /* line 1, ../src/test.scss */
        color:darken(yellow, 10);               .example1 {
                                                  color: #cccc00;
          background:lighten(blue, 30);           background: #9999ff;
                                                  border-color: #aa0000;
          border-color:saturate(#aa0000, 10);   }
      }
                                                /* line 9, ../src/test.scss */
      .example2 {                               .example2 {
        background:mix(yellow, red);              background: #ff7f00;
      }                                         }




Monday, November 29, 2010
Mixins
                            SCSS                     CSS
      @mixin add-stuff($color) {        /* line 6, ../src/test.scss */
        color:$color;                   .example {
        background-color:#000;            color: blue;
                                          background-color: #000;
          .child {                      }
            padding:5px;
          }                             .example .child {
      }                                   padding: 5px;
                                        }
      .example {
        @include add-stuff(blue);
      }




Monday, November 29, 2010
Compass




Monday, November 29, 2010
Compass
                            SCSS                    CSS
      @import 'compass';               /* line 3, ../src/test.scss */
                                       .example1 {
      .example1 {                        -moz-border-radius: 5px;
        @include border-radius(5px);     -webkit-border-radius: 5px;
      }                                  -o-border-radius: 5px;
                                         -ms-border-radius: 5px;
                                         -khtml-border-radius: 5px;
                                         border-radius: 5px;
                                       }




Monday, November 29, 2010
SASS & Compass




Monday, November 29, 2010
config.rb




Monday, November 29, 2010
myapp.scss




Monday, November 29, 2010
SASS/Compass
                            in Sencha Touch



Monday, November 29, 2010
Variables




Monday, November 29, 2010
$active-color                 $form-textarea-height    $page-bg-color
       $alert-color                  $form-thumb-size         $sheet-bg-color
       $base-color                   $form-toggle-size        $sheet-button-spacing
       $base-gradient                $form-thumb-space        $sheet-padding
       $bright-color                 $form-fieldset-radius     $tabs-bottom-radius
       $button-height                $form-slider-size        $tabs-bottom-icon-size
       $button-radius                $global-row-height       $tabs-bottom-active-
       $button-stroke-weight         $include-button-uis      gradient
       $button-gradient              $include-default-icons   $tabs-bottom-gradient
       $carousel-indicator-size      $include-default-uis     $tabs-dark-color
       $carousel-indicator-spacing   $include-form-sliders    $tabs-dark-active-color
       $carousel-track-size          $include-html-style      $top-tab-height
       $form-bg-color                $include-highlights      $toolbar-spacing
       $form-field-bg-color           $include-tabbar-uis      $toolbar-input-bg
       $form-light                   $include-toolbar-uis     $toolbar-input-color
       $form-dark                    $include-top-tabs        $toolbar-input-height
       $form-label-width             $include-bottom-tabs     $toolbar-gradient
       $form-field-height             $light-tab-color         $toolbar-highlights
       $form-spacing                 $light-tab-active        $toolbar-icon-size




Monday, November 29, 2010
$base-color




Monday, November 29, 2010
$include-highlights: false;




Monday, November 29, 2010
Mixins




Monday, November 29, 2010
Helpful Mixins
       @include background-gradient($bg-color, $type);
       bevel, glossy, matte, flat
       @include color-by-background($bg-color, $contrast: 100%);
       @include bevel-by-background($bg-color);
       @include mask-by-background($bg-color, $contrast, $style);




Monday, November 29, 2010
Combining with JavaScript




Monday, November 29, 2010
The UI attribute
       “UI” can be added to components
       Several components have default UIs

       Toolbar, Carousel, TabBar
       light/dark

       Buttons
       default/drastic/confirm/back/forward & round/small




Monday, November 29, 2010
SCSS




Monday, November 29, 2010
SCSS




Monday, November 29, 2010
SCSS




        JAVASCRIPT




Monday, November 29, 2010
SCSS


        JAVASCRIPT




Monday, November 29, 2010
SCSS


        JAVASCRIPT




Monday, November 29, 2010
SCSS


        JAVASCRIPT




Monday, November 29, 2010
SCSS


        JAVASCRIPT




Monday, November 29, 2010
Icons
       300+ icons included
       SCSS: @include pictos-icon(‘refresh’);
       JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ }




Monday, November 29, 2010
Optimization




Monday, November 29, 2010
Optimization Tips




Monday, November 29, 2010
Optimization Tips
                             Remove unused components
                                  Remove Images
                                    Remove UIs
                              output_style: compressed




Monday, November 29, 2010
Live Demo




Monday, November 29, 2010

Contenu connexe

Plus de Sencha

Plus de Sencha (20)

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
 

Dernier

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Dernier (20)

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 

Theming Sencha Touch

  • 2. Theming Sencha Touch Monday, November 29, 2010
  • 4. Theming is wicked easy! CSS3 Gradients Shadows Selectors !important SASS & Compass Monday, November 29, 2010
  • 5. The wonderful world of SASS Variables Mixins Color functions Compiled into CSS Compass CSS3 mixins Dev tools Extensions http://www.sass-lang.com http://www.compass-style.org/ Monday, November 29, 2010
  • 6. Variables SCSS CSS $blue: #3bbfce; /* line 4, ../src/test.scss */ $margin: 16px; .example1 { border-color: #3bbfce; .example1 { } border-color: $blue; } /* line 8, ../src/test.scss */ .example2 { .example2 { margin: 16px; margin: $margin; color: #3bbfce; color: $blue; } } Monday, November 29, 2010
  • 7. Math Functions SCSS CSS $one: 8px; /* line 5, ../src/test.scss */ $two: 16px; .example1 { $three: 3px; border: 1px solid 4px; } .example1 { border: 1px solid $one / 2; /* line 9, ../src/test.scss */ } .example2 { margin: 48px; .example2 { } margin: $two * $three; } Monday, November 29, 2010
  • 8. Color Functions SCSS CSS .example1 { /* line 1, ../src/test.scss */ color:darken(yellow, 10); .example1 { color: #cccc00; background:lighten(blue, 30); background: #9999ff; border-color: #aa0000; border-color:saturate(#aa0000, 10); } } /* line 9, ../src/test.scss */ .example2 { .example2 { background:mix(yellow, red); background: #ff7f00; } } Monday, November 29, 2010
  • 9. Mixins SCSS CSS @mixin add-stuff($color) { /* line 6, ../src/test.scss */ color:$color; .example { background-color:#000; color: blue; background-color: #000; .child { } padding:5px; } .example .child { } padding: 5px; } .example { @include add-stuff(blue); } Monday, November 29, 2010
  • 11. Compass SCSS CSS @import 'compass'; /* line 3, ../src/test.scss */ .example1 { .example1 { -moz-border-radius: 5px; @include border-radius(5px); -webkit-border-radius: 5px; } -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } Monday, November 29, 2010
  • 12. SASS & Compass Monday, November 29, 2010
  • 15. SASS/Compass in Sencha Touch Monday, November 29, 2010
  • 17. $active-color $form-textarea-height $page-bg-color $alert-color $form-thumb-size $sheet-bg-color $base-color $form-toggle-size $sheet-button-spacing $base-gradient $form-thumb-space $sheet-padding $bright-color $form-fieldset-radius $tabs-bottom-radius $button-height $form-slider-size $tabs-bottom-icon-size $button-radius $global-row-height $tabs-bottom-active- $button-stroke-weight $include-button-uis gradient $button-gradient $include-default-icons $tabs-bottom-gradient $carousel-indicator-size $include-default-uis $tabs-dark-color $carousel-indicator-spacing $include-form-sliders $tabs-dark-active-color $carousel-track-size $include-html-style $top-tab-height $form-bg-color $include-highlights $toolbar-spacing $form-field-bg-color $include-tabbar-uis $toolbar-input-bg $form-light $include-toolbar-uis $toolbar-input-color $form-dark $include-top-tabs $toolbar-input-height $form-label-width $include-bottom-tabs $toolbar-gradient $form-field-height $light-tab-color $toolbar-highlights $form-spacing $light-tab-active $toolbar-icon-size Monday, November 29, 2010
  • 21. Helpful Mixins @include background-gradient($bg-color, $type); bevel, glossy, matte, flat @include color-by-background($bg-color, $contrast: 100%); @include bevel-by-background($bg-color); @include mask-by-background($bg-color, $contrast, $style); Monday, November 29, 2010
  • 23. The UI attribute “UI” can be added to components Several components have default UIs Toolbar, Carousel, TabBar light/dark Buttons default/drastic/confirm/back/forward & round/small Monday, November 29, 2010
  • 26. SCSS JAVASCRIPT Monday, November 29, 2010
  • 27. SCSS JAVASCRIPT Monday, November 29, 2010
  • 28. SCSS JAVASCRIPT Monday, November 29, 2010
  • 29. SCSS JAVASCRIPT Monday, November 29, 2010
  • 30. SCSS JAVASCRIPT Monday, November 29, 2010
  • 31. Icons 300+ icons included SCSS: @include pictos-icon(‘refresh’); JS: {xtype: ‘button’, iconCls: ‘refresh’, iconMask: true, ui: ‘drastic’ } Monday, November 29, 2010
  • 34. Optimization Tips Remove unused components Remove Images Remove UIs output_style: compressed Monday, November 29, 2010