Designing Apps with
with Calcite Maps/Bootstrap
@AL_Laframboise
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/4248084/pasted-from-clipboard.png)
Calcite
Calcite
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1936078/calcite-diagram.png)
ArcGIS Pro
ArcGIS JS
Design system created by Esri
Principles, pattern, style guide, branding guidelines, geo-centric...
Calcite Colors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1940085/calcite-colors-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1940088/calcite-colors-2.png)
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
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
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
Map App Framework
Navbar, Dropdown Menu, Panels + Bootstrap
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/3560196/styleexplorer.png)
- HTML
- Reference CSS
- Calcite Bootstrap or Bootstrap
- Calcite Maps
- Reference JavaScript
- Mapping API (ArcGIS JS API)
- Calcite Maps JS
- jQuery or dojoBootstrap
Dev Options
- Access compiled CSS directly
- Create custom Sass build
- Fork - Bower - npm - grunt
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?
Final notes
- Calcite - Design System
- Calcite Maps - Design Framework
- Styler - Configurable App Template
slides.com/alaframboise
Designing Apps with Calcite Maps
By alaframboise
Designing Apps with Calcite Maps
- 3,050