Getting started

Thank you for purchasing Boostbox. If you have any questions that are beyond the scope of this help file, please leave a comment in the forum and we will respond as soon as possible.

General Structure

The Boostbox Admin Template has been built upon the Bootstrap framework. So everything you find in Bootstrap, you find in Boostbox... and more. Boostbox also included a lot of external javascript libraries wich are optional to include in your project.

HTML

Boostbox requires a few CSS and Javascript imports. Copy the code below to get you started on your project. 

<html lang="en">
	<head>
		<title>Boostbox</title>

		<!-- BEGIN META -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="your,keywords">
		<meta name="description" content="Short explanation about this website">

		<!-- BEGIN STYLESHEETS -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,300,400,600,700,800' rel='stylesheet' type='text/css'/>
		<link type="text/css" rel="stylesheet" href="/assets/css/theme-default/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="/assets/css/theme-default/boostbox.css" />
		<link type="text/css" rel="stylesheet" href="/assets/css/theme-default/boostbox_responsive.css" />
		<link type="text/css" rel="stylesheet" href="/assets/css/theme-default/font-awesome.min.css" />
		<!-- Additional CSS includes -->
		
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="/assets/js/libs/utils/html5shiv.js"></script>
		<script type="text/javascript" src="/assets/js/libs/utils/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		~ BODY content goes here ~

		<!-- BEGIN JAVASCRIPT -->
		<script src="/assets/js/libs/jquery/jquery-1.11.0.min.js"></script>
		<script src="/assets/js/libs/jquery/jquery-migrate-1.2.1.min.js"></script>
		<script src="/assets/js/core/BootstrapFixed.js"></script>
		<script src="/assets/js/libs/bootstrap/bootstrap.min.js"></script>
		<!-- Additional JS includes -->
		
		<!-- Always put App.js last in your javascript imports -->
		<script src="/assets/js/core/App.js"></script>
	</body>
</html>

Body

Boostbox has a fluid layout with two columns. The first column contains the main menu, it's located in a <div> with an id of #sidebar. The second column contains the main content, it's in a <div> with an id of #content. The header can be located in a <div> with an id of #header.

The general template structure is the same throughout the template. Here is the general structure. 

<header id="header">
	~ Header content goes here ~
</header>
<div id="base">
	<div id="sidebar">
		~ Sidebar content goes here ~
	</div>
	<div id="content">
		~ Main content goes here ~
	</div>
</div>

Sidebar structure

The sidebar contains the logo, a searchbar and the main menu.

The logo is contained in an anchor with a class of main-brand. 

<div id="sidebar">
	<div class="sidebar-back"></div>
	<div class="sidebar-content">
		<div class="nav-brand">
			<a class="main-brand" href="../../html/dashboards/dashboard.html">
				~ Your logo goes here ~
			</a>
		</div>
		<form class="sidebar-search" role="search">
			<a href="javascript:void(0);"><i class="fa fa-search fa-fw search-icon"></i><i class="fa fa-angle-left fa-fw close-icon"></i></a>
			<div class="form-group">
				<div class="input-group">
					<input type="text" class="form-control navbar-input" placeholder="Search...">
					<span class="input-group-btn">
						<button class="btn btn-equal" type="button"><i class="fa fa-search"></i></button>
					</span>
				</div>
			</div>
		</form>
		<ul class="main-menu">
			~ Main navigation goes here ~
		</ul>
	</div>
</div>

The main menu can contain links. Every main link can hold an icon. Every menu item can contain a submenu. Visually Boostbox will indent and darken the submenu's up to 5 levels deep.

To add an extra submenu, simply add an ul list to a li item. You can see this with "Submenu link3" in the code sample below. 

<ul class="main-menu">
	...
	<li>
		<a href="javascript:void(0);" class="active">
			<i class="fa fa-file fa-fw"></i><span class="title">Home</span> <span class="expand-sign">+</span>
		</a>
	</li>
	<li>
		<a href="javascript:void(0);" class="active">
			<i class="fa fa-file fa-fw"></i><span class="title">Profile</span> <span class="expand-sign">+</span>
		</a>
		<ul>
			<li><a href="#">Submenu link1</a></li>
			<li><a href="#">Submenu link2</a></li>
			<li>
				<a href="#">Submenu link3</a>
				<ul>
					...
				</ul>
			</li>
			...
		</ul>
	</li>
	...
</ul>

Header structure

The header contains a modified version of the Bootstrap navbar. Therefore you can use the navbar code from the Bootstrap site to create the header in your Admin template.

View the code below to get started. For more details visit the Bootstrap docs . 

<header id="header">
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			~ Mobile navigation items ~
		</div>
		<div class="collapse navbar-collapse" id="header-navbar-collapse">
			<ul class="nav navbar-nav">
				~ Left aligned navigation items ~
			</ul>
			<ul class="nav navbar-nav navbar-right">
				~ Right aligned navigation items ~
			</ul>
		</div>
	</nav>
