Styling

View-size CSS classes

CSS classes are applied to the View and updated based on its size. These classes are meant to help target elements inside a view and subsequently style them based on the view's size, regardless of the page size. They work in conjunction with the widthBreakpoint, heightBreakpoint, and orientation properties of both the MapView and SceneView.

.esri-view-width-less-than-large .esri-foo

.esri-view-width-xsmall .esri-foo,
.esri-view-width-small .esri-foo,
.esri-view-width-medium .esri-foo

Themes

The following themes are provided out-of-the-box:

• light (default)
• dark
• light-blue
• dark-blue
• light-green
• dark-green
• light-purple
• dark-purple
• light-red
• dark-red

Using a theme requires only a slight update to the CSS path.

<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/themes/<theme-name>/main.css">

It is not necessary to import esri/css/main.css when using a themed approach.

Custom CSS using Sass

You can take full control of the compiled CSS by using Sass. Sass is a CSS preprocessor that brings many useful features including variables, mixins, functions, among other capabilities. With Sass, you are able to choose what gets compiled into your main application's CSS file.

Check out this Sass utility to help aid in creating your own Sass themes.

Widget CSS

CSS classes used by widgets follow the BEM naming convention. This approach helps with semantics, allowing easy identification and styling of classes.

For example, in the snippet below, it's easier to see what each class name affects:

.esri-basemap-toggle { /* root of the widget */ }
.esri-basemap-toggle__image { /* image element owned by the widget */ }
.esri-basemap-toggle__image--secondary { /* alternate version of the image element */ }

Sassy widgets

If you need a scalable approach with more fine-grained control, you may want to consider working with widget Sass files. This is the recommended approach to customizing the widget's CSS as it provides a more robust option than manually overriding it.

//  Main Colors Vars
$text_color                 : $Calcite_Gray_700;
$background_color           : $Calcite_Gray_050;
$anchor_color               : $Calcite_Gray_550;
$anchor_hover_color         : $Calcite_Gray_700;
$button_text_color          : $Calcite_Gray_550;
$button_text_hover_color    : $Calcite_Gray_700;

//  Main Colors Vars
$text_color                 : #fff;
$background_color           : #00704a;
$anchor_color               : #00704a;
$anchor_hover_color         : #000;
$button_text_color          : #fff;
$button_text_hover_color    : #000;

CSS widget styles

CSS styles are applied based on a CSS class selector similar to what is shown below.

.esri-widget__heading {
  color: $header_color;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
h1.esri-widget__heading {
  font-size: 20px;
}
h2.esri-widget__heading {
  font-size: 16px;
}
h3.esri-widget__heading,
h4.esri-widget__heading,
h5.esri-widget__heading,
h6.esri-widget__heading {
  font-size: 14px;
}

All Esri-provided widgets are styled using this opt-in approach, meaning it is styled by default. Unless otherwise indicated, custom widgets are not automatically styled by default as it is the developer's responsibility to opt-in.

These opt-in classes are:

Button styling

The .esri-widget--button is considered a widget that is a button. The Home and Track widgets are two good examples of this.

Using .esri-button styles mimic Calcite buttons. In addition, it uses the same hierarchy.

.esri-button
.esri-button--secondary
.esri-button--tertiary

Additional information

Please refer to these additional links for further information:

• BEM
• Sass
• jsapi-resources (Sass setup)
• Themes
• Simple theme
• Create a Calcite Maps Bootstrap application