SlideShare a Scribd company logo
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 business 
branding needs
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 documentation 
• Need to use “ !important” in some cases
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 
+ 
+ 
- 
-
Customize Dojo 
themes using 
CSS 
preprocessor
Advantages of using CSS Preprocessors: 
• Possible to use variables, functions, 
and mixins 
• Properties and patterns can be reused 
• Consistency across styles 
• Easier to maintain
How a CSS preprocessor works
Tools needed: 
• CSS preprocessors: 
- LESS 
- Or Stylus 
• Claro theme files in .less or .styl 
format 
- .less format 
- .styl format
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
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)
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 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
How to create your own Dojo theme

More Related Content

What's hot

Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Suzanne Dergacheva
 
WordPress Custom Post Types
WordPress Custom Post TypesWordPress Custom Post Types
WordPress Custom Post TypesMark Jaquith
 
Drupal: Northeastern University Libraries website
Drupal: Northeastern University Libraries websiteDrupal: Northeastern University Libraries website
Drupal: Northeastern University Libraries website
iFactory
 
Thinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS LayoutsThinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS Layouts
djesse
 
Ready? bootstrap. go! (cf objective 14 05-2014)
Ready? bootstrap. go! (cf objective 14 05-2014)Ready? bootstrap. go! (cf objective 14 05-2014)
Ready? bootstrap. go! (cf objective 14 05-2014)ColdFusionConference
 
Class vs. id
Class vs. idClass vs. id
Class vs. id
krichardson233
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
Irfan Maulana
 
Add Custom Post Types to Your WordPress Website
Add Custom Post Types to Your WordPress WebsiteAdd Custom Post Types to Your WordPress Website
Add Custom Post Types to Your WordPress Website
Dustin Hartzler
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
Adrian Westlake
 
Web101-intro
Web101-introWeb101-intro
Web101-intro
Samantha Lin
 
The Wonderful World of Drupal 8 Multilingual
The Wonderful World of Drupal 8 MultilingualThe Wonderful World of Drupal 8 Multilingual
The Wonderful World of Drupal 8 Multilingual
Suzanne Dergacheva
 
Html and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talkHtml and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talk
hipages
 
SPSHawaii: Navigation: A Step Towards Success in SharePoint
SPSHawaii:  Navigation: A Step Towards Success in SharePointSPSHawaii:  Navigation: A Step Towards Success in SharePoint
SPSHawaii: Navigation: A Step Towards Success in SharePoint
Stacy Deere
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
Eric Sembrat
 
Web design v roku 2013
Web design v roku 2013Web design v roku 2013
Web design v roku 2013
vibration.sk
 
Themes and Plugins for Wordpress
Themes and Plugins for WordpressThemes and Plugins for Wordpress
Themes and Plugins for Wordpress
John Lauber
 

What's hot (18)

Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
WordPress Custom Post Types
WordPress Custom Post TypesWordPress Custom Post Types
WordPress Custom Post Types
 
Drupal: Northeastern University Libraries website
Drupal: Northeastern University Libraries websiteDrupal: Northeastern University Libraries website
Drupal: Northeastern University Libraries website
 
Thinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS LayoutsThinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS Layouts
 
Ready? bootstrap. go! (cf objective 14 05-2014)
Ready? bootstrap. go! (cf objective 14 05-2014)Ready? bootstrap. go! (cf objective 14 05-2014)
Ready? bootstrap. go! (cf objective 14 05-2014)
 
Class vs. id
Class vs. idClass vs. id
Class vs. id
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
 
Web
WebWeb
Web
 
Css sprite
Css spriteCss sprite
Css sprite
 
Add Custom Post Types to Your WordPress Website
Add Custom Post Types to Your WordPress WebsiteAdd Custom Post Types to Your WordPress Website
Add Custom Post Types to Your WordPress Website
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
Web101-intro
Web101-introWeb101-intro
Web101-intro
 
The Wonderful World of Drupal 8 Multilingual
The Wonderful World of Drupal 8 MultilingualThe Wonderful World of Drupal 8 Multilingual
The Wonderful World of Drupal 8 Multilingual
 
Html and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talkHtml and CSS 101 - hipages Group Friday talk
Html and CSS 101 - hipages Group Friday talk
 
SPSHawaii: Navigation: A Step Towards Success in SharePoint
SPSHawaii:  Navigation: A Step Towards Success in SharePointSPSHawaii:  Navigation: A Step Towards Success in SharePoint
SPSHawaii: Navigation: A Step Towards Success in SharePoint
 
April 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child ThemesApril 2016 - Atlanta WordPress Users Group - Child Themes
April 2016 - Atlanta WordPress Users Group - Child Themes
 
Web design v roku 2013
Web design v roku 2013Web design v roku 2013
Web design v roku 2013
 
Themes and Plugins for Wordpress
Themes and Plugins for WordpressThemes and Plugins for Wordpress
Themes and Plugins for Wordpress
 

Similar to How to create your own Dojo theme

Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
Steven Slack
 
Dojo and Zend Framework
Dojo and Zend  FrameworkDojo and Zend  Framework
Dojo and Zend Framework
Kuldeep Singh
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Mediacurrent
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
Omkarsoft Bangalore
 
2010 11 pubcon_hendison_wordpress
2010 11 pubcon_hendison_wordpress2010 11 pubcon_hendison_wordpress
2010 11 pubcon_hendison_wordpress
shendison
 
