1. Getting Started

1.1. BeyondAdmin Overview

BeyondAdmin is a responsive and multipurpose admin theme powered with Twitter Bootstrap 3.1.1 Framework.

BeyondAdmin can be used for any type of web applications: admin panels, admin dashboards, CMS, CRM, and business websites. BeyondAdmin has a sleek, clean, intuitive and Colorful design which makes your website lovely and beyond expectations.

1.2. Start

To get you started with BeyondAdmin theme, you should be familiar with Twitter Bootstrap which is widely used and most-preferred HTML framework from developers worldwide.

First, open blank.html file to know more about the main theme structure. It basically includes the markup that all other pages will include it too.

2. HTML Structure

Header Structure

Header

There are 4 different sections in header:

  • Basic Styles

    Contains all basic styles that is needed to set up BeyondAdmin

    Note: you need bootstrap-rtl-link if you intend to use RTL direction. otherwise you can remove this link.

  • Fonts

    You can put links to WebFonts that you want in this section

  • Beyond Styles

    Contains other styles that is needed to set up BeyondAdmin

    Note: you need skin-link if you intend to use pre-defined skins in your website.

  • Skin Script

    Place this script in head to load scripts for skins and rtl support

    Do not use JQuery in skin.js if you want to change this script because this script loads before jquery.

Body Structure

Body

There are 4 different sections in body:

  • Loading Container

    Loading Markup to show before page loading completes

    Note: you can put any html that you like in this section. loading works with your content.

  • Navbar (Top Menu)

    Header of your page. see colorful top of demo page.

  • Main Container

    Beside of Page Header and Loading all other html will be in this section. SideBar Menu, Breadcrumbs, Page Header and Page Content.

  • Scripts

    Place all your desired scripts in this section at the end of page.

    Note: All Demo Pages Contains Their Related Scripts in This Section.

Navabr (Top Menu) Structure

Navbar

There are 2 different sections in Navbar:

  • Barnd

    Your Logo goes here

  • Account Area and Setting

    Notifications, Messages, Tasks, Account Setting and Skins are here.

Main-Container Structure

main-container

There are 2 different sections in Main Container:

  • Sidebar Menu

  • Page Content

Page Content Structure

page-content.png

There are 3 different sections in Page Content:

  • Breadcrumbs

  • Page Header

  • Page Body

3. Layout

layout.png

4. Using the Theme

4.1. Css Styles

BeyondAdmin is developed using LESS dynamic styling language, and all files are separated to make you more easy to find and customize any part of theme, add or remove parts of CSS that are not needed on your theme.

less

You can remove or customize any of these files for your own good. every component of BeyondAdmin is Completeley Seperated in JS or CSS and you are able to remove or modify any of these styles.

There are 5 primary colors that you can define in your skin. these colors are:

  • themeprimary
  • themesecondary
  • themethirdcolor
  • themefourthcolor
  • themefifthcolor

All of predefined BeyondAdmin have these colors and you can easily use them like this:

themecolors

As you see you can use classes defined with these colors and also use them in data- attributes for creating charts. every time that you change your skin, all these 5 colors will change based on your skin.

5. Credits

BeyondAdmin is built with the presence of these great plugins and resources: