Skip to content

Start Styling

Let us create a main stylesheet file where we specify some basic variables:

style.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
:root {
  /* Main Primary color */
  --color-primary-0: #566349;
  --color-primary-1: #454a41;
  --color-primary-2: #4d5646;
  --color-primary-3: #5e734b;
  --color-primary-4: #65844a;

  /* Main Secondary color (1) */
  --color-secondary-1-0: #373f49;
  --color-secondary-1-1: #303336;
  --color-secondary-1-2: #34393f;
  --color-secondary-1-3: #394654;
  --color-secondary-1-4: #394c60;

  /* Main Secondary color (2) */
  --color-secondary-2-0: #6f6b52;
  --color-secondary-2-1: #535149;
  --color-secondary-2-2: #605e4e;
  --color-secondary-2-3: #807a54;
  --color-secondary-2-4: #938a53;

  /* Main Complement color */
  --color-complement-0: #634951;
  --color-complement-1: #4a4143;
  --color-complement-2: #55454a;
  --color-complement-3: #724a57;
  --color-complement-4: #83495c;
}

And then we create a file to style the built-in stage Sidebar. You can read details about styling the sidebar in the documentation:

sidebar.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.cc-sidebar {
  & .logo img {
    width: 40px;
    height: 40px;
    margin: 10px;
  }
  & .cc-sidebar-nav {
    background-color: var(--color-primary-2);
  }
  & .cc-sidebar-flyout {
    & .header {
      background-color: var(--color-primary-0);
      color: white;
    }
    & .body {
      background-color: var(--color-primary-1);
      & a {
        color: white;
      }
    }
  }
}
.cc-sidebar-tooltip {
  & .tooltip-inner {
    background-color: var(--color-primary-2);
  }
  & .arrow::before {
    border-right-color: var(--color-primary-2);
  }
}

Let's add an logo to the sidebar and import the above stylesheet in the index.js:

index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { System, Sidebar } from "@codecoupler/cc-ui";
import HeaderStage from "./stages/header.js";
import apps from "./apps.js";
import "./style.css";
import "./sidebar.css";
let system = new System({
  apps: apps,
  stages: [
    {
      stage: Sidebar,
      options: {
        logo: "logo.png"
      }
    },
    {
      stage: HeaderStage,
      options: { header: "Test" }
    }
  ]
});
system.initialized
  .then((system) => {
    console.info("System is Ready!", system.id);
  })
  .catch((e) => {
    console.error(e);
    if (!e.systemBlocked)
      document.body.innerHTML = "Oops, Something went wrong!";
  });

For our own header stage we create a css file in the same subfolder stages:

stages/header.css

1
2
3
4
5
6
7
.header-stage {
  & .header {
    background-color: var(--color-primary-2) !important;
    min-height: 40px;
    padding: 10px;
  }
}

Then we import the file and change some classes in some container elements:

stages/header.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Stage } from "@codecoupler/cc-ui";
import "./header.css";
export default class extends Stage {
  async init(env, options) {
    env.$element.replaceWith(`
      <div class="header-stage d-flex flex-column h-100">
        <div class="header text-white">
          Header with option: ${options.header}
        </div>
        <div class="flex-grow-1 position-relative" data-role="cc-stage">
        </div>
      </div>
    `);
  }
}

Now you have some basic styling and all the colors can be defined in your main style.css.