Mastering your SharePoint Internet Design
Mastering your SharePoint Internet DesignMastering your SharePoint Internet Design
Mastering your SharePoint Internet Design
C/D/H Technology Consultants
 
Click here to download my CV in Word format.doc
Click here to download my CV in Word format.docClick here to download my CV in Word format.doc
Click here to download my CV in Word format.docbutest
 
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Acquia
 
Theme customisation for beginners
Theme customisation for beginnersTheme customisation for beginners
Theme customisation for beginners
Gareth J Barnard
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
La Drupalera
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
ThemeHorse
 
Business 2.0 with WordPress
Business 2.0 with WordPressBusiness 2.0 with WordPress
Business 2.0 with WordPress
Mario Peshev
 
Websites With Wordpress
Websites With WordpressWebsites With Wordpress
Websites With Wordpress
Charly Leetham
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday Jersey
Paul Hunt
 
PLAT-20 Building Alfresco Prototypes in a Few Hours
PLAT-20 Building Alfresco Prototypes in a Few HoursPLAT-20 Building Alfresco Prototypes in a Few Hours
PLAT-20 Building Alfresco Prototypes in a Few Hours
Alfresco Software
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
David Brattoli
 
Should you use WordPress for your non-profit websites?
Should you use WordPress for your non-profit websites?Should you use WordPress for your non-profit websites?
Should you use WordPress for your non-profit websites?
Bethany Siegler
 
Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
Emily Lewis
 
DITA Quick Start Webinar: Defining Your Style Sheet Requirements
DITA Quick Start Webinar: Defining Your Style Sheet RequirementsDITA Quick Start Webinar: Defining Your Style Sheet Requirements
DITA Quick Start Webinar: Defining Your Style Sheet Requirements
Suite Solutions
 

Similar to How to create your own Dojo theme (20)

Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Dojo and Zend Framework
Dojo and Zend  FrameworkDojo and Zend  Framework
Dojo and Zend Framework
 
Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG) Atlanta Drupal User Group (ADUG)
Atlanta Drupal User Group (ADUG)
 
Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
 
2010 11 pubcon_hendison_wordpress
2010 11 pubcon_hendison_wordpress2010 11 pubcon_hendison_wordpress
2010 11 pubcon_hendison_wordpress
 
Mastering your SharePoint Internet Design
Mastering your SharePoint Internet DesignMastering your SharePoint Internet Design
Mastering your SharePoint Internet Design
 
Click here to download my CV in Word format.doc
Click here to download my CV in Word format.docClick here to download my CV in Word format.doc
Click here to download my CV in Word format.doc
 
Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2Drupal Step-by-Step: How We Built Our Training Site, Part 2
Drupal Step-by-Step: How We Built Our Training Site, Part 2
 
Theme customisation for beginners
Theme customisation for beginnersTheme customisation for beginners
Theme customisation for beginners
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
 
Business 2.0 with WordPress
Business 2.0 with WordPressBusiness 2.0 with WordPress
Business 2.0 with WordPress
 
Websites With Wordpress
Websites With WordpressWebsites With Wordpress
Websites With Wordpress
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday Jersey
 
PLAT-20 Building Alfresco Prototypes in a Few Hours
PLAT-20 Building Alfresco Prototypes in a Few HoursPLAT-20 Building Alfresco Prototypes in a Few Hours
PLAT-20 Building Alfresco Prototypes in a Few Hours
 
Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016Responsive themeworkshop wcneo2016
Responsive themeworkshop wcneo2016
 
Should you use WordPress for your non-profit websites?
Should you use WordPress for your non-profit websites?Should you use WordPress for your non-profit websites?
Should you use WordPress for your non-profit websites?
 
Create Your Own Starter Files
Create Your Own Starter FilesCreate Your Own Starter Files
Create Your Own Starter Files
 
DITA Quick Start Webinar: Defining Your Style Sheet Requirements
DITA Quick Start Webinar: Defining Your Style Sheet RequirementsDITA Quick Start Webinar: Defining Your Style Sheet Requirements
DITA Quick Start Webinar: Defining Your Style Sheet Requirements
 

Recently uploaded

Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Inflectra
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 

Recently uploaded (20)

Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 

How to create your own Dojo theme

  • 1. Create Your Own Dojo Theme in 20 Minutes Yiwei Ma UI/UX Team, Professional Services, ESRI
  • 2. Why do we need custom themes?
  • 3. Reasons to have custom themes: • To prettify the look and feel • To make your app unique • To better incorporate business branding needs
  • 4. Out-of-box Dojo themes tundra soria nihilo claro
  • 5. Look boring and not really modern, right?
  • 6. What about if you want your app to look somewhat like…
  • 9. How about customizing Dojo dijits ourselves in CSS? Let’s start from this simple dijit: dijit/form/Button
  • 10. How this dijit’s HTML structure looks like in FireBug:
  • 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. 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. Customize Dojo themes using CSS preprocessor
  • 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. How a CSS preprocessor works
  • 16. Tools needed: • CSS preprocessors: - LESS - Or Stylus • Claro theme files in .less or .styl format - .less format - .styl format
  • 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. 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. Demo Replacing a Dojo app with custom themes
  • 20. Demo How to create a new theme by changing variables
  • 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

Editor's Notes

  1. Greeting and introduction 1 min
  2. 30s http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html