<!DOCTYPE html>
< html lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
<!-- Meta, title, CSS, favicons, etc. -->
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Gentelella Alela! | < / title >
<!-- Bootstrap core CSS -->
< link href = "css/bootstrap.min.css" rel = "stylesheet" >
< link href = "fonts/css/font-awesome.min.css" rel = "stylesheet" >
< link href = "css/animate.min.css" rel = "stylesheet" >
<!-- Documentation extras -->
< link href = "css/docs.min.css" rel = "stylesheet" >
< script src = "js/jquery.min.js" > < / script >
< script type = "text/javascript" src = "js/shCore.js" > < / script >
< script type = "text/javascript" src = "js/shBrushXml.js" > < / script >
< link type = "text/css" rel = "stylesheet" href = "css/shCoreDefault.css" / >
< script type = "text/javascript" > SyntaxHighlighter . all ( ) ; < / script >
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- [if lt IE 9]>
< script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >
< script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js" > < / script >
<![endif]-->
< style >
body{
color: #73879C; background: #F7F7F7;
}
< / style >
< / head >
< body data-twttr-rendered = "true" cz-shortcut-listen = "true" >
< a class = "sr-only sr-only-focusable" href = "http://getbootstrap.com/css/#content" > Skip to main content< / a >
<!-- Docs master nav -->
< header class = "navbar navbar-static-top bs-docs-nav" id = "top" role = "banner" style = "background: #333" >
< div class = "container" >
< div class = "top_nav" >
< div class = "navbar-header" >
< button class = "navbar-toggle collapsed" type = "button" data-toggle = "collapse" data-target = ".bs-navbar-collapse" >
< span class = "sr-only" > Toggle navigation< / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / button >
< a class = "navbar-brand" style = "color: #ddd !important" > Gentelella Alela! - Documentation< / a >
< / div >
< / div >
< / div >
< / header >
< div class = "container body" >
< div class = "col-md-12 thumbnail" style = "margin-top:30px; margin-bottom: 50px; padding:5px;" >
< img src = "images/welcome.png" style = "width:100%;" / >
< / div >
< div class = "row" >
< div class = "col-md-12" >
< ul >
< li > < a href = "#documentation" > About documentation< / a > < / li >
< li > < a href = "#files_and_directories" > Files & Directories< / a > < / li >
< li > < a href = "#layout" > Layout & structure< / a > < / li >
< li > < a href = "#credits" > Credits< / a > < / li >
< / ul >
< div id = "introduction" > < div class = "box" > < h1 > Introduction< / h1 > < / div >
< p > Welcome to < strong > Gentelella< / strong > , a responsive, flat and full featured admin template. This template is built on Bootstrap 3 framework using modern techniques like HTML5 and CSS3 to be used for backend solutions of any size.< / p >
< h2 > Support Requests< / h2 >
< p > Browser support is targeted at < strong > IE9+, Google Chrome, Mozilla Firefox, Apple Safari, Opera and all Android and iOS mobile browsers< / strong > . For browsers not in this list, support is not available.< / p >
< h2 > Documentation Scope< / h2 >
< p > This documentation is targeted to explain < strong > structures like files and directories, template, CSS and JavaScript or how you can configure< / strong > the template. Since this template is built on top of the excellent Bootstrap 3 framework, you main source of documentation is here: < a href = "http://getbootstrap.com/css/" > http://getbootstrap.com/css/< / a > < / p >
< p > This documentation is also written in a style that assumes you already know the basics of CSS, JavaScript and HTML, so only the usage and concept of this template's elements that's going to be covered here.< / p >
< h2 > Getting Started< / h2 >
< p > To get started, just browse through the demonstration pages. Use < strong > Chrome Developer Tools (Chrome), Firebug (Firefox)< / strong > or similar plugins to analyze the code. To get a deeper understanding of the code, open the HTML and JS files and read through the commented code.< / p >
< p > Use the < code > plain_page.html< / code > and start right away building your own pages.< / p >
< / div >
< br > < br >
< div id = "files_and_directories" >
< div class = "content" >
< h2 > Files and Directories< / h2 >
< p > < / p >
< div class = "col-md-6" >
< img src = "images/welcome.png" style = "width: 100%; border: 1px solid #ccc; padding:5px;" / >
< / div >
< div class = "col-md-6" >
< / div >
< div class = "clearfix" > < / div >
< / div >
< / div >
< br > < br >
< div id = "layout" >
< h2 > Layout and structure< / h2 >
< ul >
< li > Header< / li >
< li > Top Menu< / li >
< li > Side Menu< / li >
< li > Content< / li >
< li > Footer< / li >
< / ul >
< h4 > Header< / h4 >
< p > Header code below< / p >
<!-- sample code for header -->
< div class = "highlight" >
< pre class = "prettyprint lines brush: xml" >
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< title > Gentelella Alela! | < / title >
<!-- Bootstrap core CSS -->
< link href = "css/bootstrap.min.css" rel = "stylesheet" >
< link href = "fonts/css/font-awesome.min.css" rel = "stylesheet" >
< link href = "css/animate.min.css" rel = "stylesheet" >
<!-- [if lt IE 9]>
< script src = "../assets/js/ie8-responsive-file-warning.js" > < / script >
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- [if lt IE 9]>
< script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >
< script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js" > < / script >
<![endif]-->
< / head >
< / pre >
< / div >
<!-- /sample code header -->
< h4 > Side Menu< / h4 >
< p > Menu for navigation, showing profile and primary functions such as logout, full screen and settings< / p >
<!-- sample code for side menu -->
< div class = "highlight" >
< pre class = "prettyprint lines brush: xml" >
< div class = "col-md-3 left_col" >
< div class = "left_col scroll-view" >
< div class = "navbar nav_title" style = "border: 0;" >
< a href = "index.html" class = "site_title" > Gentelella Alela!< / a >
< / div >
< div class = "profile" > <!-- img_2 -->
< div class = "profile_pic" >
< img src = "images/img.jpg" alt = "..." class = "img-circle profile_img" >
< / div >
< div class = "profile_info" >
< span > Welcome,< / span >
< h2 > Anthony Mutisya< / h2 >
< / div >
< / div >
< br / >
< div id = "sidebar-menu" class = "main_menu_side hidden-print main_menu" >
< div class = "menu_section" >
< h3 > General< / h3 >
< ul class = "nav side-menu" >
< li > < a > < i class = "fa fa-home" > < / i > Home < span class = "fa fa-chevron-down" > < / span > < / a >
< ul class = "nav child_menu" >
< li > < a href = "index.html" > Dashboard< / a > < / li >
< li > < a href = "index2.html" > Dashboard2< / a > < / li >
< / ul >
< / li >
< li > < a > < i class = "fa fa-edit" > < / i > Forms < span class = "fa fa-chevron-down" > < / span > < / a >
< ul class = "nav child_menu" >
< li > < a href = "form.html" > General Form< / a > < / li >
< li > < a href = "form_advanced.html" > Advanced Components< / a > < / li >
< li > < a href = "form_validation.html" > Form Validation< / a > < / li >
< li > < a href = "form_wizards.html" > Form Wizard< / a > < / li >
< li > < a href = "form_upload.html" > Form Upload< / a > < / li >
< li > < a href = "form_buttons.html" > Form Buttons< / a > < / li >
< / ul >
< / li >
< li > < a > < i class = "fa fa-desktop" > < / i > UI Elements < span class = "fa fa-chevron-down" > < / span > < / a >
< ul class = "nav child_menu" >
< li > < a href = "general_elements.html" > General Elements< / a > < / li >
< li > < a href = "media_gallery.html" > Media Gallery< / a > < / li >
< li > < a href = "typography.html" > Typography< / a > < / li >
< li > < a href = "icons.html" > Icons< / a > < / li >
< li > < a href = "glyphicons.html" > Glyphicons< / a > < / li >
< li > < a href = "widgets.html" > Widgets< / a > < / li >
< li > < a href = "invoice.html" > Invoice< / a > < / li >
< li > < a href = "inbox.html" > Inbox< / a > < / li >
< li > < a href = "calendar.html" > Calendar< / a > < / li >
< / ul >
< / li >
< li > < a > < i class = "fa fa-table" > < / i > Tables < span class = "fa fa-chevron-down" > < / span > < / a >
< ul class = "nav child_menu" >
< li > < a href = "tables.html" > Tables< / a > < / li >
< li > < a href = "tables_dynamic.html" > Table Dynamic< / a > < / li >
< / ul >
< / li >
< li > < a > < i class = "fa fa-bar-chart-o" > < / i > Data Presentation < span class = "fa fa-chevron-down" > < / span > < / a >
< ul class = "nav child_menu" >
< li > < a href = "chartjs.html" > Chart JS< / a > < / li >
< li > < a href = "chartjs2.html" > Chart JS2< / a > < / li >
< li > < a href = "morisjs.html" > Moris JS< / a > < / li >
< li > < a href = "echarts.html" > ECharts < / a > < / li >
< li > < a href = "other_charts.html" > Other Charts < / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
< div class = "menu_section" >
< h3 > Live On< / h3 >
< ul class = "nav side-menu" >
< li > < a > < i class = "fa fa-bug" > < / i > Additional Pages< / i > < span class = "fa fa-chevron-down" > < / span > < / a >
< ul class = "nav child_menu" >
< li > < a href = "e_commerce.html" > E-commerce< / a > < / li >
< li > < a href = "e_commerce_backend.html" > E-commerce Backend< / a > < / li >
< li > < a href = "projects.html" > Projects< / a > < / li >
< li > < a href = "project_detail.html" > Project Detail< / a > < / li >
< li > < a href = "contacts.html" > Contacts< / a > < / li >
< li > < a href = "profile.html" > Profile< / a > < / li >
< li > < a href = "real_estate.html" > Real Estate< / a > < / li >
< / ul >
< / li >
< li > < a > < i class = "fa fa-windows" > < / i > Extras< / i > < span class = "fa fa-chevron-down" > < / span > < / a >
< ul class = "nav child_menu" >
< li > < a href = "page_404.html" > 404 Error< / a > < / li >
< li > < a href = "page_500.html" > 500 Error< / a > < / li >
< li > < a href = "coming_soon.html" > Coming Soon< / a > < / li >
< li > < a href = "plain_page.html" > Plain Page< / a > < / li >
< li > < a href = "login.html" > Login Page< / a > < / li >
< li > < a href = "sign_up.html" > SignUp Page< / a > < / li >
< li > < a href = "pricing_tables.html" > Pricing Tables< / a > < / li >
< / ul >
< / li >
< li > < a > < i class = "fa fa-laptop" > < / i > Landing Page< / i > < span class = "label label-success pull-right" > Coming Soon< / span > < / a > < / li >
< / ul >
< / div >
< / div >
< div class = "sidebar-footer hidden-small" >
< a data-toggle = "tooltip" data-placement = "top" title = "Settings" >
< span class = "glyphicon glyphicon-cog" aria-hidden = "true" > < / span >
< / a >
< a data-toggle = "tooltip" data-placement = "top" title = "FullScreen" >
< span class = "glyphicon glyphicon-fullscreen" aria-hidden = "true" > < / span >
< / a >
< a data-toggle = "tooltip" data-placement = "top" title = "Lock" >
< span class = "glyphicon glyphicon-eye-close" aria-hidden = "true" > < / span >
< / a >
< a data-toggle = "tooltip" data-placement = "top" title = "Logout" >
< span class = "glyphicon glyphicon-off" aria-hidden = "true" > < / span >
< / a >
< / div >
< / div >
< / div >
< / pre >
< / div >
<!-- /sample code for top menu -->
< h4 > Content< / h4 >
< p > Main content wrapper with the heading and page content < / p >
<!-- sample code for content -->
< div class = "highlight" >
< pre class = "prettyprint lines brush: xml" >
< div class = "right_col" role = "main" >
< div class = "" >
< div class = "page-title" >
< div class = "title_left" >
< h3 >
Plain Page < small > Page subtile < / small >
< / h3 >
< / div >
< div class = "title_right" >
< div class = "col-md-5 col-sm-5 form-group pull-right top_search" >
< div class = "input-group" >
< input type = "text" class = "form-control" placeholder = "Search for..." >
< span class = "input-group-btn" >
< button class = "btn btn-default" type = "button" > Go!< / button >
< / span >
< / div >
< / div >
< / div >
< / div >
< div class = "clearfix" > < / div >
< div class = "row" >
< div class = "col-md-12" >
< div class = "x_panel" >
< div class = "x_title" >
< h2 > Page title < small > Page subtile < / small > < / h2 >
< ul class = "nav navbar-right panel_toolbox" >
< li > < a class = "collapse-link" > < i class = "fa fa-chevron-up" > < / i > < / a > < / li >
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" role = "button" aria-expanded = "false" >
< i class = "fa fa-wrench" > < / i >
< / a >
< ul class = "dropdown-menu" role = "menu" >
< li > < a href = "#" > Settings 1< / a > < / li >
< li > < a href = "#" > Settings 2< / a > < / li >
< / ul >
< / li >
< li > < a class = "close-link" > < i class = "fa fa-close" > < / i > < / a > < / li >
< / ul >
< div class = "clearfix" > < / div >
< / div >
< div class = "x_content" >
<!-- content starts here -->
<!-- content ends here -->
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / pre >
< / div >
<!-- sample code for content -->
< / div >
< br > < br >
< div id = "credits" >
< h2 class = "credits" > Credits and Thanks< / h2 >
< table class = "table table-bordered table-striped" >
< thead >
< tr >
< th > Name< / th >
< th > URL< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > jQuery< / td >
< td > < a href = "http://jquery.com/" > http://jquery.com/< / a > < / td >
< / tr >
< tr >
< td > jQuery Sparkline< / td >
< td > < a href = "http://omnipotent.net/jquery.sparkline/" > http://omnipotent.net/jquery.sparkline/< / a > < / td >
< / tr >
< tr >
< td > Auto resize textarea< / td >
< td > < a href = "http://www.jacklmoore.com/autosize/" > http://www.jacklmoore.com/autosize/< / a > < / td >
< / tr >
< tr >
< td > C3 charts< / td >
< td > < a href = "http://c3js.org/" > http://c3js.org/< / a > < / td >
< / tr >
< tr >
< td > Full screen editor< / td >
< td > < a href = "http://burakson.github.io/fseditor/" > http://burakson.github.io/fseditor/< / a > < / td >
< / tr >
< tr >
< td > jQuery Tags Input< / td >
< td > < a href = "https://github.com/xoxco/jQuery-Tags-Input" > https://github.com/xoxco/jQuery-Tags-Input< / a > < / td >
< / tr >
< tr >
< td > jQuery Validation Plugin< / td >
< td > < a href = "http://parsleyjs.org/" > http://parsleyjs.org/< / a > < / td >
< / tr >
< tr >
< td > Colorpicker for Bootstrap< / td >
< td > < a href = "https://github.com/xaguilars/bootstrap-colorpicker" > https://github.com/xaguilars/bootstrap-colorpicker< / a > < / td >
< / tr >
< tr >
< td > bootstrap-daterangepicker< / td >
< td > < a href = "https://github.com/dangrossman/bootstrap-daterangepicker" > https://github.com/dangrossman/bootstrap-daterangepicker< / a > < / td >
< / tr >
< tr >
< td > bootstrap-fileupload< / td >
< td > < a href = "http://blueimp.github.io/jQuery-File-Upload/" > http://blueimp.github.io/jQuery-File-Upload/< / a > < / td >
< / tr >
< tr >
< td > bootstrap-multiselect< / td >
< td > < a href = "https://github.com/davidstutz/bootstrap-multiselect" > https://github.com/davidstutz/bootstrap-multiselect< / a > < / td >
< / tr >
< tr >
< td > bootstrap-wysihtml5< / td >
< td > < a href = "http://jhollingworth.github.io/bootstrap-wysihtml5/" > http://jhollingworth.github.io/bootstrap-wysihtml5/< / a > < / td >
< / tr >
< tr >
< td > Dropzone< / td >
< td > < a href = "http://www.dropzonejs.com/" > http://www.dropzonejs.com/< / a > < / td >
< / tr >
< tr >
< td > Bootstrap switch< / td >
< td > < a href = "https://github.com/nostalgiaz/bootstrap-switch" > https://github.com/nostalgiaz/bootstrap-switch< / a > < / td >
< / tr >
< tr >
< td > SwitcheryJs< / td >
< td > < a href = "http://abpetkov.github.io/switchery/" > http://abpetkov.github.io/switchery/< / a > < / td >
< / tr >
< tr >
< td > DataTables< / td >
< td > < a href = "https://github.com/DataTables/DataTables" > https://github.com/DataTables/DataTables< / a > < / td >
< / tr >
< tr >
< td > DataTables tools< / td >
< td > < a href = "https://github.com/DataTables/TableTools" > https://github.com/DataTables/TableTools< / a > < / td >
< / tr >
< tr >
< td > easy pie chart< / td >
< td > < a href = "https://github.com/rendro/easy-pie-chart" > https://github.com/rendro/easy-pie-chart< / a > < / td >
< / tr >
< tr >
< td > FullCalendar< / td >
< td > < a href = "https://github.com/arshaw/fullcalendar" > https://github.com/arshaw/fullcalendar< / a > < / td >
< / tr >
<!-- <tr>
< td > GMaps [coming soon]< / td >
< td > < a href = "https://github.com/HPNeo/gmaps" > https://github.com/HPNeo/gmaps< / a > < / td >
< / tr > -->
< tr >
< td > jQuery Knob< / td >
< td > < a href = "https://github.com/aterrien/jQuery-Knob" > https://github.com/aterrien/jQuery-Knob< / a > < / td >
< / tr >
< tr >
< td > select2< / td >
< td > < a href = "https://github.com/ivaynberg/select2/" > https://github.com/ivaynberg/select2/< / a > < / td >
< / tr >
< tr >
< td > jQuery-Autocomplete< / td >
< td > < a href = "https://github.com/devbridge/jQuery-Autocomplete" > https://github.com/devbridge/jQuery-Autocomplete< / a > < / td >
< / tr >
< tr >
< td > Twitter Bootstrap Wizard< / td >
< td > < a href = "https://github.com/VinceG/twitter-bootstrap-wizard" > https://github.com/VinceG/twitter-bootstrap-wizard< / a > < / td >
< / tr >
< tr >
< td > E-Charts< / td >
< td > < a href = "http://echarts.baidu.com/doc/example-en.html" > http://echarts.baidu.com/doc/example-en.html< / a > < / td >
< / tr >
< tr >
< td > Font Awesome< / td >
< td > < a href = "http://fortawesome.github.io/Font-Awesome/" > http://fortawesome.github.io/Font-Awesome/< / a > < / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< / div >
< / div >
<!-- Footer
================================================== -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "js/jquery.min.js" > < / script >
< script src = "js/bootstrap.min.js" > < / script >
< / body > < / html >
