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

  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

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/Bootstrap

By alaframboise

Designing Apps with Calcite Maps/Bootstrap

  • 1,812