v6.1
Getting Started Introduction Setup Customization Layout & Themes Other How to use plugins Changelog

In-built Demos (Skins)

Ubold comes with multiple demos (skins). I.e. 'creative', 'default', 'material', 'modern', 'purple', 'saas'. Each of these skins are having respective dark mode available as well. You can easily use any of them by simply changing the css file reference in your html file.

In your html file, simply change the reference of app.min.css with respective demo (skin) css file and you would have it activated.

Customizing Color Palette

You can change the color palatte of any demo very easily by simply changing the few scss variables value.

In order to modify the colors in existing themes, open the _variables-default.scss file from src/assets/scss/config/<DEMO_NAME> and change any variable in it. Your changes would get reflected automatically in any bootstrap based components or elements. Note that, this requires you to setup and run gulp flow provided in installation steps earlier.

In-built Layouts

Ubold provides multiple choices when it comes to layouting. There are multiple layout choices available. I.e. Vertical (main navigation on "Left"), Horizontal (main navigation on "Top") and Detached. You can easily use any of them by simply changing the few partials and using data attributes on html element.

Check out the pages layouts-horizontal.html, layouts-detached.html or layouts-two-column files available in folder src/default/ or dist/default/ to see how the respective layout can be activated.

Customizing Color Mode, Sidenav, Topbar, and Layout Width

Ubold allows you to have customized left sidenav, overall layout width or topbar menu. You could turn the left sidebar to different size, theme (look) and size. You can customize it by specifying the layout data attribute (data-*={}) on html element in your html. The config object properties accept the following values:

Title Type Options Description
data-bs-theme String "dark" | "light" Changes overall color scheme to dark
data-layout String "vertical" | "horizontal" | "two-column" Changes overall layout Style. By default, it would be set to vertical (* Changes in partials)
data-layout-width String "fluid" | "boxed" Changes the Content width of overall layout
data-topbar-color String "dark" | "light" | "brand" Changes topbar color scheme to dark or light
data-menu-color String "light" | "dark" | "brand" | "gradient" the Menu color scheme. By default, it would be set to default (light)
data-menu-icon String "default" | "twotone" the Menu Icon Tone. By default, it would be set to default
data-sidenav-size String "default" | "compact" | "condensed" | "full" | "fullscreen" Changes overall Sidenav Width.
(* Only available in Sidenav Menu)
data-layout-mode String "default" | "detached" Changes overall layout mode
(* Available in Sidenav & Tow Colum Sidebar Menu)
data-sidenav-user Boolean "true" | "false" Indicates whether to show Sidenav on opening up the page.
(* Only available in Sidenav Menu)
data-two-column-color String "light" | "dark" | "brand" | "gradient" the Two Colum Icon Menu color scheme. By default, it would be set to default (light)
(* Only available in Two Column Sidebar Menu)

Customizing Theme via Head.JS (path: assets/js/head.js)

You can override default theme via defaultConfig in head.js 


    //  Default Config Value
    var defaultConfig = {
        theme: "light",          // "dark" | "light"

        layout: {
            mode: "default",     // "default" | "detached"
            width: "fluid",      // "fluid" | "boxed"
        },

        topbar: {
            color: "light",     // "light" | "dark" | "brand"
        },

        menu: {
            color: "light",     // "light" | "dark" | "brand" | "gradient" 
            icon: "default",    // "default" | "twotone" 
        },

        // This option for only vertical (left Sidebar) layout
        sidenav: {
            size: "default",     // "default" | "compact" | "condensed" | "full" | "fullscreen" 
            twocolumn: "light",  // "light" | "dark" | "brand" | "gradient" 
            user: false,         // "true" | "false" 
        },
    };

Adding new page

We have provided a starter page (check src/html/default/pages-starter.html). It allows you to get started easily and helps you to add new page. Please note following important points:

  • Make sure you have included css/bootstrap.min.css, css/app.min.css, css/icons.min.css, js/head.js, js/vendor.min.js and js/app.min.js in your html.
  • Most of default/basic form elements along with few advanced elements are available and bundled in above css and js and so you don't need to include any css or js separately.
  • Few elements e.g. charts, data tables, calendar, maps etc requires you to include corresponding css and js files in your html. Please check corresponding documentation page for the same.

Horizontal Menu

Simply update in the src/html/<DEMO_NAME>/partials/menu.html file to includes and Update @@include('horizontal-menu.html') file.

Add attribute in the src/html/<DEMO_NAME>/partials/main.html file to html tag data-layout="horizontal"
<html data-layout="horizontal">

Two Colum Sidenav Menu

Simply update in the src/html/<DEMO_NAME>/partials/menu.html file to includes and Update @@include('two-column-sidebar.html') file.

Add attribute in the src/html/<DEMO_NAME>/partials/main.html file to html tag data-layout="two-column"
<html data-layout="two-column">

RTL Version

In order to have RTL enabled with light version, replace the reference of
bootstrap.min.css to bootstrap-rtl.min.css and
app.min.css to app-rtl.min.css

Add attribute in the src/html/<DEMO_NAME>/partials/main.html file to html tag dir="rtl"
<html dir="rtl">