<!DOCTYPE html>
|
<html 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">
|
<title>Kode - Documentation</title>
|
|
<!-- ========== Css Files ========== -->
|
<link href="css/bootstrap.css" rel="stylesheet">
|
<link href="css/style.css" rel="stylesheet">
|
</head>
|
<body>
|
<a href="#top" class="gotop">↑ Top</a>
|
<div id="top">
|
<h1>Kode<small>Documentation</small></h1>
|
<ul class="top-menu">
|
<li>Thank you for purchasing kode</li>
|
<li><a href="#support">Support</a></li>
|
</ul>
|
</div>
|
|
<ul class="sidebar col-md-2">
|
<li class="title">Getting Started</li>
|
<li><a href="#theme-files">Theme Files</a></li>
|
<li><a href="#fireworks-layout-png">Fireworks Layout PNG</a></li>
|
<li><a href="#includes">Includes</a></li>
|
<li class="title">Others</li>
|
<li><a href="#topbar">Topbar</a></li>
|
<li><a href="#css">Css</a></li>
|
<li><a href="#sidebar">Sidebar</a></li>
|
<li><a href="#layouts">Layouts</a></li>
|
<li><a href="#grid">Grid</a></li>
|
<li><a href="#bootstrap">Bootstrap</a></li>
|
<li><a href="#source">Source and Plugins</a></li>
|
<li><a href="#support">Support</a></li>
|
</ul>
|
|
<div class="content col-md-10">
|
<h3>Getting Started</h3>
|
<p class="bigtext">Thanks for Purchasing Kode. Kode is a admin template based on Boostrap.Builded with CSS, jQuery and Less.</p>
|
|
|
<div class="post" id="theme-files">
|
<h4>Theme Files</h4>
|
<p>Html Files</p>
|
<ul class="root-ul">
|
<li><b>index.html:</b> Index page</li>
|
<li><b>404.html:</b> 404 Page not found</li>
|
<li><b>500.html:</b> 500 Server error</li>
|
<li><b>basic-table.html:</b> Basic table styles</li>
|
<li><b>blank.html:</b> Blank page</li>
|
<li><b>buttons.html:</b> Button and styles</li>
|
<li><b>changelogs.html:</b> Changelogs of Kode</li>
|
<li><b>charts.html:</b> Charts</li>
|
<li><b>contact.html:</b> Contact form</li>
|
<li><b>customizable.html:</b> Customizable elements</li>
|
<li><b>data-table.html:</b> Data tables</li>
|
<li><b>forgot-password.html:</b> Forgot password form</li>
|
<li><b>form-elements.html:</b> Form elements</li>
|
<li><b>grid.html:</b> Grid styles</li>
|
<li><b>helper-classes.html:</b> Helper classes</li>
|
<li><b>icons.html:</b> Icons</li>
|
<li><b>invoice.html:</b> Invoice page</li>
|
<li><b>layouts.html:</b> Form layouts</li>
|
<li><b>lockscreen.html:</b> Lockscreen</li>
|
<li><b>login.html:</b> Login form</li>
|
<li><b>mailbox.html:</b> Mailbox</li>
|
<li><b>maps.html:</b> Maps</li>
|
<li><b>modal-boxes.html:</b> Modal Boxes</li>
|
<li><b>notifications.html:</b> Notifications and alert boxes</li>
|
<li><b>others.html:</b> Other UI elements</li>
|
<li><b>panels.html:</b> Panels</li>
|
<li><b>progress-bars.html:</b> Progress bars</li>
|
<li><b>register.html:</b> Register form</li>
|
<li><b>social-profile.html:</b> Social profile</li>
|
<li><b>tabs.html:</b> Tabs</li>
|
<li><b>text-editors.html:</b> Text editors</li>
|
<li><b>typography.html:</b> Typography</li>
|
<li><b>widgets.html:</b> Widgets</li>
|
</ul>
|
<p>Css Files</p>
|
<ul class="root-ul">
|
<li><b>root.css:</b> Root styles</li>
|
<li><b>bootstrap.css:</b> Bootstrap 3 main css</li>
|
<li><b>style.css:</b> Theme styles</li>
|
<li><b>style.less:</b> style file less version</li>
|
<li><b>shortcuts.css:</b> Shortcuts codes</li>
|
<li><b>responsive.css:</b> Responsive definitions</li>
|
<li><b>font-awesome.min.css:</b> Font awesome main file</li>
|
<li><b>plugins:</b> Plugin folder
|
<ul>
|
<li><b>awesome-bootstrap-checkbox</b>
|
<ul>
|
<li><b>awesome-boostrap-checkbox.css:</b> Main File</li>
|
</ul>
|
</li>
|
<li><b>bootstrap-select</b>
|
<ul>
|
<li><b>bootstra-select.css:</b> Main File</li>
|
</ul>
|
</li>
|
<li><b>bootstrap-toggle</b>
|
<ul>
|
<li><b>bootstra-toggle.min.css:</b> Main File</li>
|
</ul>
|
</li>
|
<li><b>bootstrap-wysihtml5</b>
|
<ul>
|
<li><b>bootstrap-wysihtml5.css:</b> Main File</li>
|
</ul>
|
</li>
|
<li><b>chartist</b>
|
<ul>
|
<li><b>chartist.min.css:</b> Main File</li>
|
</ul>
|
</li>
|
<li><b>datatables</b>
|
<ul>
|
<li><b>datatables.css:</b> Main File</li>
|
</ul>
|
</li>
|
<li><b>rickshaw</b>
|
<ul>
|
<li><b>detail.css:</b> Detail styles</li>
|
<li><b>graph.css:</b> Graph styles</li>
|
<li><b>legend.css:</b> Legend styles</li>
|
<li><b>rickshaw.css:</b> Main File</li>
|
</ul>
|
</li>
|
<li><b>summernote</b>
|
<ul>
|
<li><b>summernote-bs3.css:</b> Bootstrap 3 styles</li>
|
<li><b>summernote.css:</b> Main File</li>
|
</ul>
|
</li>
|
<li><b>sweet-alert</b>
|
<ul>
|
<li><b>sweet-alert.css</b> Main File</li>
|
</ul>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
|
<p>Javascript Files</p>
|
<ul class="root-ul">
|
<li><b>jquery.min.js:</b> js</li>
|
<li><b>plugins.js:</b> js</li>
|
<li><b>bootstrap:</b> Bootstrap jquery folder
|
<ul>
|
<li><b>bootstrap.min.js:</b> Main file</li>
|
</ul>
|
</li>
|
<li><b>bootstrap-select:</b> Bootstrap select plugin folder
|
<ul>
|
<li><b>bootstrap-select.js:</b> Main file</li>
|
</ul>
|
</li>
|
<li><b>bootstrap-toggle:</b> Bootstrap toggle plugin folder
|
<ul>
|
<li><b>bootstrap-toggle.min.js:</b> Main file</li>
|
</ul>
|
</li>
|
<li><b>bootstrap-wysihtml5:</b> Bootstrap wysihtml5 editor folder
|
<ul>
|
<li><b>bootstrap-wysihtml5.js:</b> Bootstrap file</li>
|
<li><b>wysihtml5-0.3.0.min.js:</b> Main file</li>
|
</ul>
|
</li>
|
<li><b>chartist:</b> Chartist plugin folder
|
<ul>
|
<li><b>chartist.js:</b> Main file</li>
|
<li><b>chartist-plugin.js</b> Demo codes</li>
|
</ul>
|
</li>
|
<li><b>datatables:</b> Datatables plugin folder
|
<ul>
|
<li><b>datatables.min.js:</b> Main file</li>
|
</ul>
|
</li>
|
<li><b>easypiechart:</b> Easy pie chart plugin folder
|
<ul>
|
<li><b>easypiechart.js:</b> Main file</li>
|
<li><b>easypiechart-plugin.js:</b> Demo codes</li>
|
</ul>
|
</li>
|
<li><b>flot-chart:</b> Flot chart plugin folder
|
<ul>
|
<li><b>flot-chart-pie.js:</b> Pie chart</li>
|
<li><b>flot-chart-stack.js:</b> Stack chart</li>
|
<li><b>flot-chart-time.js:</b> Time</li>
|
<li><b>flot-chart.js:</b> Main file</li>
|
<li><b>flot-chart-plugin.js:</b> Demo codes</li>
|
</ul>
|
</li>
|
<li><b>gmaps:</b> Gmaps plugin folder
|
<ul>
|
<li><b>gmaps.js</b> Main file</li>
|
<li><b>gmaps-plugin.js</b> Demo codes</li>
|
</ul>
|
</li>
|
<li><b>kode-alert:</b> Kode alert plugin folder
|
<ul>
|
<li><b>main.js</b> Main file</li>
|
</ul>
|
</li>
|
<li><b>rickshaw:</b> Rickshaw plugin folder
|
<ul>
|
<li><b>d3.v3.js</b> d3 lib</li>
|
<li><b>rickshaw.js</b> Main file</li>
|
<li><b>rickshaw-plugin.js</b> Demo codes</li>
|
</ul>
|
</li>
|
<li><b>sparkline:</b> Sparkline plugin folder
|
<ul>
|
<li><b>sparkline.js</b> Main file</li>
|
<li><b>sparkline-plugin.js</b> Demo codes</li>
|
</ul>
|
</li>
|
<li><b>summernote:</b> Summernote plugin folder
|
<ul>
|
<li><b>summernote.min.js</b> Main file</li>
|
</ul>
|
</li>
|
<li><b>sweet-alert:</b> Sweet alert plugin folder
|
<ul>
|
<li><b>sweet-alert.min.js</b> Main file</li>
|
</ul>
|
</li>
|
<ul>
|
|
</div>
|
|
|
|
|
<div class="post" id="fireworks-layout-png">
|
<h4>Fireworks Layout PNG</h4>
|
<ul class="root-ul">
|
<li><b>Illustration / Error-Pages-Icons.png:</b> Error page Illustration</li>
|
<li><b>Layered-PNG / Base.png:</b> Base theme</li>
|
<li><b>Layered-PNG / ErrorPages.png:</b> Error page</li>
|
<li><b>Layered-PNG / Login.png:</b> Login forms</li>
|
<li><b>Layered-PNG / Mailbox.png:</b> Mailbox</li>
|
<li><b>Layered-PNG / Sidepanel.png:</b> Sidepanel</li>
|
<li><b>Layered-PNG / UI.png:</b> Some UI elements and widgets </li>
|
|
|
</ul>
|
</div>
|
|
<div class="post" id="includes">
|
<h4>Includes</h4>
|
<h6>Css Files</h6>
|
<ul>
|
<li><b>style/root.css:</b> root of all css files</li>
|
</ul>
|
<h6>Javascript Files</h6>
|
<p>You can take a look javascript files bottom on index.html codes</p>
|
|
</div>
|
|
|
|
|
<div class="post" id="topbar">
|
<h4>Topbar '#top div'</h4>
|
Topbar comes fixed on top of page. You can change it if u dont want to.
|
Open style.css and find <code>#top</code> class.<br>
|
Change position value as absolute and it will be not fixed.
|
<br>
|
All top bar elements coded based as rgba. You can create different styles just changing #top background:
|
<h5>How to change logo ?</h5>
|
<p>Logo is inside of <code>.applogo</code> and its text. Put your project logo as image inside on it or just edit as text</p>
|
<h5>What is Sidebar or Sidepanel open buttons ?</h5>
|
<p>These buttons one of left and other is right of topbar.</p>
|
<p>Open sidebar button has 2 different type. One mobile and one desktop pc. Mobile is only can be see on mobile resolution. Actually these buttons have same style, just doing different work. Normal sidebar button is working on desktop and hide itselft on mobile. Mobile sidebar button works on mobile and hide itself on desktop resolution.</p>
|
<p></p>
|
</div>
|
|
|
<div class="post" id="css">
|
<h4>About Css</h4>
|
<h5>How to use multiple class for css ?</h5>
|
<p>Example: <br>
|
<code>div class="sidebar"</code> - just classed as sidebar<br>
|
<code>div class="sidebar leftmenu"</code> - classed as sidebar and leftmenu
|
</p>
|
<h5>What is style.less?</h5>
|
<p>Its less version of your style.css. Kode developed on less but used style.css. You can use it if you are working based on Less.</p>
|
</div>
|
|
|
<div class="post" id="sidebar">
|
<h4>Sidebar</h4>
|
<h5>How to change sidebar background?</h5>
|
<p>Sidebar background based on <code>body</code> background. Change body background. Text and icons colors coded as rgba.</p>
|
<p>Sidebar is relative on desktop mode and it hide itself on mobile<br>
|
On mobile mode sidebar position value is absolute.
|
</p>
|
<p>All sidebar menu coded as group and classed <code>.sidebar-panel</code></p>
|
</div>
|
|
|
<div class="post" id="layouts">
|
<h4>Layouts</h4>
|
<h5>Default</h5>
|
Default layouts are <code>#top</code>, <code>.sidebar</code>, <code>.footer</code> and <code>.content</code>. Also there is a <code>.sidepanel</code><br>
|
<b>#top</b> - Topbar<br>
|
<b>.sidebar</b> - Sidebar<br>
|
<b>.footer</b> - Footer<br>
|
<b>.content</b> - Content<br>
|
<b>.sidepanel</b> - Side panel right of screen.
|
<h5>Container Layouts</h5>
|
<b>.container-widget</b> - Container layout for widgets<br>
|
<b>.container-default</b> - Container default<br>
|
<b>.container-padding</b> - Container with padding.<br>
|
<b>.container-no-padding</b> - Container without padding.<br>
|
<b>.container-mail</b> - Container for mailbox.
|
|
</div>
|
|
|
|
|
<div class="post" id="grid">
|
<h4>Grid</h4>
|
<p>Kode using bootstrap grid system</p>
|
<p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
|
</p>
|
<p>Learn more about Bootstrap grid system <a href="http://getbootstrap.com/css/#grid">http://getbootstrap.com/css/#grid</a></p>
|
<div class="table-responsive">
|
<table class="table table-bordered table-striped">
|
<thead>
|
<tr>
|
<th></th>
|
<th>
|
Extra small devices
|
<small>Phones (<768px)</small>
|
</th>
|
<th>
|
Small devices
|
<small>Tablets (≥768px)</small>
|
</th>
|
<th>
|
Medium devices
|
<small>Desktops (≥992px)</small>
|
</th>
|
<th>
|
Large devices
|
<small>Desktops (≥1200px)</small>
|
</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<th class="text-nowrap" scope="row">Grid behavior</th>
|
<td>Horizontal at all times</td>
|
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
|
</tr>
|
<tr>
|
<th class="text-nowrap" scope="row">Container width</th>
|
<td>None (auto)</td>
|
<td>750px</td>
|
<td>970px</td>
|
<td>1170px</td>
|
</tr>
|
<tr>
|
<th class="text-nowrap" scope="row">Class prefix</th>
|
<td><code>.col-xs-</code></td>
|
<td><code>.col-sm-</code></td>
|
<td><code>.col-md-</code></td>
|
<td><code>.col-lg-</code></td>
|
</tr>
|
<tr>
|
<th class="text-nowrap" scope="row"># of columns</th>
|
<td colspan="4">12</td>
|
</tr>
|
<tr>
|
<th class="text-nowrap" scope="row">Column width</th>
|
<td class="text-muted">Auto</td>
|
<td>~62px</td>
|
<td>~81px</td>
|
<td>~97px</td>
|
</tr>
|
<tr>
|
<th class="text-nowrap" scope="row">Gutter width</th>
|
<td colspan="4">30px (15px on each side of a column)</td>
|
</tr>
|
<tr>
|
<th class="text-nowrap" scope="row">Nestable</th>
|
<td colspan="4">Yes</td>
|
</tr>
|
<tr>
|
<th class="text-nowrap" scope="row">Offsets</th>
|
<td colspan="4">Yes</td>
|
</tr>
|
<tr>
|
<th class="text-nowrap" scope="row">Column ordering</th>
|
<td colspan="4">Yes</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
|
|
<div class="post" id="bootstrap">
|
<h4>Based on Boostrap</h4>
|
Kode using Bootstrap. Bootstrap is most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.<br>
|
<b>Learn more about bootstrap</b><br>
|
<a href="http://getbootstrap.com/">http://getbootstrap.com</a>
|
</div>
|
|
<div class="post" id="source">
|
<h4>Source and Plugins</h4>
|
<table class="table table-hover table-striped">
|
<tbody>
|
<tr>
|
<td><b>Plugin</b></td>
|
<td><b>Website</b></td>
|
<td><b>Licence</b></td>
|
</tr>
|
</tbody>
|
<tbody>
|
<tr>
|
<td>Bootstrap Framework</td>
|
<td><a href="http://getbootstrap.com/">http://getbootstrap.com</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>jQuery JavaScript Library</td>
|
<td><a href="http://jquery.com/">http://jquery.com</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>jQuery UI</td>
|
<td><a href="https://jqueryui.com/">https://jqueryui.com</a></td>
|
<td>MIT</td>
|
</tr>
|
|
<tr>
|
<td>Font Awesome</td>
|
<td><a href="http://fortawesome.github.io/Font-Awesome/">http://fortawesome.github.io/Font-Awesome</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Awesome Bootstrap Checkbox</td>
|
<td><a href="https://github.com/flatlogic/awesome-bootstrap-checkbox/">hhttps://github.com/flatlogic/awesome-bootstrap-checkbox</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Bootstrap Select</td>
|
<td><a href="http://silviomoreto.github.io/bootstrap-select/">http://silviomoreto.github.io/bootstrap-select</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Bootstrap Toggle</td>
|
<td><a href="http://www.bootstraptoggle.com/">http://www.bootstraptoggle.com</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Bootstrap wysihtml5</td>
|
<td><a href="http://jhollingworth.github.io/bootstrap-wysihtml5/">http://jhollingworth.github.io/bootstrap-wysihtml5</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Chartist</td>
|
<td><a href="http://gionkunz.github.io/chartist-js/">http://gionkunz.github.io/chartist-js</a></td>
|
<td>WTFPL</td>
|
</tr>
|
<tr>
|
<td>Easy Pie Chart</td>
|
<td><a href="http://rendro.github.io/easy-pie-chart/">http://rendro.github.io/easy-pie-chart</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Flot</td>
|
<td><a href="http://www.flotcharts.org/">http://www.flotcharts.org</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Gmaps</td>
|
<td><a href="https://hpneo.github.io/gmaps/">https://hpneo.github.io/gmaps</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Sparklines</td>
|
<td><a href="http://omnipotent.net/jquery.sparkline">http://omnipotent.net/jquery.sparkline</a></td>
|
<td>BSD</td>
|
</tr>
|
<tr>
|
<td>Datatables</td>
|
<td><a href="http://www.datatables.net/">http://www.datatables.net</a></td>
|
<td>Multi</td>
|
</tr>
|
<tr>
|
<td>Rickshaw</td>
|
<td><a href="http://code.shutterstock.com/rickshaw/">http://code.shutterstock.com/rickshaw</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Summernote</td>
|
<td><a href="http://summernote.org/">http://summernote.org</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Sweet Alerts</td>
|
<td><a href="http://tristanedwards.me/sweetalert">http://tristanedwards.me/sweetalert</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Full Calendar</td>
|
<td><a href="http://fullcalendar.io/">http://fullcalendar.io</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Date Range Picker</td>
|
<td><a href="http://www.daterangepicker.com/">http://www.daterangepicker.com</a></td>
|
<td>MIT</td>
|
</tr>
|
<tr>
|
<td>Picjumbo (pictures)</td>
|
<td><a href="http://picjumbo.com/">http://picjumbo.com/</a></td>
|
<td>Commercial Free</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
<div class="post" id="support">
|
<h4>Support</h4>
|
<p>Contact with me for your feedbacks or questions.</p>
|
<div class="alert alert-warning" role="alert">Dont forget the add your <b>purchase code</b> when sending me e-mail.<br> <a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-can-I-find-my-Purchase-Code-">Learn how to find your purchase code</a></div>
|
<a href="http://themeforest.net/user/egemem" class="btn btn-danger">themeforest.net/user/egemem</a>
|
</div>
|
|
|
|
|
</div>
|
|
</body>
|
</html>
|
