In-built Demos (Skins)
Hyper comes with three demos (skins). I.e. Saas (Default), Modern and Creative. 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 app-dark.min.css. For creative replace it to, app-creative-dark.min.css and for moderen app-modern-dark.min.css
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 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.
RTL Support
Hyper provides the RTL support as well. You will simply need to replace the reference of css file.
In your html file, simply change the reference of app.min.css with app-rtl.min.css. For creative replace it to, app-creative-rtl.min.css and for moderen app-modern-rtl.min.css. Also update the html tag like <html lang="en" dir="rtl">
In-built Layouts
Hyper provides multiple choices when it comes to layouting. There are three different layout choices available. I.e. Vertical (main navigation on "Left"), Horizontal (main navigation on "Top") and Detached (main navigation on "Left" side but part of main content area). You can easily use any of them by simply changing the few partials and using data attributes on body element.
Check out the pages layouts-horizontal.html and layouts-detached.html files available in folder src/saas/ or dist/sass/ to see how the respective layout can be activated.
Customizing Left Sidebar, Layout Width and Right Sidebar
Hyper 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 type. You can customize it by specifying the layout config data attribute on body element in your html. The config object properties accept the following values:
| Title | Type | Options | Description |
|---|---|---|---|
darkMode | Boolean | true | false | Changes overall color scheme to dark |
layoutBoxed | Boolean | true | false | Changes the width of overall layout |
leftSideBarTheme | String | "default" | "light" | "dark" | the left sidebar color scheme. By default, it would be set to default (Purple) |
leftSidebarCondensed | Boolean | true | false | If set to true, the left sidebar size changes to small (condensed) |
leftSidebarScrollable | Boolean | true | false | It changes the left sidebar scrollable. By default the left sidebar's position would be fixed and it's internal content is scrollable. This would makes entire left sidebar scrollable |
showRightSidebarOnStart | 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-config='{"leftSideBarTheme":"dark"}'></body>Changes the left sidebar theme to "Light (White)"
<body class="loading" data-layout-config='{"leftSideBarTheme":"light"}'></body>Changes the left sidebar to scrollable
<body class="loading" data-layout-config='{"leftSidebarScrollable": true}'></body>Changes the left sidebar size to small
<body class="loading" data-layout-config='{"leftSidebarCondensed": true}'></body>
Adding new page
We have provided a starter page (check src/saas/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/app.min.css, css/icons.min.cssandjs/app.min.jsin your html. If you are using dark, make sure to include thecss/app-dark.min.css. If you are using modern or creative demos, make sure to replaceapp.min.csswithapp-modern.min.cssorapp-creative.min.cssrespectively. You can also specifyapp-modern-dark.min.cssorapp-creative-dark.min.cssfor having dark theme enabled. - 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.