Docs

CSS Variables Usage

Using CSS variables in ZingGrid is just like using any CSS variables. 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.

/* 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 ShadowDom. We designed the grid to expose as much of the structure to the lightDom 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/shadowDom 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 shadowDom, 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.

CSS variables, on the other hand, expose any element at any depth. They also have the added benefit of acting as a public api; 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 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;
}