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.
The classes specific for width are provided below. The equivalent is also provided for height, e.g. esri-view-width-xsmall
also has an esri-view-height-xsmall
class.
xsmall |
---|
esri-view-width-xsmall |
esri-view-width-less-than-small |
esri-view-width-less-than-medium |
esri-view-width-less-than-large |
esri-view-width-less-than-xlarge |
small |
---|
esri-view-width-small |
esri-view-width-greater-than-xsmall |
esri-view-width-less-than-medium |
esri-view-width-less-than-large |
esri-view-width-less-than-xlarge |
medium |
---|
esri-view-width-medium |
esri-view-width-greater-than-xsmall |
esri-view-width-greater-than-xsmall |
esri-view-width-less-than-large |
esri-view-width-less-than-xlarge |
large |
---|
esri-view-width-large |
esri-view-width-greater-than-xsmall |
esri-view-width-greater-than-small |
esri-view-width-greater-than-medium |
esri-view-width-less-than-xlarge |
xlarge |
---|
esri-view-width-xlarge |
esri-view-width-greater-than-xsmall |
esri-view-width-greater-than-small |
esri-view-width-greater-than-medium |
esri-view-width-greater-than-large |
Note that the greater/less than classes are a convenient way to write CSS selectors. For example,
is more efficient than
The classes specific for page orientation are as follows:
esri-view-orientation-portrait |
---|
esri-view-orientation-landscape |
Portrait is used when width is less than or equal to height. Otherwise, it is landscape.
For a look at how these various CSS classes work, please see the Responsive apps using CSS sample.
Themes
The following themes are provided out-of-the-box:
light
dark
The theme name needs to be specified in the CSS path:
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.
This is the recommended approach to customizing CSS. It provides a more robust option than manually overriding the CSS which can cause problems with scalability.
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:
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.
The widgets' Sass files leverage the power of variables and allow you to quickly and easily start customizing the styles. For example, the following is the default color scheme.
If you need to customize the colors, changing those variables is all that's needed to easily brand your application.
CSS widget styles
CSS styles are applied based on a CSS class selector similar to what is shown below. The CSS selectors in the code snippet are from the _Widget.scss file, which is located in the arcgis-js-api
github repository.
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:
Opt-in class |
---|
.esri-widget_ |
esri-widget_ , h1.esri-widget_ , h2.esri-widget_ , etc. |
esri-widget_ |
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.
Additional information
Please refer to these additional links for further information: