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

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