Current Version 1.0.0-rc.4
Size 222kB
Size (Gzipped) 25kB
Last Update May 11, 2017
Download

A Design & Development Framework

Calcite Web is a branded CSS & JavaScript framework, web style guide, and visual design system for Esri. You can use Calcite Web to quickly build on-brand, lightweight, and accessible websites. The robust codebase is well supported, steadily maintained, and always being improved.

Calcite Web has everything you need to quickly build excellent web experiences and a collection of extensions that enable specific use cases like marketing pages and e-commerce.


Easy to Get Started

Use Calcite Web from your favorite package manager, download it, or just use it off the CDN.

Package Managers

Calcite Web can be installed as a Ruby Gem or an NPM package.

Get instructions

CDN

Calcite Web can also be referenced directly from the CDN:

<link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.0.0-rc.4/css/calcite-web.min.css">
<script src="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.0.0-rc.4/js/calcite-web.min.js"></script>

Components

Small, reusable elements in a design like buttons, dropdowns, and tooltips

Patterns

Larger design patterns like navigation, tabs, and accordions

Icons

Iconography for both social media and user interfaces

Grid

Fully responsive, twenty-four column grid for layout

Typography

Type styles, size, color, and helpful modifier classes

Color

Simplified Esri color pallette available as Sass variables

Copy, Paste

Using Calcite Web's design patterns is as easy as copy paste. The Quickstart Guide explains how to include the framework in your project, lay out basic page structures with the grid system, and use the UI Patterns to present content.

Read the Quickstart Guide

Comprehensive & Extendable

Calcite Web has all the building blocks you need to create most projects, but sometimes you might need a little extra. This is why we've created a set of extensions to Calcite Web to handle situations like e-commerce and splashy marketing pages. Just include a line of CSS, and start working from the examples.

Learn More About Extensions