Pricing

CSS Variables

Table of Contents
  1. Global Variables
  2. Blocks Variables
  3. Other Variables

All Ghost Kit blocks and extensions use CSS Variables, so you can easily change styles for your project. Global variables hold the values that many blocks share. Each block also declares its own set on its root class, which you can change on its own without touching anything else.

Global Variables

View Global Variables

You can change globally defined variables that is used in many blocks. Example – change globally defined border-radius and transition-duration:

:root {
  --gkt-border-radius: 5px;
  --gkt-transition-duration: .5s;
}

Blocks Variables

View Tabs Block Variables

Each block has its own variables that you may change individually. Example – change Tabs block border size and color and Pills block active button background color:

.ghostkit-tabs {
  --gkt-tabs--button__border-width: 4px;
  --gkt-tabs--button__border-color: red;

  --gkt-tabs-pills--button-active__background-color: red;
}

Other Variables

Was this page helpful?
Yes No