Create Your Own Dojo Theme in 
20 Minutes 
Yiwei Ma 
UI/UX Team, Professional Services, ESRI
Why do we need 
custom themes?
Reasons to have custom themes: 
• To prettify the look and feel 
• To make your app unique 
• To better incorporate busine...
Out-of-box Dojo themes 
tundra soria 
nihilo 
claro
Look boring and not really 
modern, right?
What about if you want your 
app to look somewhat like…
This? 
(http://dribbble.com/shots/943079-Webapp-Dashboard)
Or this? 
(http://morethanamap.com)
How about customizing Dojo dijits ourselves in CSS? 
Let’s start from this simple dijit: 
dijit/form/Button
How this dijit’s HTML structure looks like in FireBug:
To customize Dojo dijits by overwriting styles can be 
painful 
• Html structures of dijits are complex 
• Lack of documen...
Using Twitter’s Bootstrap? 
Easy to use 
Tons of third party themes 
Need jQuery to run Bootstrap’s 
components 
ArcGIS AP...
Customize Dojo 
themes using 
CSS 
preprocessor
Advantages of using CSS Preprocessors: 
• Possible to use variables, functions, 
and mixins 
• Properties and patterns can...
How a CSS preprocessor works
Tools needed: 
• CSS preprocessors: 
- LESS 
- Or Stylus 
• Claro theme files in .less or .styl 
format 
- .less format 
-...
How a Dojo theme gets created by a CSS 
preprocessor 
default variables 
… 
dijit 1 variables dijit 2 variables dijit (n) ...
Some themes* I have made 
• Bootstrap 
• ArcGIS for Developers CSS 
• Flat 
(*no old browser support; about 
80% of dijits...
Demo 
Replacing a Dojo 
app with custom 
themes
Demo 
How to create a 
new theme by 
changing 
variables
Closure 
• Contact me if you are interested in using my themes 
- Bootstrap 
- ArcGIS for Developers CSS 
- Flat 
• You ca...
How to create your own Dojo theme
Upcoming SlideShare
Loading in …5
×

How to create your own Dojo theme

4,326 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,326
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Greeting and introduction
    1 min
  • 30s

    http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html
  • How to create your own Dojo theme

    1. 1. Create Your Own Dojo Theme in 20 Minutes Yiwei Ma UI/UX Team, Professional Services, ESRI
    2. 2. Why do we need custom themes?
    3. 3. Reasons to have custom themes: • To prettify the look and feel • To make your app unique • To better incorporate business branding needs
    4. 4. Out-of-box Dojo themes tundra soria nihilo claro
    5. 5. Look boring and not really modern, right?
    6. 6. What about if you want your app to look somewhat like…
    7. 7. This? (http://dribbble.com/shots/943079-Webapp-Dashboard)
    8. 8. Or this? (http://morethanamap.com)
    9. 9. How about customizing Dojo dijits ourselves in CSS? Let’s start from this simple dijit: dijit/form/Button
    10. 10. How this dijit’s HTML structure looks like in FireBug:
    11. 11. To customize Dojo dijits by overwriting styles can be painful • Html structures of dijits are complex • Lack of documentation • Need to use “ !important” in some cases
    12. 12. Using Twitter’s Bootstrap? Easy to use Tons of third party themes Need jQuery to run Bootstrap’s components ArcGIS API for JS is built on Dojo, this requires apps to include two libraries + + - -
    13. 13. Customize Dojo themes using CSS preprocessor
    14. 14. Advantages of using CSS Preprocessors: • Possible to use variables, functions, and mixins • Properties and patterns can be reused • Consistency across styles • Easier to maintain
    15. 15. How a CSS preprocessor works
    16. 16. Tools needed: • CSS preprocessors: - LESS - Or Stylus • Claro theme files in .less or .styl format - .less format - .styl format
    17. 17. How a Dojo theme gets created by a CSS preprocessor default variables … dijit 1 variables dijit 2 variables dijit (n) variables … .styl file for dijit 1 .styl file for dijit 2 .styl file for dijit (n) processing … .css file for dijit 1 .css file for dijit 2 .css file for dijit (n) theme
    18. 18. Some themes* I have made • Bootstrap • ArcGIS for Developers CSS • Flat (*no old browser support; about 80% of dijits done; ESRI widgets and dgrid included)
    19. 19. Demo Replacing a Dojo app with custom themes
    20. 20. Demo How to create a new theme by changing variables
    21. 21. Closure • Contact me if you are interested in using my themes - Bootstrap - ArcGIS for Developers CSS - Flat • You can get the flat theme here: - http://github.com/Esri/dojo-theme-flat • I will keep adding more dijits and more themes • You can contact me by my personal email: yma@esri.com

    ×