CSS Variables Usage

Using CSS variables in ZingGrid is just like using any CSS variable. By default, the grid will have some default CSS styling to scaffold the overall structure of the grid. Apart from this default styling, ZingGrid allows users to adjust almost every aspect of the grid using CSS variables.

Variables Usage

The main use of CSS variables is for easability when creating themes. You can use direct CSS element selectors to style the grid as well.

Using CSS variables is as simple as setting the variables in your CSS under the :root{} or zing-grid selector, like so:

/* preferred usaged */
:root {
  --zg-caption-background:red;
}

/* alternative usage */
zing-grid {
  --zg-caption-background:red;
}

CSS Variables Overview

While most styling can be done on the component element itself, ZingGrid is, at the end of the day, a web component utilizing Shadow DOM. We designed the grid to expose as much of the structure to the Light DOM as possible to make styling easy. However, there is functionality hidden away in the shadows that you might want to style.

To navigate this Light/Shadow DOM interplay, we developed a system of CSS variables that allowed us to easily create the various themes that ZingGrid ships with. By default, within the Shadow DOM, you have limited controls to target elements: :host, :host-context, and ::slotted(), with the added limitation that you can only target the slotted element, not its child elements.

On the other hand, CSS variables expose any element at any depth. They also have the added benefit of acting as a public API and can expose the public CSS properties while keeping critical system properties locked away.

The good news for you is all of these variables we used to create the built-in themes are available for you to use! There are many uses to these that you'll discover, but an example of a helpful way to use them is the family of --theme-xxxx-style variables. Instead of setting the same background color on a few elements manually, you can instead set the --theme-background-color variable directly (see below) and all elements associated with that will show the new color.

/* preferred usaged */
:root {
  --zg-caption-background:red;
}

/* alternative usage */
zing-grid {
  --zg-caption-background:red;
}