Documentation

  1. Hyper
  2. Layout & Themes

Layout & Themes

Pre-Built Demos and Skins

Hyper offers three stunning demos, each with its own unique style: Saas, Modern, and Creative. To suit your preferences, each demo also comes with a corresponding dark mode. Switching between demos is easy - simply change the CSS file reference in your HTML file and your site will instantly transform with the new style.

Customizing Color Palette

Customizing the color palette of any demo is a breeze. All you need to do is adjust a few SCSS variables and you're ready to go. With this simple modification, you can create a unique and personalized look for your theme that perfectly reflects your brand's identity.

To modify colors in the existing themes, you can open the _theme-mode.scss file located in src/assets/scss/config/>DEMO_NAME<. Simply change the value of any variable to customize the color palette of the theme. Your changes will automatically reflect in any HTML elements or Bootstrap-based components. Please note that you need to set up and run the gulp flow provided in the installation steps earlier.

RTL Support

Hyper also includes built-in support for right-to-left (RTL) languages. To use RTL support, simply replace the reference to the standard CSS file with the RTL version. This will automatically flip the layout and alignment of elements for proper RTL display. Note that both standard and RTL CSS files are included in the Hyper package.

To enable RTL support in your chosen demo, navigate to the src/<DEMO_NAME>/partials/head-css.html file and replace the reference to app-saas.min.css with app-saas-rtl.min.css for Saas, app-creative-rtl.min.css for Creative, or app-modern-rtl.min.css for Modern. Additionally, don't forget to add the dir="rtl" attribute to the HTML tag, such as <html lang="en" dir="rtl">

Top Navigation Layouts (Horizontal)

To switch to the horizontal layout with a top navigation bar, follow these steps:

  1. Open the src/<DEMO_NAME>/partials/html.html file and add <html data-layout="topnav"> to the HTML tag.
  2. Open the src/<DEMO_NAME>/partials/menu.html file and remove the line @@include('left-sidebar.html').
  3. In the same file, add @@include('horizontal-nav.html') instead

Detached Layouts

To enable the detached mode in the vertical layout with left sidebar menu, simply add the following code to the src/<DEMO_NAME>/partials/html.html file:

<html data-layout-mode="detached">

This will detach the menu from the main content and display it separately. Note that this feature is only available in the vertical layout with left sidebar menu.

Pre-built Layouts

Hyper provides multiple layout options, including vertical (main navigation on the left), horizontal (main navigation on top), and detached (main navigation on the left side, part of the main content area). To switch between these layouts, simply modify the necessary partials and add data attributes to HTML elements.

To see how to activate a specific layout in Hyper, you can take a look at the layout examples provided in the following files:

  1. layouts-horizontal.html
  2. layouts-full.html
  3. layouts-fullscreen.html
  4. layouts-detached.html

These files can be found in the src/saas/ or dist/sass/ directory

Customizing Left Sidebar, Layout Width and Right Sidebar

Hyper provides you with the flexibility to customize the appearance and functionality of the left sidebar, overall layout width, and right sidebar. You can choose from various sizes, themes, and types for the left sidebar, and even hide it if needed. You can also specify the overall layout width and enable/disable the right sidebar. These customizations can be easily done by setting the appropriate data attribute on the html element in your HTML file.

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" Changes the color scheme of the topbar to a given value
data-menu-color String "light" | "dark" | "brand" Changes the color scheme of the menu to a given value
data-sidenav-size String "default" | "compact" | "condensed" | "sm-hover" | "sm-hover-active" | "full" | "fullscreen" The left sidebar size is reduced to a condensed (small) size
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 (pages-starter.html) located in the src/saas folder that can help you get started quickly and easily when adding new pages. However, please keep in mind the following important points:

  1. To ensure the proper functioning of the Hyper templates, make sure you have included the following files in your HTML code: css/app-saas.min.css, css/icons.min.css, and js/app.min.js. If you are using the Modern or Creative demos, be sure to replace app-saas.min.css with app-modern.min.css or app-creative.min.css, respectively.
  2. Most of the default and basic form elements, along with a few advanced elements, have their own CSS and JavaScript files included in Hyper.
  3. You can easily enhance the functionality of Hyper by adding features like charts, data tables, calendar, maps, and more. To use these features, you need to include the corresponding CSS and JavaScript files in your HTML. You can find the specific files needed for each feature on the corresponding documentation page.