Get Started

Calcite Web is a CSS framework built with Sass. A dependency-free JavaScript library for use with interactive patterns like tabs and modals is also included.

Calcite Web is a web adaptation of Calcite, the desktop framework developed for ArcGIS Pro. The idea is to have designs be consistent, but also embrace the characteristics that make each medium unique.

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. 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.

Using Calcite Web

There are three ways to use Calcite Web:

  • (a) copying static files into your project
  • (b) installing via a package manager
  • (c) loading files from a self-hosted cdn

By default, Calcite Web expects image files to be located at ../. If your fonts are elsewhere, set the $font-path variable

Using this framework as a Sass library will give you the most power, but whatever your flavor, we have you covered.

If you are migrating from Tailcoat, checkout the migration guide.

Calcite Web is an open project, that anyone can use to make web apps. However, some of our resources are not. Using Calcite Web on any project that does not live at an Esri or ArcGIS domain will not have access to any of Esri's brand typefaces. You can load a version of the framework without typefaces by using calcite-web-no-fonts.css.

Static Files

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 (CSS, JavaScript, images). 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 => "https://github.com/Esri/calcite-web.git", :tag => "v1.2.5"

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).

Calcite Web has a built in library of mixins that cover everything from animation to font-size. To be sure you're building your site in the easiest way (and the most visually consistent way) read up on everything that's available on the Sass Page.

NPM

To install Calcite Web with npm, type:

npm install --save-dev Esri/calcite-web#v1.2.5

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

Now, in your main .scss file, you can just require the framework:

@import "node_modules/calcite-web/dist/sass/calcite-web";