Designing Apps with
with Calcite Maps/Bootstrap
@AL_Laframboise
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
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
- 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 with Calcite Maps/Bootstrap @AL_Laframboise slides.com/alaframboise