CSS and Theming

Dashboard UI kit is developed in a friendly way towards CSS adjustments and theming. The core core componnets are styled with SCSS, which gives us the best control over the class naming. The components are developed with Bootstrap in mind - this doesn't mean that you need bootstrap to run the application, but if you are used to bootstrap, you can freerly use it (however it's not recommended to use the JS part of the Bootstrap). Here is how the DOM output look like.

// react
<Button primary>Default</Button>

// DOM
<button class="btn btn-primary" type="button" role="button">
  Default
</button>

Zero dependencies and no hassle integration

You don't need any stylesheet libraries, initialization is unnecessary and overriding styles is dead simple. To install the library, simple follow this guide. TLDR, install our kit, import styles and you are good to go!

Overriding styles

As seen in the code above, the class naming is very straightforward and easy to work with. Many components share the same class naming as Bootstrap, but we have many custom components too.

The important fact is that during the development, we tried to reduce the CSS specificity to minimum. We worked with many libraries and sometimes it is really pain to style elements which look something like this:

.select .select-container.select-container__open .select-item.select-item__selected .icon

We hate it, you hate it and it's just a pain to style it. And because of that, we tried to reduce the specificity to maximum of 2. There might be some exception, but otherwise, we tried our best to deliver the best developing experience.

Theming with CSS Variables

This has been a big topic. We want to deliver an amazing experience for developers and this is no exception. We decided to leverage CSS Variables instead of complicated injects, stylesheets and other dependencies that require a lot of initialization.

Using CSS variables however comes with a cost. If you intent to support all browsers, it might be problematics, you can check the browser support here. Browser support can be resolved by adding css-var-ponyfill.

Creating custom theme

This cannot be easier. On the right part of the top bar, you can switch between light and dark theme. By default, light theme is enabled. We created a dark theme for you as well, this is how the code looks like:

body {
  --bg-main: #252529;
  --bg-base: #2c2c31;
  --border-color-base: #34343a;
  --border-color-main: #44444e;
  --border-color-highlight: #64646e;
  --text-base: #ccc;
  --text-main: #ddd;
  --text-tertiary: #666;
}

With few lines of code, we changed the core appearence of the documentation, amazing isn't it? You can add this code into your CSS file or add it somewhere in the JSX with inline styles.

<style>
  body {
    --bg-main: #252529;
    ...
  }
</style>

You can also override variables localy, for example navigation panel only.

.my-nav-panel {
  --bg-main: #252529;
  ...
}

Using CSS variables in your (S)CSS

You can use your css variables like so

.my-class {
  color: var(--color-primary);
}

Or you can import or Sass vars file (recommended) to make sure that your conde is consistent, which will output the code above.

@import '@duik/core/_vars.scss';
.my-class {
  color: $color-primary;
}

List of CSS variables