Get Started
Setup
Shared Theme
Back to Top

Get Started

Calcite Bootstrap is an Esri custom theme and a custom build system for Bootstrap 3. The theme is based on Calcite Web - a web adaptation of Calcite, the desktop framework for ArcGIS Pro. Calcite Bootstrap was built for developers who have experience working with Bootstrap and would like to use the Calcite theme in their web pages and apps.

Setup

For instructions on how to get up and running, check out the instructions on the Calcite Bootstrap Github repo until I figure out how to inline a markdown file.

Using Shared Themes

In order to support an organization's ArcGIS Online theme resource in an app, but still use Calcite Boostrap as the baseline theme, this template can serve as a structure outline for importing specific SASS files: /lib/sass/calcite-bootstrap.scss.

In this structure where it says @import "themes/org-theme" this will not be handled automatically. The presence of this @import serves as a means for you to test a sample theme locally. To use shared themes, you must have a means to check for the Shared Theme resource within your app. If you have it supported, you can choose to use any number of the theme variables set within the theme resource. (For instance, you may choose to utilize an organization's header background and header text colors from their theme resource, but use Calcite Bootstrap for everything else). Read more about the supported values on our blog.

In the event an organization does not have a shared theme, all the Shared Theme values have been set to Calcite defaults. This is what !default is doing. It will use any other value that comes in from higher up the chain, but if there is nothing, it will default to Calcite Bootstrap styling.

The ArcGIS Online Shared Theme variables are then mapped to legitimate Bootstrap variables and those Bootstrap variables are used to set styling for all Bootstrap components in the expansions/bootstrap-defaults.scss file and the optional expansion files.

//============================
// Import Calcite theme
//============================
@import "themes/calcite-bootstrap";

//============================
// Import AGO theme resource
//============================
@import "themes/org-theme";

// ┌────────────────────┐
// │ AGO Theme Defaults │
// └────────────────────┘

//## Calcite by Default
$header-background: #fff !default;
$header-text: #4c4c4c !default;
$body-background: #fff !default;
$body-text: #4c4c4c !default;
$body-link: #0079c1 !default;
$button-background: $body-link !default;
$button-text: $body-bg !default;
$logo-small: '' !default;

// ┌──────────────────┐
// │ AGO to Bootstrap │
// └──────────────────┘

$navbar-default-bg: $header-background;
$navbar-default-color: $header-text;
$body-bg: $body-background;
$text-color: $body-text;
$link-color: $body-link;
$link-hover-color: darken($link-color, 10%);
$btn-primary-bg: $button-background;
$btn-primary-color: $button-text;
$btn-primary-border: $button-background;

//============================
// Apply theme to Bootstrap
//============================
@import "expansions/bootstrap-defaults";

//=============================
// Import (optional) Calcite web expansion
//=============================
@import "expansions/calcite-bootstrap-expansion-vars";
@import "expansions/calcite-bootstrap-expansion";