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 the cdn
By default, Calcite Web expects image files to be located at
../. If your fonts are elsewhere, set the
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
You can also use a hosted version of Calcite Web:
<!-- In the head --> <link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.2/css/calcite-web.min.css"> <!-- Just before end of body --> <script src="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.2/js/calcite-web.min.js"></script>
To install Calcite-Web as a ruby gem, reference the gem from your
gem "calcite-web", :git => "https://github.com/Esri/calcite-web.git", :tag => "v1.2.2"
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:
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.
To install Calcite Web with npm, type:
npm install --save-dev Esri/calcite-web#v1.2.2
You must add the current version in order to get the
Now, in your main
.scss file, you can just require the framework: