Beast is a powerful admin template developed with a thought to make the web application development easy to all type of developers and users. It provides you the freedom of development with inbuilt features and support for most of the popular libraries. It already consist of most of the required features so you hardly need to extend it, but in case you need to enhance it with any other feature can do it in few easy steps.
Beast is fully responsive and supports all mobile devices available and it is tested on browserstack on all availabel devices. Beast is developed with well commented code which makes it easy to understand and customize, it also provides a complete detailed documentations on every section beast consist. After all this if you are not getting what are you looking for we are available 24x7 for customer support, drop us and email and we will assist you within 12 hours.
After purchasing Beast and downloading the package you will see following folders.
This folder contains all pre compiled demos for all following versions. They can be a kick start for your project untill you have developed using Beast development kit as per your requirement.
This folder contains the boilerplates of beast development kit. Using these boilerplates with grunt or gulp you can start developing your web app.
Beast is fully optimized so you dont have to worry about versions. You can switch between the versions by simply adding or removing a single scss file.
Let us help you to start developing your app using Beast. You can start your development with one of the package manager and task runner like grunt or gulp or you can choose our jquery version to build your app.
brew updatebrew install yarn
npm install -g bower (Bower requires node, npm and git.).grunt-cli globally by running the following command npm install -g grunt-cli<.li>
npm install and bower install to install our dependencies listed in package.json and bower.json file.Grunt Buildnpm install -g bower (Bower requires node, npm and git.).gulp globally by running the following command npm install -g gulpyarn install or npm installgulp buildWhile developing Beast we specially focused to make the development easier. Development with other versions can be done by adding or removing a single folder or file
dev/rtl/default and paste it in your project.grunt build or gulp buildassets folder from dev/material folder and paste it in your project.dev/rtl/meterial foldergrunt build or gulp buildassets folder from dev/rounded folder and paste it in your project.dev/rtl/rounded foldergrunt build or gulp buildWe highly recommend usage of yarn while developing the project with the Beast. Because Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly (you can compare with NPM and node), securely, and reliably so you don’t ever have to worry.
It also comes with
You can get more about it here (recommended by Facebook).
Check out the Installation page link for installation guidelines.
Just open the terminal and hit command
brew istall yarn
You will need to set up the PATH environment variable in your terminal to have access to Yarn’s
Add export PATH="$PATH:`yarn global bin`" to your profile (this may be in your .profile, .bashrc, .zshrc, etc.)binaries globally.
To install in system other than the Mac you can follow this
yarn --version
Meet Bower - A package manager for the web.
Web apps are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue!
To get started Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file bower.json. How you use packages is up to you.
To access it from everywhere need to install globally in the system
Hit command:
yarn global add bower
Beast provides feature to build with bower and grunt which makes it easier to develope and automate
Developers spend precious little time coding. Even if we ignore irritating meetings, much of the job involves basic tasks which can sap your working day:
Grunt in one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
Install it globally by hitting command
yarn global add grunt-cli
Grunt Build
Grunt Watch
Gulp is also a build tool like the Grunt. But performance wise gulp wins. You can check more here about the differences here .
Install it globally by hitting command
yarn global add gulp-cli
gulp Build
gulp Watch
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Beast supports Sass and is pure built on top of Sass. For more information about sass Click Here
Beast has a very much simple folder and file structure to support customizations. After you start your app development with task runners or directly with jquery version you can follow the steps to do the customization.
bower install 'package name' --savegrunt build or gulp build. Newly added package will be added to vendor.js and vendor.css file automatically.custom.js file
Following code shows the code used as basic template for application. It is a blank page template and it includes all required js and css files to build a new page
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=yes">
<meta content="" name="description">
<meta content="" name="author">
<link rel="shortcut icon" type="image/png" href="assets/img/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/vendor.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/plugins.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/beast.min.css">
<title>Beast | Responsive Admin Theme</title>
</head>
<body>
<div class="bst-wrapper">
<header class="bst-header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="bst-logo"> <a class="navbar-brand" href="index.html"> <img class="img-responsive display-ib" src="assets/img/beast-logo.png" alt="logo" width="130" height="16"> </a> </div>
<div class="bst-mobile-toggle-btn text-right pull-right">
<ul class="list-inline">
<li>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</li>
<li>
<button class="c-hamburger c-hamburger--htra bst-bars pull-right"> <span>toggle menu</span> </button>
</li>
</ul>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse" data-hover="dropdown">
<ul class="bst-mega-menu-wrapper nav navbar-nav">
<li class="dropdown hidden-xs hidden-sm hidden-md"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Mega <span class="caret"></span> </a>
<div class="dropdown-menu bst-mega-menu">
<div class="bst-mega-menu-wrap pad-all-lg">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-2">
<h4 class="sidenav-heading text-uppercase mrgn-b-md">Dashboards</h4>
<ul class="list-unstyled">
<li><a href="index.html" class="btn-default mrgn-b-xs pad-l-sm">Dashboard 1</a></li>
<li><a href="dashboard-v2.html" class="btn-default mrgn-b-xs pad-l-sm">Dashboard 2</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-2">
<h4 class="sidenav-heading text-uppercase mrgn-b-md">Features</h4>
<ul class="list-unstyled">
<li><a href="ui-buttons.html">UI Elements</a></li>
<li><a href="notification.html">Components</a></li>
<li><a href="google-chart.html">Graph and Charts</a></li>
<li><a href="googlemap.html">Maps</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-2">
<h4 class="sidenav-heading text-uppercase mrgn-b-md">Layouts</h4>
<ul class="list-unstyled">
<li><a href="index.html">Sidebar At left</a></li>
<li><a href="right-sidebar.html">Sidebar At right</a></li>
<li><a href="fixed-header.html">Fixed Header</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-2">
<h4 class="sidenav-heading text-uppercase mrgn-b-md">Pages</h4>
<ul class="list-unstyled">
<li><a href="users-list.html">Users</a></li>
<li><a href="ecommerce-product.html">Ecommerce</a></li>
<li><a href="email.html">Mailbox</a></li>
<li><a href="login.html">Extra Pages</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="bst-sparkline">
<div class="bst-card-box bst-sparkline-list bg-success clearfix">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <span class="show count-item" data-count="5000">0</span> <span>New visitors</span> </div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="chart sparkline text-center" data-chart="sparkline" data-type="bar" data-height="50px" data-barwidth="6" data-width="100%" data-barspacing="2" data-barcolor="#ffffff" data-values="[9, 8, 9, 7, 6, 8, 7, 8]"> </div>
</div>
</div>
<div class="bst-card-box bst-sparkline-list clearfix bg-info">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <span class="show count-item" data-count="3000">0</span> <span>New Users</span> </div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="chart sparkline text-center" data-chart="sparkline" data-type="bar" data-height="50px" data-barwidth="6" data-width="100%" data-barspacing="2" data-barcolor="#ffffff" data-values="[5, 6, 8, 9, 5, 8, 4, 6]"> </div>
</div>
</div>
<div class="bst-card-box bst-sparkline-list clearfix bg-secondary">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <span class="show count-item" data-count="7000">0</span> <span>Active Users</span> </div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="chart sparkline text-center" data-chart="sparkline" data-type="bar" data-height="50px" data-barwidth="6" data-width="100%" data-barspacing="2" data-barcolor="#ffffff" data-values="[9, 8, 9, 7, 6, 8, 7, 8]"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="bst-navbar-search">
<div class="overflow-wrapper">
<form class="bst-search-form" method="post" role="search" action="javascript:;">
<div class="input-group"> <span class="input-group-addon"> <span class="bst-search-form-title fa fa-search"></span> </span>
<input type="text" name="s">
</div>
</form>
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell-o"> </i> <span class="badge badge-danger">5</span> </a>
<ul class="dropdown-menu dropdown-custom dropdown-notifi">
<li> <strong class="drop-title"> <span> <i class="fa fa-bell-o" aria-hidden="true"></i> </span>Notifications</strong><a href="javascript:;" class="pull-right bg-primary base-reverse">Marks As Read</a></li>
<li> <a href="javascript:;" class="pos-relative">
<div class="mrgn-b-xs"> <span class="notification-icon"> <i class="fa fa-database text-danger"></i> </span> <span class="notification-title">Database overload</span> <span class="notification-ago">3 min ago</span> </div>
<p class="mrgn-all-none">Database overload due to incorrect queries</p>
<div class="clearfix"></div>
</a> </li>
<li> <a href="javascript:;" class="pos-relative">
<div class="mrgn-b-xs"> <span class="notification-icon"> <i class="fa fa-circle-o-notch fa-spin text-success" aria-hidden="true"></i> </span> <span class="notification-title">Installing App v1.2.1</span> <span class="notification-ago">60 % Done</span> </div>
<div class="progress progress-sm-height mrgn-all-none">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:60%"> </div>
</div>
<div class="clearfix"></div>
</a> </li>
<li> <a href="javascript:;" class="pos-relative">
<div class="mrgn-b-xs"> <span class="notification-icon"> <i class="fa fa-exclamation-triangle text-warning"></i> </span> <span class="notification-title">Application Error</span> <span class="notification-ago">10 min ago</span> </div>
<p class="mrgn-all-none">failed to initialize the application due to error weblogic.application.moduleexception</p>
<div class="clearfix"></div>
</a> </li>
<li> <a href="javascript:;">
<div class="mrgn-b-xs"> <span class="notification-icon"> <i class="fa fa-server text-info"></i> </span> <span class="notification-title">Server Status</span> <span class="notification-ago">30GB Free Space</span> </div>
<div class="progress progress-sm-height mrgn-all-none">
<div class="progress-bar progress-bar-info" role="progressbar" style="width:40%"></div>
<div class="progress-bar progress-bar-success" role="progressbar" style="width:10%"></div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%"></div>
</div>
<div class="clearfix"></div>
</a> </li>
<li> <a href="javascript:;">
<div class="mrgn-b-xs"> <span class="notification-icon"> <i class="fa fa-cogs text-success"></i> </span> <span class="notification-title">Application Configured</span> <span class="notification-ago">30 min ago</span> </div>
<p class="mrgn-all-none">Your setting is updated on server Sav3060</p>
<div class="clearfix"></div>
</a> </li>
<li> <a class="text-center" href="javascript:;"> See all notifications <i class="fa fa-angle-right mrgn-l-xs"></i> </a> </li>
</ul>
</li>
<li class="dropdown"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-envelope-o"></i> <span class="badge badge-danger">5</span> </a>
<ul class="dropdown-menu dropdown-custom">
<li> <strong class="drop-title">You have 5 new messages</strong> </li>
<li> <a href="javascript:;">
<div class="user-thumb pull-left"> <img class="img-responsive img-circle" src="assets/img/register-user-2.jpg" alt="User-image" width="64" height="64"> <span class="profile-status online pull-right"></span> </div>
<div class="user-content pull-left">
<h6 class="mrgn-all-none">Marya Kale</h6>
<p class="mrgn-b-xs">Just see the my admin!</p>
<span>9:30 AM</span> <span class="notification-ago">30 min ago</span> </div>
<div class="clearfix"></div>
</a> </li>
<li> <a href="javascript:;">
<div class="user-thumb pull-left"> <img class="img-responsive img-circle" src="assets/img/histroy-user-1.png" alt="User-image" width="64" height="64"> <span class="profile-status online pull-right"></span> </div>
<div class="user-content pull-left">
<h6 class="mrgn-all-none">Jim Gray</h6>
<p class="mrgn-b-xs">Just see the my admin!</p>
<span>9:30 AM</span> <span class="notification-ago">10 min ago</span> </div>
<div class="clearfix"></div>
</a> </li>
<li> <a href="javascript:;">
<div class="user-thumb pull-left"> <img class="img-responsive img-circle" src="assets/img/register-user-2.jpg" alt="User-image" width="64" height="64"> <span class="profile-status online pull-right"></span> </div>
<div class="user-content pull-left">
<h6 class="mrgn-all-none">Marya Kale</h6>
<p class="mrgn-b-xs">Just see the my admin!</p>
<span>9:30 AM</span> <span class="notification-ago">20 min ago</span> </div>
<div class="clearfix"></div>
</a> </li>
<li> <a href="javascript:;">
<div class="user-thumb pull-left"> <img class="img-responsive img-circle" src="assets/img/histroy-user-1.png" alt="User-image" width="64" height="64"> <span class="profile-status online pull-right"></span> </div>
<div class="user-content pull-left">
<h6 class="mrgn-all-none">Jim Gray</h6>
<p class="mrgn-b-xs">Just see the my admin!</p>
<span>9:30 AM</span> <span class="notification-ago">5 min ago</span> </div>
<div class="clearfix"></div>
</a> </li>
<li> <a class="text-center" href="javascript:;">See all notifications<i class="fa fa-angle-right mrgn-l-xs"></i> </a> </li>
</ul>
</li>
<li class="dropdown"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="user-dropdown">John Doe</span> <span class="caret"></span> <img class="img-responsive display-ib mrgn-l-sm img-circle" src="assets/img/user-1.jpg" width="64" height="64" alt="User-image"> </a>
<ul class="dropdown-menu">
<li> <a href="user-profile.html"> <i class="fa fa-user"></i> My Profile</a> </li>
<li> <a href="users-list.html"> <i class="fa fa-money"></i> My Contact</a> </li>
<li> <a href="email.html" class="pos-relative"> <i class="fa fa-inbox"></i> My Inbox <span class="badge badge-danger pull-right profile-badge">2</span> </a> </li>
<li> <a href="user-profile.html" class="pos-relative"> <i class="fa fa-tasks"></i> My task <span class="badge badge-success pull-right profile-badge">5</span> </a> </li>
<li> <a href="user-settings.html"> <i class="fa fa-cog"></i> Account Setting</a> </li>
<li role="separator" class="divider"></li>
<li> <a href="login.html"> <i class="fa fa-power-off"></i>Logout</a> </li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="bst-main pad-all-md">
<div class="bst-sidebar">
<div class="bst-sidebar-back"> </div>
<div class="bst-sidebar-nav-wrapper">
<div class="bst-site-link mrgn-b-md bg-white overflow-wrapper">
<div class="bst-site-info pull-left"> <i class="fa fa-globe mrgn-r-sm"> </i> <span>Beast </span> </div>
<button class="c-hamburger c-hamburger--htra bst-bars pull-right"> <span>toggle menu</span> </button>
</div>
<div class="bst-sidebar-menu pad-lr-lg pad-tb-md bg-white">
<nav class="sidebar-nav collapse">
<ul class="list-unstyled sidebar-menu">
<li class="sidenav-heading text-uppercase">Dashboards</li>
<li class="has-children"> <a href="#/"> <i class="fa fa-dashboard" aria-hidden="true"></i> <span>Dashboards</span> </a>
<ul class="list-unstyled sub-menu collapse">
<li> <a href="index.html"> <span>Dashboard 1</span> </a> </li>
<li> <a href="dashboard-v2.html"> <span>Dashboard 2</span> </a> </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="bst-content-wrapper">
<div class="bst-content">
<div class="bst-page-bar mrgn-b-md breadcrumb-double-arrow">
<ul class="breadcrumb">
<li class="breadcrumb-item text-capitalize">
<h3>Basic Template</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0VDz6QbiPUBe8PrpeGNq5K5-gBl0Z564"></script>
<script src="assets/js/vendor.js" type="text/javascript"></script>
<script src="assets/js/plugins.js" type="text/javascript"></script>
<script src="assets/js/beast.js" type="text/javascript"></script>
</body>
</html>
Beast is built with sass and most of the css properties are controlled with variables to make it easy to customize.
sass/_variables.scss
/* Gray and brand colors for use change Backgrounds color on overall site Classes */
$gray-base // Used for change text color for body text //
$gray-darker // Used for change text color for headings //
$gray-dark // Used for change text color for paragraphs //
$gray // Used for change text color //
$gray-light // Used for change text color for input text //
$gray-lighter // Used for change text color for input placeholder //
/* Its a five basic brand color which is bootstrap provided you can change yours theme color just change the value this veriable */
$brand-primary // change brand-primary for background-color, text color, button background, alert messages, labels background, progressbar background and all elements through out the site just change the value of this veriable //
$brand-success // Change brand-success background color change value //
$brand-info // Change brand-info background color change value //
$brand-warning // Change brand-warning background color change value //
$brand-danger // Change brand-danger background color change value //
/* If you want to use more anothor brand colors then use this veriables */
$brand-inverse // change brand-inverse background color through out the site just change the value of this veriable //
$brand-base // Change brand-base background color change value //
$brand-secondary // Change brand-secondary background color change value //
$brand-white // Change brand-white background color change value //
/* Badge color variation */
$badge-default-bg // Used to change background color for badge just change the value //
$badge-primary-bg // Used to change background color for badge just change the value //
$badge-success-bg // Used to change background color for badge just change the value //
$badge-info-bg // Used to change background color for badge just change the value //
$badge-warning-bg // Used to change background color for badge just change the value //
$badge-danger-bg // Used to change background color for badge just change the value //
$badge-inverse-bg // Used to change background color for badge just change the value //
sass/custom/_variables.scss
/* Variables for background colors */
$header-top-bar-bg: // Used for change background color for navbar header //
$main-content-bg: // If You want to use custom bg color then You can set the color value //
$header-logo-bg: // Change background color for navbar logo //
/* Variables for box shadow */
$shadow-md: 0 2px 8px 2px rgba(0, 0, 0, 0.05);
$shadow: 0 2px 7px #d2daeb;
/* Variables to customize content sections */
//--- bst block settings ---//
$block-bg: #fff; //--- If You want to use the body bg color as block bg then You can use '$body-bg' ---//
$block-padding-left: 30px;
$block-padding-right: 30px;
$block-padding-top: 30px;
$block-padding-bottom: 30px;
$block-margin: 0 0 30px 0;
$block-shadow: null !default;
$block-border-color: #eaebed;
$block-border-radius: $border-radius-base;
$block-full-bg: #fff; //--- If You want to use the body bg color as block bg then You can use '$body-bg' ---//
$block-full-padding: 0px !default;
$block-full-margin: 0 0 30px 0;
$block-full-shadow: null !default;
$block-full-border-color: #eaebed;
$block-full-border-radius: $border-radius-base;
//--- bst block title ---//
$block-title-bg: null !default;
$block-title-border: null !default;
$block-title-radius: $border-radius-base;
$block-title-padding: null !default;
$block-title-margin: null !default;
$block-title-font-family: inherit !default;
$block-title-font-weight: 400 !default;
$block-title-text-transform: capitalize !default;
$block-title-font-color: #414658 !default;
//--- bst block contextual link style ---//
$contextual-position-top: 0 !default;
$contextual-position-right: 0 !default;
$contextual-position-left: null !default;
$contextual-display: null !default;
$contextual-icon-size: 20px !default;
$contextual-icon-color: #414658 !default;
//--- bst block contextual dropdown style ---//
$contextual-dropdown-font-color: $dropdown-link-color !default;
$contextual-dropdown-hover-color: $dropdown-link-hover-color !default;
$contextual-dropdown-border-color: $dropdown-border !default;
$contextual-dropdown-border-radius: $border-radius-base !default;
$contextual-dropdown-shadow: null !default;
$contextaul-dropdown-width: 160px !default;
//--- bst block contextual more btn style ---//
$contextual-more-btn-bg: #f9fafc !default;
$contextual-btn-border-color: #d8e1f2 !default;
$contextual-btn-border-radius: 20px !default;
$contextual-btn-font-color: #758494 !default;
$contextual-btn-font-size: 12px !default;
$contextual-btn-padding: 3px 10px !default;
//--- bst content ---//
$block-content-bg: null !default;
$block-content-border: null !default;
$block-content-border-radius: $border-radius-base !default;
$block-content-margin: 0 0 0 0 !default;
$block-content-padding: 0 0 0 0 !default;
/* Variables to customize sidebar menu */
$sidenav-color: #758494;
$sidebar-menu-color: #758494;
$sidebar-menu-hover-color: #fff;
$sidebar-menu-font-size: 13px;
$sidebar-sub-menu-hover-color: #fff;
$sidebar-menu-hover-bg: #5e6db3;
$sidebar-menu-font-size: 13px;
$sidebar-width: 280px;
$sidebar-bg: #fff;
$sidebar-minimize-transition: all 0.3s ease-in-out 0s;
$sidebar-with-icon: true;
$sidebar-closed-width: 63px;
$sidebar-icon-font-size: 18px;
$sidebar-closed-sub-menu-color: #c5cae5;
$sidebar-closed-sub-menu-hover-bg: #6e7cbb;
$sidebar-closed-sub-menu-hover-color: #fff;
$mobile-ham-bar-bg: #fff;
$ham-btn-width: 35px !default;
$ham-btn-height: 24px !default;
Beast provided lots of classes which provides you the full control over design and makes it easy to customize any section just by adding or removing the classes. Beast is developed with with the in development possiblities and a powerful structure to make it stable and supported for any type of layout.
<!-- Sidebar and header control classes -->
bst-sidebar-right <!-- class to be placed on body tag show the sidebar in right side -->
bst-sidebar-closed <!-- class to be placed on body tag show collapsed sidebar -->
bst-fixed-header <!-- class to be placed on body tag to make header sticky -->
<!-- Classes for main content sections -->
bst-block <!-- class added on main content sections showing with border and padding by default -->
bst-full-block <!-- class added on main content sections showing with border without padding (full width block)-->
<!-- Margin classes -->
mrgn-all-none <!-- classes to remove margin from all sides of element -->
mrgn-b-none <!-- classes to remove bottom margin -->
mrgn-l-none <!-- classes to remove left margin -->
mrgn-r-none <!-- classes to remove right margin -->
mrgn-lr-none <!-- classes to remove left and right margin -->
mrgn-tb-none <!-- classes to remove top and bottom margin -->
mrgn-all-xs <!-- classes to give 10px margin for all side of element-->
mrgn-b-xs <!-- classes to give 10px bottom margin -->
mrgn-l-xs <!-- classes to give 10px left margin -->
mrgn-r-xs <!-- classes to give 10px right margin -->
mrgn-lr-xs <!-- classes to give 10px left and right margin -->
mrgn-tb-xs <!-- classes to give 10px top and bottom margin -->
mrgn-all-sm <!-- classes to give 15px margin for all side of element-->
mrgn-b-sm <!-- classes to give 15px bottom margin -->
mrgn-l-sm <!-- classes to give 15px left margin -->
mrgn-r-sm <!-- classes to give 15px right margin -->
mrgn-lr-sm <!-- classes to give 15px left and right margin -->
mrgn-tb-sm <!-- classes to give 15px top and bottom margin -->
mrgn-all-md <!-- classes to give 20px margin for all side of element-->
mrgn-b-md <!-- classes to give 20px bottom margin -->
mrgn-l-md <!-- classes to give 20px left margin -->
mrgn-r-md <!-- classes to give 20px right margin -->
mrgn-lr-md <!-- classes to give 20px left and right margin -->
mrgn-tb-md <!-- classes to give 20px top and bottom margin -->
mrgn-all-lg <!-- classes to give 30px margin for all side of element-->
mrgn-b-lg <!-- classes to give 30px bottom margin -->
mrgn-l-lg <!-- classes to give 30px left margin -->
mrgn-r-lg <!-- classes to give 30px right margin -->
mrgn-lr-lg <!-- classes to give 30px left and right margin -->
mrgn-tb-lg <!-- classes to give 30px top and bottom margin -->
<!-- Padding classes -->
pad-all-none <!-- classes to remove padding from all sides of element -->
pad-b-none <!-- classes to remove bottom padding -->
pad-l-none <!-- classes to remove left padding -->
pad-r-none <!-- classes to remove right padding -->
pad-lr-none <!-- classes to remove left and right padding -->
pad-tb-none <!-- classes to remove top and bottom padding -->
pad-all-xs <!-- classes to give 10px padding for all side of element-->
pad-b-xs <!-- classes to give 10px bottom padding -->
pad-l-xs <!-- classes to give 10px left padding -->
pad-r-xs <!-- classes to give 10px right padding -->
pad-lr-xs <!-- classes to give 10px left and right padding -->
pad-tb-xs <!-- classes to give 10px top and bottom padding -->
pad-all-sm <!-- classes to give 15px padding for all side of element-->
pad-b-sm <!-- classes to give 15px bottom padding -->
pad-l-sm <!-- classes to give 15px left padding -->
pad-r-sm <!-- classes to give 15px right padding -->
pad-lr-sm <!-- classes to give 15px left and right padding -->
pad-tb-sm <!-- classes to give 15px top and bottom padding -->
pad-all-md <!-- classes to give 20px padding for all side of element-->
pad-b-md <!-- classes to give 20px bottom padding -->
pad-l-md <!-- classes to give 20px left padding -->
pad-r-md <!-- classes to give 20px right padding -->
pad-lr-md <!-- classes to give 20px left and right padding -->
pad-tb-md <!-- classes to give 20px top and bottom padding -->
pad-all-lg <!-- classes to give 30px padding for all side of element-->
pad-b-lg <!-- classes to give 30px bottom padding -->
pad-l-lg <!-- classes to give 30px left padding -->
pad-r-lg <!-- classes to give 30px right padding -->
pad-lr-lg <!-- classes to give 30px left and right padding -->
pad-tb-lg <!-- classes to give 30px top and bottom padding -->
Beast comes with following layouts and designs
Beast is developer friendly and provide you the power to switch between the versions or designs by just changing the variables or including the files.
If you are developing with default (sass) and made a lot of changes as per your need but later you decid to switch to rounded ! Don't worry we have a solution for this, just follow the steps and compile sass files only
sass/_variables.scss file. $border-radius-base: 5px; $border-radius-large: 10px; $border-radius-small: 3px;
Want to switch to material design from default design then it will take just a minute, follow the steps and see the magic.
sass/custom/_custom.scss file. //@import 'reset-materials';
Progress bars have multiple usage on site like showing progress on a task or stats as bar relative to target.
Beast provide multiple type of progress bars and each one has a unique design.
<!-- Basic -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span>
</div>
</div>
<!-- Basic With Title -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div>
</div>
<!-- Variations -->
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (danger)</span> </div>
</div>
<!-- Basic rounded -->
<div class="progress progress-rounded">
<div class="progress-bar progress-rounded" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> </div>
</div>
<!-- Striped -->
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span>
</div>
</div>
First tab content
second tab content
Third tab content
<!-- tabs -->
<ul class="nav nav-tabs">
<li class="active"> <a data-toggle="tab" href="#tab-1" aria-expanded="false">First </a> </li>
<li> <a data-toggle="tab" href="#tab-2" aria-expanded="true">Second </a> </li>
<li> <a data-toggle="tab" href="#tab-3" aria-expanded="true">Third tab </a> </li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane fade in active">
<p>First tab content</p>
</div>
<div id="tab-2" class="tab-pane fade in">
<p>second tab content</p>
</div>
<div id="tab-3" class="tab-pane fade in">
<p>Third tab content</p>
</div>
</div>
Basic accordian content
<!-- Basic accordians -->
<div class="panel-group" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading pos-relative" role="tab" id="heading-One">
<h4 class="panel-title">
<a class="accordion-toggle collapsed show" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="accordion-title">Basic accordian</span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-One">
<div class="panel-body">
<p>Basic accordian content</p>
</div>
</div>
</div>
</div>
Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
For more detailed documentation of Bootstrap forms here: Form elements
To create a bootstrap form, the following tags are a must, It is the standard procedure in Bootstrap
<form> tag..form-group
<!-- Form Element -->
<form class="form-elments1" action="javascript:;" method="post">
<div class="form-group">
<label for="Email">Email address</label>
<input type="email" class="form-control" id="Email" placeholder="Email address" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="password" required>
</div>
<div class="form-group">
<label for="msg">Message</label>
<textarea class="form-control" id="msg" rows="3" required></textarea>
</div>
<div class="form-group">
<label for="auto-field">Auto generate code</label>
<input class="form-control" id="auto-field" placeholder="This is a Disabled" disabled="" type="text"> </div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Inputmask is a javascript library which creates an input mask to make the field usable different type of fied values which requires some format.
An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers and so on.
In form input mask if you want set predefind formet then set data-mask="99/99/9999" attribute according to the formet. Click Here
<!-- Date Input Mask -->
<div class="data-input">
<div class="form-group">
<label class="control-label">Date</label>
<input type="text" class="form-control inputmask" data-mask="99/99/9999" placeholder="--/--/----">
</div>
</div>
<!-- Phone Number Input Mask -->
<div class="data-input mrgn-b-md">
<div class="form-group">
<label class="control-label">Phone number</label>
<input type="text" class="form-control inputmask" data-mask="(999)-999-9999" placeholder="(___) ___-____">
</div>
</div>
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top,bottom.left.right by the plugin).
<!-- Tooltip Style -->
<button type="button" class="btn btn-inverse" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
$('[data-toggle="tooltip"]').tooltip();
Beast Provided so many types of panels with titles and you can also do slide up and slide down panel content.
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading. For proper link coloring, be sure to place links in headings within .panel-title.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<div class="panel panel-primary">
<div class="panel-heading">
<h5 class="panel-title text-capitalize">Primary Panel</h5>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
We also provided contextual text color you can change all contextual text color according to the own theme.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.
<div class="headings">
<h1>This is a Heading h1</h1>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.</p>
<h2>This is a Heading h2</h2>
<h3>This is a Heading h3</h3>
<h4>This is a Heading h4</h4>
<h5>This is a Heading h5</h5>
<h6>This is a Heading h6</h6>
</div>
<div class="caption-title">
<h5 class="text-uppercase">Caption text Big</h5>
</div>
<span class="text-uppercase">Caption Text Light</span>
Beast provided a multiple chart library. We have also created a plugin to use this library by writing HTML only.
Beast charts categories below here you can see :
Social Icons
We have replaced Bootstrap's default font icon Glyhpicons, with the Font Awesome and have created a few additional classes.
Please see the following examples where the icons are used along with some of the utility classes.
<!-- Rounded colored social icon --> <ul class="list-inline"> <li> <a href="javascript:;" data-toggle="tooltip" title="facebook" class="btn-circle btn-facebook active"> <i class="fa fa-facebook fa-2x square-50" aria-hidden="true"></i> </a> </li> <li> <a href="javascript:;" data-toggle="tooltip" title="twitter" class="btn-circle btn-twitter"> <i class="fa fa-twitter fa-2x square-50" aria-hidden="true"></i> </a> </li> <li> <a href="javascript:;" data-toggle="tooltip" title="linkedin" data-original-title="linkedin" class="btn-circle btn-linkedin"> <i class="fa fa-linkedin fa-2x square-50" aria-hidden="true"></i> </a> </li> <li> <a href="javascript:;" data-toggle="tooltip" title="google" data-original-title="google" class="btn-google btn-circle"> <i class="fa fa-google fa-2x square-50" aria-hidden="true"></i> </a> </li> <li> <a href="javascript:;" data-toggle="tooltip" title="stumbleupon" class="btn-circle btn-stumbleupon"> <i class="fa fa-stumbleupon fa-2x square-50" aria-hidden="true"></i> </a> </li> <li> <a href="javascript:;" data-toggle="tooltip" title="youtube" class="btn-circle btn-youtube"> <i class="fa fa-youtube fa-2x square-50" aria-hidden="true"></i> </a> </li> </ul><!-- Sign in / sign up social icon --> <ul class="list-unstyled"> <li> <a href="javascript:;" class="btn-app btn-block"> <span class="square-40"><i class="fa fa-adn fa-lg" aria-hidden="true"></i></span>Sign in with App.net </a> </li> <li> <a href="javascript:;" class="btn-bitbucket btn-block"> <span class="square-40"><i class="fa fa-bitbucket fa-lg" aria-hidden="true"></i></span>Sign in with Bitbucket </a> </li> <li> <a href="javascript:;" class="btn-dropbox btn-block"> <span class="square-40"><i class="fa fa-dropbox fa-lg" aria-hidden="true"></i></span>Sign in with Dropbox </a> </li> <li> <a href="javascript:;" class="btn-facebook btn-block"> <span class="square-40"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></span>Sign in with Facebook </a> </li> <li> <a href="javascript:;" class="btn-flickr btn-block"> <span class="square-40"><i class="fa fa-flickr fa-lg" aria-hidden="true"></i></span>Sign in with Flickr </a> </li> <li> <a href="javascript:;" class="btn-foursquare btn-block"> <span class="square-40"><i class="fa fa-foursquare fa-lg" aria-hidden="true"></i></span>Sign in with foursquare </a> </li> </ul>