In-built Demos (Skins)
Hyper comes with three demos (skins). i.e. Saas, Modern, and Creative. Each of these skins has a respective dark mode available as well. You can easily use any of them by simply changing the CSS file reference in your HTML file.
Customizing Color Palette
You can change the colour 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 _theme-mode.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 the css file.
In
src/<DEMO_NAME>/partials/head-css.html,
simply change the reference of
app-saas.min.css with
app-saas-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 with attribute dir="rtl". E.g.
<html lang="en"
dir="rtl">
Horizontal Layouts
Simply add
<html data-layout="topnav"> in the
src/<DEMO_NAME>/partials/html.html file
and
Remove includes
@
and add
@
in the
src/<DEMO_NAME>/partials/menu.html
file.
Detached Layouts
Simply add
<html data-layout-mode="detached"> in
the
src/<DEMO_NAME>/partials/html.html file
(Detached available only in Vertical layout - Menu
left-sidebar)
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 HTML elements.
Check out the pages
layouts-horizontal.html, layouts-full.html, layouts-fullscreen.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 html element in your html
| Title | Type | Options | Description |
|---|---|---|---|
data-theme |
String | "light" | "dark" | Changes overall color scheme to dark |
data-layout-mode
|
String | "fluid" | "boxed" | "detached" | Changes the width of overall layout |
data-topbar-color
|
String | "light" | "dark" | "brand" | the Topbar color scheme. |
data-menu-color
|
String | "light" | "dark" | "brand" | the left sidebar color scheme. |
data-sidenav-size
|
String | "default" | "compact" | "condensed" | "sm-hover" | "sm-hover-active" | "full" | "fullscreen" | the left sidebar size changes to small (condensed) |
data-layout-position
|
String | "fixed" | "scrollable" | Layout Position |
data-sidenav-user
|
Boolean | "true" | "false" | Shows the user info on the left sidebar |
Following are few examples:
-
Changes the left sidebar theme to "dark"
<html data-menu-color="dark"></html> -
Changes the left sidebar theme to "light"
<html data-menu-color="light"></html> -
Changes the left sidebar to scrollable
<html data-layout-position="scrollable"></html> -
Changes the left sidebar size to small
<html data-sidenav-size="condensed"></html>
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-saas.min.css, css/icons.min.cssandjs/app.min.jsin your html. If you are using modern or creative demos, make sure to replaceapp-saas.min.csswithapp-modern.min.cssorapp-creative.min.cssrespectively. - Most of default/basic form elements along with few advanced elements are separately add css and js.
- 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.