Skip to main content

Building the web UI (editing the html and css)

My script mainly uses ReactJS and TailwindCSS, which is usually located in the web directory of my scripts. To get started here are the steps needed.

Requirements

  • NodeJS (Use the recommended version)

Installation

  1. Open a terminal in vscode or cmd or your favorite IDE.

    Step1

  2. Navigate to the web directory using cd your_path/web

    Step2

  3. Run npm install in the terminal.

    Step3

  4. Edit the html and css through the JSX files in the web/src/.. directory.

  5. Finally after you are done run npm run build. This will build the html directory folder with bundled and minimized files.

    Step4

Editing the appearance

Since we use TailwindCSS you can refer for full documentation. For starter you can read about the fundamental part here.

For example if you want to change the colors of my UI you can change the classNames using the classes from Tailwind docs.

Before editing bcs_companymanager

bossmenu1 bossmenu1_ign

After editing

bossmenu2 bossmenu2_ign