In-built Demos (Skins) and Layouts
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 desired layout blade file, simply pass the demo name
while including head-css. E.g. in resources/views/layouts/vertical.blade.php, search for line @include('layouts.shared/head-css').
You can simply change it to @include('layouts.shared/head-css', ["demo" => "creative"]) to have creative demo (skin).
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.scss file from
resources/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.
Make sure to run command npm run dev or npm run watch to compile the scss to css after making any changes.
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"), Detached (main navigation on "Left" side but part of
main content area) and Two-Column (main navigation on left but in two columns). You can easily use any of them by simply
changing the few partials and using data attributes on
body element.
Check out the pages
rosources/views/layouts/horizontal.blade.php,
rosources/views/layouts/detached.blade.php,
rosources/views/layouts/two-column.blade.php files available in
folder to see how the respective layout can be activated.
Customizing Color Mode, Left Sidebar, Topbar, Layout Width and Right Sidebar
Ubold allows you to have customized left sidebar, overall layout
width or right sidebar. You could turn the left sidebar to
different size, theme (look) and size. You can customize it by
specifying the layout data attribute (data-layout={}) on body
element in your html. The config object properties accept the
following values:
| Title | Type | Options | Description |
|---|---|---|---|
mode |
String | 'light' | 'dark' | Changes overall color scheme to light or dark |
width
|
String | 'fluid' | 'boxed' | Changes the width of overall layout to fluid or boxed |
menuPosition
|
String | "fixed" | "scrollable" | Sets the menu position. Scrollable would makes both the menus scrollable with body element. |
sidebar
|
Object |
{
"color": "light" | "dark" | "brand" | "gradient", "size": "default" | "condensed" | "compact", "showuser": true | false } |
The left sidebar related configuration. It's nested object. The color can be set to "light", "dark", "brand" or "gradient". The size would allow to change the size of sidebar to condensed (coompact) or even more small by setting "compact".The showuser, if set to true, would display a user in left sidebar |
topbar
|
Object |
{
"color": "light" | "dark" } |
The topbar related configuration. It's nested object. The color can be set to "light", "dark", "brand" or "gradient".
|
showRightSidebarOnPageLoad
|
Boolean | true | false | Indicates whether to show right sidebar on opening up the page |
Following are few examples:
-
Changes the left sidebar theme to "Dark"
<body class="loading" data-layout='{"sidebar": { "color": "dark"}}'></body> -
Changes the left sidebar theme to "Light (White)"
<body class="loading" data-layout='{"sidebar": {"color": "light"}}'></body> -
Sets the menus (left sidebar and topbar) scrollable with body
<body class="loading" data-layout='{"menuPosition": true}'></body> -
Changes the left sidebar size to small
<body class="loading" data-layout='{"sidebar": {"size": "compact"}}'></body> -
Changes the topbar color to light (white)
<body class="loading" data-layout='{"topbar": {"color": "light"}}'></body> -
Changes the overall color mode to dark
<body class="loading" data-layout='{"mode": "dark"}'></body>
RTL
Ubold also provides support for RTL mode. It's very easy to get the rtl mode by simply mode while extending layout in your page.
E.g.
@extends('layouts.vertical', ['title' => 'Creative Theme', 'demo' =>
'creative', 'mode' => 'rtl'])
Adding new page/route
We have provided a starter page (check
resources/views/pages/starter.blade.php). It allows you to get
started easily and helps you to add new page. Simply copy this page and rename it to new one.