Customisation

Overrides

uihub-core exposes certain css custom variables that you can treak to your specification. Some are globally defined in the :root selector, others are class based. These are the available customizable global custom properties

:root {
    --font-family-regular: system-ui, sans-serif;
    --font-family-medium: system-ui, sans-serif;
    --font-family-bold: system-ui, sans-serif;
    --font-family-bolder: system-ui, sans-serif;
    --font-size: 16px;

    /* Default variables */
    --default-text-color: #000;
    --default-background-color: #fff;
}

Changing Fonts

To change the fonts, follow the steps below

1. Import your custom_font.css in your html file

   <link rel="stylesheet" href="project_root/assets/uihub-core/css/uihub-core.min.css">
   <link rel="stylesheet" href="project_root/assets/custom_font.css">

   Alternatively declare your fonts in the style tag of your html

   <style>
       @font-face {
           font-family: 'Custom-Font';
           src: url('../your_font_directory/Custom-Font.woff2') format('woff2'),
               url('../fonts/your_font_directory/Custom-Font.woff') format('woff'),
               url('../your_font_directory/Custom-Font.ttf') format('truetype');
               font-weight: 300 900;
               font-display: swap;
               font-style: normal;
           }
   </style>

2. Override the following :root properties with your new font

   <style>
       /* ... */
       :root {
           --font-family-regular: 'Custom-Font', sans-serif;
           --font-family-medium: 'Custom-Font', sans-serif;
           --font-family-bold: 'Custom-Font', sans-serif;
           --font-family-bolder: 'Custom-Font', sans-serif;
       }
   </style>