SlideShare a Scribd company logo
1 of 47
Download to read offline
Theming Ext JS 4


  ROBERT DOUGAN, SENCHA
Ext JS 4 Theme
       CSS3
 Component Templates
       SASS
   Theming Ext JS 4
       Demo
CSS3
Currently
     Design it
      Chop it
Sprite the images
  Add the CSS
 For every state!
With CSS3
  Design it
 Add the CSS
Every Component!
Component Templates
<table id="ext-comp-1003" cellspacing="0" class="x-btn x-btn-noicon" style="width: auto; ">
    <tbody class="x-btn-small x-btn-icon-small-left">
         <tr>
              <td class="x-btn-tl">
                  <i>&nbsp;</i>
              </td>
              <td class="x-btn-tc"></td>
              <td class="x-btn-tr">
                  <i>&nbsp;</i>
              </td>
         </tr>
         <tr>
              <td class="x-btn-ml">
                  <i>&nbsp;</i>
              </td>
              <td class="x-btn-mc">
                  <em class="" unselectable="on">
                      <button type="button" id="ext-gen9" class=" x-btn-text">Add User</button>
                  </em>
              </td>
              <td class="x-btn-mr">
                  <i>&nbsp;</i>
              </td>
         </tr>
         <tr>
              <td class="x-btn-bl">
                  <i>&nbsp;</i>
              </td>
              <td class="x-btn-bc"></td>
              <td class="x-btn-br">
                  <i>&nbsp;</i>
              </td>
         </tr>
    </tbody>
</table>
<div id="button-1003" class="x-btn x-btn-small x-gray x-btn-icon-small-left x-btn-noicon">
    <button type="button" role="button" id="ext-gen1004">Add User</button>
</div>
Every Component!
Legacy Browsers?
SASS
http://sass-lang.com
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;
}
Inline Variables
               SCSS                        CSS
$str:‘test’;                  /* line 3, ../src/test.scss */
                              .example.test {
.example.#{$str} {              color:black;
  color:black;                }
}
                              /* line 9, ../src/test.scss */
$str:‘foo’;                   .example.foo {
                                color:black;
.example.#{$str} {            }
  color:black;
}
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;
}
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;
}                                         }
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;                    .child {
    }                                   padding: 5px;
}                                     }
                                  }
.example {
  @include add-stuff(blue);
}
Combined
                 SCSS                                   CSS
@mixin style-btn($name, $color) {          /* line 2, ../src/test.scss */
  .btn.#{$name} {                          .btn.tangy {
    background:$color;                       background: yellow;
                                             border: 1px solid;
        border:1px solid;                    border-color: #cccc00;
        border-color:darken($color, 10);     color: #666666;
                                           }
        color:lighten($color, 40);
    }                                      /* line 2, ../src/test.scss */
}                                          .btn.pale {
                                             background: blue;
@include style-btn(‘tangy’, yellow);         border: 1px solid;
@include style-btn(‘pale’, blue);            border-color: #0000cc;
                                             color: #666666;
                                           }
Compass
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;
                                 }
Theming Ext JS 4
Neptune
Variables
$base-color: #cc0000;
$frame-base-color: #333;
$frame-border-radius: 10px;
  $frame-font-size: 14px;
