Authoritative front-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and efficient framework for ArcGIS properties.
CSS JavaScript Ruby
Latest commit 90e9415 Jan 3, 2017 @paulcpederson paulcpederson committed on GitHub Merge pull request #756 from oknoway/master
Icons: Typo fix

Calcite Web

github releases Travis semistandard

Calcite Web is a web design framework that implements the Esri Brand Guidelines and Calcite design framework for browser-based properties and products. Calcite Web is written in Sass, and is compatible with both the standard Sass ruby gem and the Libsass compiler. The project also includes a dependency-free JavaScript library for use with interactive patterns.

Using Calcite Web

There are two main ways to use Calcite Web: copying static files into your project and installing via a package manager. Whatever your flavor, we probably have you covered.

Static Files

This is probably the easiest way. If you're looking to get up and running quickly, just download the latest release and move the zipped files to wherever you keep your assets. Be sure to use the documentation site to copy and paste patterns, components, and even a sample html boilerplate.

Ruby Gem

To install Calcite Web as a ruby gem, reference the gem from your Gemfile:

gem "calcite-web", :git => "", :tag => "current.tag.version"

Be sure to use the replace current.tag.version with the most up to date tag.

This makes Calcite Web available as a Compass extension. To use Calcite Web, make sure you require the gem in your compass config file (usually found at config/compass.rb). an example config file might look like this:

require 'calcite-web'

css_dir = "stylesheets"
sass_dir = "sass"

Then in your project's sass files, just import it:

@import "calcite-web";

That will give you everything including sass utilities. You will also need to copy over the JavaScript and image assets to your static folder (see above). If you're installing Calcite Web as a gem, it will automatically inc


To install Calcite Web with npm, type:

npm install --save-dev "Esri/calcite-web#v1.0.0-rc.1"

You must add the current version in order to get the dist/ folder.

If you're using sass, be sure to add node_modules/calcite-web/dist/sass/ to your load path. If you're using grunt-contrib-sass you add that like this:

'sass': {
  target: {
    options: {
      loadPath: 'node_modules/calcite-web/dist/sass/'
    files: {
      'path/to.css': 'path/to.scss'

Then in your main .scss file, you can just require the framework: @import "calcite-web";.

Contributing to Calcite Web

We welcome all contributions: issues, pull requests, idea, questions, documentation improvements, etc. Just make sure you read the contribution guidelines.

Why Calcite Web?

The primary goal of Calcite Web is create a unified visual language for all and projects. The secondary goal of Calcite Web is to make it as easy as possible to implement high quality design patterns in a way that is appropriate to both the project at hand and the design strategies of Esri as a whole.

Calcite Web was built for developers. It is meant to be flexible enough that you can accomplish 80% of your website with the default patterns writing only html markup. If you use Calcite Web as a Sass library, you'll also get a set of very helpful mixins to help you make new patterns and components that fit in with the Calcite methodology and aesthetic.

Since Calcite Web is primarily designed for Esri brand properties, it relies on Avenir Next as it's primary typeface. Avenir Next is not distributed with Calcite Web.

Calcite Web as a Framework Dependency

Calcite Web has the ability to exist exclusively as a Sass library, not generating a single line of CSS. Including the framework in this way may seem counter intuitive - the whole project would compile to an empty file - but allows for some powerful and meaningful applications. Using Calcite Web in this way allows for the creation of new frameworks or themes for any given structure that duplicates no stylistic code or decisions. This means that a project like Calcite for Dojo or Calcite for Bootstrap can each use different patterns of HTML markup to achieve components that are identical to their Calcite Web counterparts.

For example, a Bootstrap button would simply extend the existing Calcite Web buttons instead of recreating the CSS that controls the styles like so:

.btn {
    @include btn();
.bnt-default {
    @include btn-color($blue, $dark-blue);

Calcite Web vs. Other Frameworks

Calcite Web, while still a CSS Framework, has some profound differences from projects like Bootstrap or Foundation. Where Bootstrap and Foundation both aim to provide a robust set of patterns and utilities for the general, third party developer, Calcite Web only concerns itself with Esri projects. Calcite Web is not designed for a developer who is not directly working for Esri on Esri products or properties. In other words, every project created with Calcite Web will look like an Esri-branded site.


Copyright 2016 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE file.