Thank you
AdminEx is a flat theme packed with a bunch of useful components, organized and structured properly so that you don't have to spend a lot of time to integrate it with your web application. AdminEx is slick, fat free and well documented. Use AdminEx to boost up user experience of your application, and give it a face lift in almost no time.
AdminEx/
|-- css
|-- fonts
|-- images
|-- js
This template is fully responsive and fluid layout. Following are the general structures.
Following are the markup of main structure.
<section>
<!-- left side start-->
<div class="left-side sticky-left-side">
...
</div>
<!-- left side end-->
<!-- main content start-->
<div class="main-content" >
<!-- header section start-->
<div class="header-section">
...
</div>
<!-- header section end-->
<!-- page heading start-->
<div class="page-heading">
...
</div>
<!-- page heading end-->
<!--body wrapper start-->
<div class="wrapper">
...
</div>
<!--body wrapper end-->
<!--footer section start-->
<footer>
...
</footer>
<!--footer section end-->
</div>
<!-- main content end-->
</section>
Following are the markup of left side. Which contains logo and side bar navigation.
<!-- left side start-->
<div class="left-side">
<!--logo and iconic logo start-->
<div class="logo text-center">
<a href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div class="logo-icon text-center">
<a href="index.html"><img src="images/logo_icon.png" alt=""></a>
</div>
<!--logo and iconic logo end-->
<div class="left-side-inner">
<!-- visible to small devices only -->
<div class="visible-xs hidden-sm hidden-md hidden-lg">
...
</div>
<!--sidebar nav start-->
<ul class="nav nav-pills nav-stacked custom-nav">
<li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
...
</ul>
<!--sidebar nav end-->
</div>
</div>
<!-- left side end-->
Following are the markup of left navigation.
<!--sidebar nav start-->
<ul class="nav nav-pills nav-stacked custom-nav">
<li class="active"><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
<li class="menu-list"><a href=""><i class="fa fa-laptop"></i> <span>Layouts</span></a>
<ul class="sub-menu-list">
<li><a href="blank_page.html"> Blank Page</a></li>
<li><a href="boxed_view.html"> Boxed Page</a></li>
<li><a href="leftmenu_collapsed_view.html"> Sidebar Collapsed</a></li>
<li><a href="horizontal_menu.html"> Horizontal Menu</a></li>
</ul>
</li>
.....
</ul>
<!--sidebar nav end-->
The menu name should always wrap with span and a parent menu with sub menus should always have a class of menu-list.
To activate Parent Menu have to add class active :
<li class="active"> ... </li>
To activate Parent Menu with Sub Menu have to add class nav-active:
<li class="menu-list nav-active">
<a href=""><i class="fa fa-laptop"></i> <span>Layouts</span></a>
<ul class="sub-menu-list">
<li class="active"><a href="blank_page.html"> Blank Page</a></li>
...
</ul>
</li>
Header section structure are as follows. Which contains toggle button, search form and notifications.
<!-- header section start-->
<div class="header-section">
<!--toggle button start-->
<a class="toggle-btn"><i class="fa fa-bars"></i></a>
<!--toggle button end-->
<!--search start-->
<form class="searchform" action="index.html" method="post">
<input type="text" class="form-control" name="keyword" placeholder="Search here..." />
</form>
<!--search end-->
<!--notification menu start -->
<div class="menu-right">
...
</div>
<!--notification menu end -->
</div>
<!-- header section end-->
You can visible the top header, left side and footer fixed to its position.
To enable sticky header please add class sticky-header to the body element of the page.
<body class="sticky-header">
To enable sticky left side please add class sticky-left-side to the left-side element of the page.
<div class="left-side sticky-left-side">
To enable sticky footer please add class sticky-footer to the footer element of the page.
<footer class="sticky-footer">
To enable left menu collapsed please add class left-side-collapsed to the body element of the page.
<body class="left-side-collapsed">
For boxed page just wrap the class container as the bellow shown..
<section>
<div class="container">
<!-- left side start-->
<div class="left-side">
...
</div>
<!-- left side end-->
<!-- main content start-->
<div class="main-content" >
...
</div>
<!-- main content end-->
</div>
</section>
The below code should be included in every pages in the <head>
<!--common--> <link href="css/style.css" rel="stylesheet"> <link href="css/style-responsive.css" rel="stylesheet">
We uses many css files and most commonly uses of it are imported in a single css file (style.css).
@import url('bootstrap.min.css');
@import url('bootstrap-reset.css');
@import url('jquery-ui-1.10.3.css');
@import url('../fonts/css/font-awesome.min.css');
Following js code should be included in every page before the </body> tags. Common javaScript initialization are included in the js/scripts.js which is needed for all pages.
<!-- Placed js at the end of the document so the pages load faster --> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery-ui-1.9.2.custom.min.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/modernizr.min.js"></script> <script src="js/jquery.nicescroll.js"></script> <!--common scripts for all pages--> <script src="js/scripts.js"></script>
To create a new page, you can use blank_page.html which provides basic page layout which you can extend and modify further.
AdminEx uses Open Sans font from google fonts. The font imported in main css file: css/style.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
Below is the list of all plugins and external resources used to power this template.