Calcite Web: A Primer
Learn about where Calcite Web came from (and where it's headed)
Who is this guy?
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 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 official 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:
- Esri
- ArcGIS Online
- ArcGIS for Developers
- Doc teams
- Training
- esri.github.io
- Ops Dashboard
- This presentation!
- More?
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