Calcite Web: A Primer

Learn about where Calcite Web came from (and where it's headed)

Who is this guy?

profile-photo Paul C Pederson

  • Designer + Developer
  • Esri Portland R&D
  • Working on the ArcGIS Online Team
  • Created Calcite Web

👋 Say hello: ppederson@esri.com

Calcite Web: What is it?

Calcite Web is a...

  • Design Library
  • Living Styleguide
  • CSS Framework
  • Set of Interactive Patterns

Where did Calcite Web come from?

Step 1: Pile of Sass code

Step 2: ArcGIS for Developers CSS

Small repository of sass files (and built css)

Step 3: Tailcoat

Slightly more abstract, included a small JS library and a documentation site.

Still used today. (If you use it, you should migrate to Calcite Web)

Step 4: Collaboration with Creative Lab

Let's build a CSS framework together!

  • Tailcoat 2.0
  • Based on Calcite (new ArcGIS Pro styleguide)
  • Meant for all of Esri
  • More branded
  • More modern

Step 5: Calcite Web

Getting ready to release the offical v1.0

Already used by a lot of teams!

Why should you use Calcite Web?

1. Keep web design at Esri consistent

2. Make company-wide updates easier

3. Help teams without designers/developers

4. Solve hard problems in one place.

  • Localization
  • Accessibility

5. Instantly make a project on-brand

6. Reduce development time

7. Good typographic/style defaults

8. Hundreds of bugs already fixed!

Who is Calcite Web for?

Calcite Web is for...

  • Esri product teams
  • Esri marketing teams
  • Esri documentation teams
  • Customers?

Who is using Calcite Web already?

Already in production:

Teams moving to Calcite Web:

  • Marketplace
  • Workforce
  • Everybody on Tailcoat
  • Everybody!

🚀 The Future

Release official v1.0!

  • fully 508 compliant
  • fully localizable
  • fully responsive (esp. mobile)
  • improved icon solution
  • use global navigation component
  • all issued fixed

Looking past 1.0

  • Marketing-specific Extension
  • JS framework versions
    • Ember
    • Angular 2
    • Dojo
    • React?
  • Sketch/InVision kits

Questions?