</header>

Less structure

Use the .less files to change the look of your project.

HTML

The .less files for Boostbox have the following structure: 

boostbox/
└── assets/
    └── less/
        ├── bootstrap.less
        ├── boostbox.less
        ├── boostbox_demo.less
        ├── boostbox_responsive.less
        ├── bootstrap/
        │   ├── // unmodified bootstrap less files
        │   └── ...
        ├── boostbox/
        │   ├── // boostbox less files
        │   ├── ...
        │   └── responsive/
        │       ├── // responsive boostbox less files
        │       └── ...
        ├── libs/
        │   ├── // less files for javascript addons
        │   └── ...
        └── shared/
            ├── animations.less
            ├── mixins.less
            ├── variables.less
            └── themes/
                ├── theme-1.less
                ├── theme-2.less
                ├── theme-3.less
                ├── theme-4.less
                ├── theme-5.less
                └── theme-default.less

Basic modifications

If you want to tweak some colors and basic dimensions for your project, you can create a new theme in 2 steps:

  1. Create a new file in the directory /boostbox/assets/less/shared/themes/ called:theme-custom.less
  2. In the file /boostbox/assets/less/shared/variables.less change the line at the very bottom from:
    @import "themes/theme-default.less";
    to
    @import "themes/theme-custom.less";

Any modification of .less variables should be placed inside theme-custom.less. This file will overwrite any variable located in /boostbox/assets/less/shared/variables.less and /boostbox/assets/less/bootstrap/variables.less

Extensive modifications

Boostbox has kept the Bootstrap .less files original. This way you can update Bootstrap easily. Therefore it's recommended not to change the files located in /boostbox/assets/less/bootstrap/.
The documentation has green outlined boxes which indicates the location of the .less files for that particular component. These files overwrite the Bootstrap components in some cases. Extensive modifications can be applied in these .less files.

Compile

If you modify the .less files, you should remember to compile the .less files to CSS. The .less files that should be compiled to CSS are the files directly in the directory /boostbox/assets and every .less file located in the subdirectories of /boostbox/assets/libs.

Credits

Boostbox uses the following images, less files and javascript files as listed: 

boostbox/
├── assets/
│   └── less/
│       ├── bootstrap.less (from Twitter, Inc)
│       └── bootstrap/ (from Twitter, Inc)
├── img/
│   ├── img1.jpg (from Pixabay)
│   ├── img2.jpg (from Pixabay)
│   ├── img3.jpg (from Envato)
│   ├── img4.jpg (from Pixabay)
│   ├── img5.jpg (from Pixabay)
│   ├── img6.jpg (from Pixabay)
│   ├── img7.jpg (from Pixabay)
│   ├── img8.jpg (from Photodune, link: 'http://photodune.net/item/facial-portrait-of-an-attractive-adult-man/6364232' )
│   ├── avatar1.jpg (from Photodune, link: 'http://photodune.net/item/facial-portrait-of-an-attractive-adult-man/6364232' )
│   ├── avatar2.jpg (from Pixabay)
│   └── avatar3.jpg (from Pixabay)
└── js/
    └── libs/
        ├── dataTables/ (from Allan Jardine)
        ├── blueimp-file-upload/ (from Sebastian Tschan)
        ├── bootstrap/ (from Twitter, Inc)
        ├── bootstrap-colorpicker/ (from Stefan Petre)
        ├── bootstrap-datetimepicker/ (from Stefan Petre)
        ├── bootstrap-tagsinput/ (from Tim Schlechter)
        ├── ckeditor/ (from CKEditor)
        ├── excanvas-modified/ (from Google)
        ├── flot/ (from IOLA and Ole Laursen)
        ├── fullcalendar/ (from Adam Shaw)
        ├── google-code-prettify/ (from Google)
        ├── inputmask/ (from Robin Herbots)
        ├── jquery/ (from jQuery Foundation, Inc)
        ├── jquery-knob/ (from Anthony Terrien)
        ├── jquery-ui/ (from jQuery Foundation, Inc)
        ├── jquery-validation/ (from Jörn Zaefferer)
        ├── moment/ (from Tim Wood, Iskren Chernev, Moment.js contributors)
        ├── morris.js/ (from Olly Smith)
        ├── multi-select/ (from Sam Hocevar)
        ├── nestable/ (from David Bushell)
        ├── raphael/ (from Dmitry Baranovskiy)
        ├── select2/ (from Igor Vaynberg)
        ├── slimscroll/ (from Piotr Rochala)
        ├── sparkline/ (from Splunk, Inc)
        ├── spin.js/ (from Felix Gnass)
        ├── toastr/ (from Hans Fjällemark & John Papa)
        ├── typeahead/ (from Twitter, Inc)
        ├── wizard/ (from Vincent Gabriel & Jason Gill)
        └── wysihtml5/ (from XING AG)