Calcite

Calcite

ArcGIS Pro

ArcGIS JS

Design system created by Esri

Principles, pattern, style guide, branding guidelines, geo-centric...

Calcite Colors

Calcite Web

Calcite Web

• Web framework developed by Esri
• Branding guide and style for web pages
• Calcite - colors, fonts, icons...
• Light-weight, fast, responsive
• Sass, JS, documentation
• e.g. developers.arcgis.com

github.com/Esri/calcite-web

Calcite Bootstrap

Calcite Bootstrap

• Calcite theme and custom build for Bootstrap
• Calcite - colors, fonts, icons...
• Light and dark themes
• Custom build, Sass, Documentation
• Dojo and jQuery
• e.g. ArcGIS Open Data

github.com/Esri/calcite-bootstrap

Calcite Maps

Calcite Maps

• Bootstrap theme for creating modern map apps
• Map app framework + components + styles
• Calcite - themes, colors, fonts, icons...
• ArcGIS JS 3.x, 4.x, Esri-Leaflet
• Desktop and mobile

Fast and easy to design and style responsive apps

Bootstrap

Map App Framework

Navbar, Dropdown Menu, Panels + Bootstrap

Style Explorer

Get Started

1. HTML
2. Reference CSS
   • Calcite Bootstrap or Bootstrap
   • Calcite Maps
3. Reference JavaScript
   • Mapping API (ArcGIS JS API)
   • Calcite Maps JS
   • jQuery or dojoBootstrap

Dev Options

1. Access compiled CSS directly
2. Create custom Sass build
   • Fork - Bower - npm - grunt

Samples

github.com/Esri/calcite-maps

Styler

Styler

• New configurable application template
• Built on Calcite Maps, Bootstrap and ArcGIS JS v4
• 2D and 3D
• Highly configurable (styleable)
• Bonus features!

Easy to create, style and share apps!

What can you do with it?

1. Style apps from web maps and web scenes

2. Style maps from params

www.arcgis.com

github.com/Esri/calcite-maps-styler-template