Beneath views, Kumu uses a powerful CSS-based language to control the appearance of your maps.
If you're familiar with CSS, the advanced view editor will quickly become your best friend. The view builder only exposes a small set of the available properties. Being able to write views by hand is the only way to harness the full power of Kumu.
Note: We've adopted standard CSS properties and values wherever possible, straying where
conventional values were irrelevant or misleading (eg display: map vs display: block),
and adding properties specific to Kumu (such as bullseye-color).
All values are unitless.
The table belows lists all of the properties recognized by Kumu. Hover over the information icon at the far right to see additional details and available values for each property. Scroll to the bottom for a list of available @settings properties.
| Property | Elements | Connections | Loops | |
|---|---|---|---|---|
| arrow-color | ||||
| arrow-visibility | ||||
| border-color | ||||
| border-width | ||||
| bullseye-visibility | ||||
| bullseye-size | ||||
| bullseye-color | ||||
| bullseye-opacity | ||||
| color | ||||
| curvature | ||||
| delay-visibility | ||||
| display | ||||
| visibility | ||||
| font-family | ||||
| font-size | ||||
| font-style | ||||
| font-weight | ||||
| image-url | ||||
| image-size | ||||
| image-visibility | ||||
| label-visibility | ||||
| length | ||||
| margin | ||||
| opacity | ||||
| padding | ||||
| pattern | ||||
| size | ||||
| scale | ||||
| shadow-visibility | ||||
| shadow-size | ||||
| shadow-color | ||||
| shadow-opacity | ||||
| shape | ||||
| strength | ||||
| style | ||||
| text-align |
@settings properties are best grouped into a number of categories based on what they can control.
Map transformations
- focus (selector, prompt)
- filter
- cluster
- showcase
- culling
Labels
- text-overflow (off, auto, manual, wrap, clip)
Grids & guides
- grid
- grid-width
- grid-offset
- grid-color
- guides
- guide-width
- guide-color