Mixins
@include extjs-button-color(‘yellow’, darken(#ddaa00, 13));
Optimization
/*include extjs components*/
@include extjs-button;
@include extjs-form;
@include extjs-panel;
@include extjs-qtip;
@include extjs-toolbar;
@include extjs-window;
/*include extjs components*/
@include extjs-button;
@include extjs-panel;
@include extjs-toolbar;
@include extjs-window;
Documentation
Demo
Questions?
Thanks!
@rdougan
rdougan@me.com
  http://rwd.me

  @senchainc

More Related Content

What's hot

Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.Gabriel Neutzling
 
Krueger Library Custom CSS for LibGuides
Krueger Library Custom CSS for LibGuidesKrueger Library Custom CSS for LibGuides
Krueger Library Custom CSS for LibGuidesTammi Owens
 
Bloqueador cmd-sh
Bloqueador cmd-shBloqueador cmd-sh
Bloqueador cmd-shmsbertoldi
 
JSplash - Adobe MAX 2009
JSplash - Adobe MAX 2009JSplash - Adobe MAX 2009
JSplash - Adobe MAX 2009gyuque
 
Dart : one language to rule them all - MixIT 2013
Dart : one language to rule them all - MixIT 2013Dart : one language to rule them all - MixIT 2013
Dart : one language to rule them all - MixIT 2013Sébastien Deleuze
 
CSS3 and jQuery
CSS3 and jQueryCSS3 and jQuery
CSS3 and jQuerypsophy
 
Code Tops Comments
Code Tops CommentsCode Tops Comments
Code Tops CommentsMr Giap
 
Manipuler avec attention les URLs courtes
Manipuler avec attention les URLs courtesManipuler avec attention les URLs courtes
Manipuler avec attention les URLs courtesChristophe Villeneuve
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassClaudina Sarahe
 
Just css results dogmeat template validator
Just css results dogmeat template validatorJust css results dogmeat template validator
Just css results dogmeat template validatorGaejang Guk
 
To get user client system name on ui welcome screen.doc
To get user client system name on ui welcome screen.docTo get user client system name on ui welcome screen.doc
To get user client system name on ui welcome screen.docRipunjay Rathaur
 
MyBB account hijacking
MyBB account hijackingMyBB account hijacking
MyBB account hijackingChris Illusion
 

What's hot (19)

Sass - Making CSS fun again.
Sass - Making CSS fun again.Sass - Making CSS fun again.
Sass - Making CSS fun again.
 
CSS3 vs jQuery
CSS3 vs jQueryCSS3 vs jQuery
CSS3 vs jQuery
 
Growing jQuery
Growing jQueryGrowing jQuery
Growing jQuery
 
Krueger Library Custom CSS for LibGuides
Krueger Library Custom CSS for LibGuidesKrueger Library Custom CSS for LibGuides
Krueger Library Custom CSS for LibGuides
 
Bloqueador cmd-sh
Bloqueador cmd-shBloqueador cmd-sh
Bloqueador cmd-sh
 
JSplash - Adobe MAX 2009
JSplash - Adobe MAX 2009JSplash - Adobe MAX 2009
JSplash - Adobe MAX 2009
 
Dart : one language to rule them all - MixIT 2013
Dart : one language to rule them all - MixIT 2013Dart : one language to rule them all - MixIT 2013
Dart : one language to rule them all - MixIT 2013
 
Jina Bolton
Jina BoltonJina Bolton
Jina Bolton
 
CSS3 and jQuery
CSS3 and jQueryCSS3 and jQuery
CSS3 and jQuery
 
Code Tops Comments
Code Tops CommentsCode Tops Comments
Code Tops Comments
 
Manipuler avec attention les URLs courtes
Manipuler avec attention les URLs courtesManipuler avec attention les URLs courtes
Manipuler avec attention les URLs courtes
 
Finding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with CompassFinding a Better Way to CSS: Navigating Sass with Compass
Finding a Better Way to CSS: Navigating Sass with Compass
 
PHP with MySQL
PHP with MySQLPHP with MySQL
PHP with MySQL
 
Just css results dogmeat template validator
Just css results dogmeat template validatorJust css results dogmeat template validator
Just css results dogmeat template validator
 
To get user client system name on ui welcome screen.doc
To get user client system name on ui welcome screen.docTo get user client system name on ui welcome screen.doc
To get user client system name on ui welcome screen.doc
 
MyBB account hijacking
MyBB account hijackingMyBB account hijacking
MyBB account hijacking
 
HTML5 - Pedro Rosa
HTML5 - Pedro RosaHTML5 - Pedro Rosa
HTML5 - Pedro Rosa
 
Prograweb
PrograwebPrograweb
Prograweb
 
Lettering js
Lettering jsLettering js
Lettering js
 

Viewers also liked

Designing an ExtJS user login panel
Designing an ExtJS user login panelDesigning an ExtJS user login panel
Designing an ExtJS user login panelArun Prasad
 
Building Sencha Themes
Building Sencha ThemesBuilding Sencha Themes
Building Sencha ThemesSencha
 
Ext js user login panel
Ext js user login panelExt js user login panel
Ext js user login panelArun Prasad
 
Introduction to ExtJS lesson 01 Part two
Introduction to ExtJS lesson 01 Part twoIntroduction to ExtJS lesson 01 Part two
Introduction to ExtJS lesson 01 Part twoArun Prasad
 
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 SimeonsSencha
 
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 BrocatoSencha
 

Viewers also liked (7)

Designing an ExtJS user login panel
Designing an ExtJS user login panelDesigning an ExtJS user login panel
Designing an ExtJS user login panel
 
Building Sencha Themes
Building Sencha ThemesBuilding Sencha Themes
Building Sencha Themes
 
Ext js 6
Ext js 6Ext js 6
Ext js 6
 
Ext js user login panel
Ext js user login panelExt js user login panel
Ext js user login panel
 
Introduction to ExtJS lesson 01 Part two
Introduction to ExtJS lesson 01 Part twoIntroduction to ExtJS lesson 01 Part two
Introduction to ExtJS lesson 01 Part two
 
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: 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
 

Similar to Theming Ext JS 4

Simple introduction Sass
Simple introduction SassSimple introduction Sass
Simple introduction SassZeeshan Ahmed
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 
Software programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS filesSoftware programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS filesDinu Suman
 
Front-End Dev Tools
Front-End Dev ToolsFront-End Dev Tools
Front-End Dev ToolsNetguru
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageKatsunori Tanaka
 
CSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendCSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendFITC
 
Building a theming system with React - Matteo Ronchi - Codemotion Amsterdam 2017
Building a theming system with React - Matteo Ronchi - Codemotion Amsterdam 2017Building a theming system with React - Matteo Ronchi - Codemotion Amsterdam 2017
Building a theming system with React - Matteo Ronchi - Codemotion Amsterdam 2017Codemotion
 
3 Steps to Make Better & Faster Frontends
3 Steps to Make Better & Faster Frontends3 Steps to Make Better & Faster Frontends
3 Steps to Make Better & Faster FrontendsNico Hagenburger
 
LESS CSS Pre-processor
LESS CSS Pre-processorLESS CSS Pre-processor
LESS CSS Pre-processorKannika Kong
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & CompassRob Davarnia
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESSjsmith92
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Startededgincvg
 
Evrone.ru / BEM for RoR
Evrone.ru / BEM for RoREvrone.ru / BEM for RoR
Evrone.ru / BEM for RoRDmitry KODer
 

Similar to Theming Ext JS 4 (20)

Theming and Sass
Theming and SassTheming and Sass
Theming and Sass
 
Simple introduction Sass
Simple introduction SassSimple introduction Sass
Simple introduction Sass
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Software programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS filesSoftware programming tools for creating/managing CSS files
Software programming tools for creating/managing CSS files
 
Front-End Dev Tools
Front-End Dev ToolsFront-End Dev Tools
Front-End Dev Tools
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
CSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the BackendCSS: A Slippery Slope to the Backend
CSS: A Slippery Slope to the Backend
 
Building a theming system with React - Matteo Ronchi - Codemotion Amsterdam 2017
Building a theming system with React - Matteo Ronchi - Codemotion Amsterdam 2017Building a theming system with React - Matteo Ronchi - Codemotion Amsterdam 2017
Building a theming system with React - Matteo Ronchi - Codemotion Amsterdam 2017
 
3 Steps to Make Better & Faster Frontends
3 Steps to Make Better & Faster Frontends3 Steps to Make Better & Faster Frontends
3 Steps to Make Better & Faster Frontends
 
CSS Extenders
CSS ExtendersCSS Extenders
CSS Extenders
 
LESS CSS Pre-processor
LESS CSS Pre-processorLESS CSS Pre-processor
LESS CSS Pre-processor
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Insertcustomer
InsertcustomerInsertcustomer
Insertcustomer
 
Getting Started with Sass & Compass
Getting Started with Sass & CompassGetting Started with Sass & Compass
Getting Started with Sass & Compass
 
Doing more with LESS
Doing more with LESSDoing more with LESS
Doing more with LESS
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Started
 
Less css
Less cssLess css
Less css
 
Evrone.ru / BEM for RoR
Evrone.ru / BEM for RoREvrone.ru / BEM for RoR
Evrone.ru / BEM for RoR
 
16-DOMTree.pptx
16-DOMTree.pptx16-DOMTree.pptx
16-DOMTree.pptx
 

More from Sencha

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 ComponentsSencha
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 HighlightsSencha
 
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
 
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
 
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 TestingSencha
 
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 TestSencha
 
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
 
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 ToolingSencha
 
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
 
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 FirstSencha
 
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 BeyondSencha
 
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 GridSencha
 
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 ReportSencha
 
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 AppsSencha
 
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...Sencha
 
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...Sencha
 
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 AppsSencha
 
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...Sencha
 
Building Ext JS Using HATEOAS - Jeff Stano
Building Ext JS Using HATEOAS - Jeff StanoBuilding Ext JS Using HATEOAS - Jeff Stano
Building Ext JS Using HATEOAS - Jeff StanoSencha
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...Sencha
 

More from 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: 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
 
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...
 
Building Ext JS Using HATEOAS - Jeff Stano
Building Ext JS Using HATEOAS - Jeff StanoBuilding Ext JS Using HATEOAS - Jeff Stano
Building Ext JS Using HATEOAS - Jeff Stano
 
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
SenchaCon 2016: Improve Workflow Driven Applications with Ext JS Draw Package...
 

Recently uploaded

Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoTAnalytics
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsStefano
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101vincent683379
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKUXDXConf
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoUXDXConf
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 

Recently uploaded (20)

Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 

Theming Ext JS 4

  • 1.
  • 2. Theming Ext JS 4 ROBERT DOUGAN, SENCHA
  • 3.
  • 4.
  • 5. Ext JS 4 Theme CSS3 Component Templates SASS Theming Ext JS 4 Demo
  • 7.
  • 8. Currently Design it Chop it Sprite the images Add the CSS For every state!
  • 9. With CSS3 Design it Add the CSS
  • 12.
  • 13. <table id="ext-comp-1003" cellspacing="0" class="x-btn x-btn-noicon" style="width: auto; "> <tbody class="x-btn-small x-btn-icon-small-left"> <tr> <td class="x-btn-tl"> <i>&nbsp;</i> </td> <td class="x-btn-tc"></td> <td class="x-btn-tr"> <i>&nbsp;</i> </td> </tr> <tr> <td class="x-btn-ml"> <i>&nbsp;</i> </td> <td class="x-btn-mc"> <em class="" unselectable="on"> <button type="button" id="ext-gen9" class=" x-btn-text">Add User</button> </em> </td> <td class="x-btn-mr"> <i>&nbsp;</i> </td> </tr> <tr> <td class="x-btn-bl"> <i>&nbsp;</i> </td> <td class="x-btn-bc"></td> <td class="x-btn-br"> <i>&nbsp;</i> </td> </tr> </tbody> </table>
  • 14. <div id="button-1003" class="x-btn x-btn-small x-gray x-btn-icon-small-left x-btn-noicon"> <button type="button" role="button" id="ext-gen1004">Add User</button> </div>
  • 18. 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; }
  • 19. Inline Variables SCSS CSS $str:‘test’; /* line 3, ../src/test.scss */ .example.test { .example.#{$str} { color:black; color:black; } } /* line 9, ../src/test.scss */ $str:‘foo’; .example.foo { color:black; .example.#{$str} { } color:black; }
  • 20. 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; }
  • 21. 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; } }
  • 22. 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; .child { } padding: 5px; } } } .example { @include add-stuff(blue); }
  • 23. Combined SCSS CSS @mixin style-btn($name, $color) { /* line 2, ../src/test.scss */ .btn.#{$name} { .btn.tangy { background:$color; background: yellow; border: 1px solid; border:1px solid; border-color: #cccc00; border-color:darken($color, 10); color: #666666; } color:lighten($color, 40); } /* line 2, ../src/test.scss */ } .btn.pale { background: blue; @include style-btn(‘tangy’, yellow); border: 1px solid; @include style-btn(‘pale’, blue); border-color: #0000cc; color: #666666; }
  • 25. 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; }
  • 27.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 41. /*include extjs components*/ @include extjs-button; @include extjs-form; @include extjs-panel; @include extjs-qtip; @include extjs-toolbar; @include extjs-window;
  • 42. /*include extjs components*/ @include extjs-button; @include extjs-panel; @include extjs-toolbar; @include extjs-window;
  • 44. Demo