DISCONTINUED

It is time to move forward and embrace all the modern UI libraries / frameworks instead of sticking to Dojo dijits 👌

--- Yiwei Ma

dojo-theme-flat

This theme framework is customized for Dojo dijits, dgrid, as well as some of the ArcGIS API for JS widgets using Stylus.

This theme is built based on Dojo's Claro theme.

Test pages: http://yiweima.github.io/flatdojo/

Sections

• Features
• Requirements
• Instructions
• Resources
• Issues
• Contributing
• Licensing

Features

This theme includes styles for the following components:

Dojo Dijits:

• All "dijit/form" dijits
• All "dijit/layout" dijits
• All other Dojo dijits (Dialog, Menu, Calendar, Toolbar, etc.)
• RTL supported

Dgrid:

• Basic dgrid styles (dgrid.css)
• One skin is included
• All extensions
• RTL supported

ArcGIS API for JavaScript Widgets:

Only these widgets are supported:

• Fixed pan buttons
• Zoom Slider
• Basemap Gallery
• Bookmarks
• Geocoder
• Legend
• Measurement
• Overview Map
• Popup
• Scalebar

Icons and Colors

• Most icons are replaced with FontAwesome icon fonts.
• Esri's branding colors are used as default.

Requirements

• Using CSS files only:

  No requirements

• Using Stylus files:

  • Nodejs
  • Stylus - CSS preprocessor used to compile .styl files
  • Nib - a Stylus plugin that provides cross-browser CSS3 mixins .

Instructions

• ####CSS only:

  1. Download the "CSS" folder locally

  2. For Dojo dijits, include:

     <link rel="Stylesheet" type="text/css" href="path/to/dojo/flat.css/>
     

  3. For dgrid, include:

       <link rel="Stylesheet" type="text/css" href="path/to/dgrid/css/dgrid.css/>
     

       <link rel="Stylesheet" type="text/css" href="path/to/dgrid/skins/skin.css/>
     

     And other stylesheets for extensions in the "dgrid/css/extensions" folder if needed. For example, the style sheet for Pagination extension:

        <link rel="Stylesheet" type="text/css" href="path/to/dgrid/css/extensions/Pagination.css/>
     

  4. For ArcGIS API for JS widgets, includet:

     <link rel="Stylesheet" type="text/css" href="//js.arcgis.com/3.10/js/esri/css/esri.css/>
     

     <link rel="Stylesheet" type="text/css" href="path/to/esri/css/esri_custom.css/>
     

• ####Using Stylus files

  Install required tools:

  1. Nodejs - Click here to download the installer and run it
  2. Stylus - Open command line and run npm install stylus -g
  3. Nib - Open command line and run $ npm install nib -g

  Compile .styl files using command line:

  Here explains how to use command line to compile .styl files, click here for more examples on how to compile .styl files in general. You can also use Grunt if you are familiar with the tool.

  1. Compile single file: stylus -u nib -w path\to\filename.styl -o path/to/output/foldername/
  2. Compile all files within a folder: stylus -u nib -w path\to\foldername -o path/to/output/foldername/

Resources

• Stylus
• Nib
• A nice article on how to get started with Stylus

Issues

Browser Support

Only tested with Chrome (v36), FireFox (v31), IE 11 and IE 8, 9 with IE 11's emulation tool.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2013 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

[](Esri Tags: Dojo, CSS, theme) [](Esri Language: CSS)