Zeiss – Responsive Boostrap Admin

Zeiss is a bootstrap based premium admin template. It has super clean user interface, customizable components and widgets It is fully responsive and easy to customize. The code is lightweight with support minify version and fully customizable with developer version. It’s easy to make it become into real web application.

Zeiss is a Responsive Admin Template fully featured premium admin template built with Bootstrap 3.3.7, HTML5, CSS3, jQuery and LESS, beautiful features ready to use.

Demo

https://demo.ninjateam.org/html/zeiss/light/?storefront=envato-elements

Structure

File structure

— html files
— assets
|—– fonts (All fonts files here. Including Icon Fonts)
|—– images (Images for demo)
|—– less( LESS files here)
|—– plugin ( All plugin files )
|—– scripts ( All common javascript here. You can find file scripts initial and demo for plugin here)
|—– styles ( All Css here)

HTML structure

<div class="main-menu">
    <header class="header">
        <a href="#" class="logo">...</a>
        <!-- .logo -->

        <button type="button" class="button-close glyphicon glyphicon-remove-circle js__menu_close"></button>
        <div class="user">
            ...
        </div>
        <!-- /.user -->
    </header>
    <!-- /.header -->

    <div class="content">
        <div class="navigation">
            <h5 class="title">...</h5>
            <!-- /.title -->
            <ul class="menu js__accordion">
                <li>...</li>
            </ul>
            <!-- /.menu -->
            ...
        </div>
        <!-- /.navigation -->
    </div>
    <!-- /.content -->
</div>
<!-- /.main-menu -->

<div class="fixed-navbar">
    <div class="pull-left">
        <button type="button" class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
        <h1 class="page-title">...</h1>
        <!-- /.page-title -->
    </div>
    <!-- /.pull-left -->

    <div class="pull-right">
        <a href="#" class="fa fa-bell-o notice-alarm js__toggle_open" data-target="#notification-popup"><span class="dot"></span></a>
        <form action="#" class="searchform"><input type="search" placeholder="Search..." class="input-search"><button class="fa fa-search button-search" type="submit"></button></form>
        <!-- /.searchform -->
    </div>
    <!-- /.pull-right -->
</div>
<!-- /.fixed-navbar -->


<div id="notification-popup" class="notice-popup js__toggle">
    <a href="#" class="popup-close glyphicon glyphicon-remove js__toggle_close"></a>
    <h2 class="popup-title">Notifications</h2>
    <!-- /.popup-title -->

    <div class="content">
        <ul class="notice-list">
            <li>...</li>
        </ul>
        <!-- /.notice-list -->
    </div>
    <!-- /.content -->
</div>
<!-- /#notification-popup -->


<div id="wrapper">
    <div class="main-content">
        ...

        <footer class="footer">
            ...
        </footer>
        <!-- footer -->
    </div>
     <!-- .main-content -->
</div>
<!-- #wrapper -->

CSS & LESS

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes.