scale-dashboard

<!DOCTYPE html> <html lang="en" class="app"> <head> <meta charset="utf-8" /> <title>Scale | Web Application</title> <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <link rel="stylesheet" href="css/bootstrap.css" type="text/css" /> <link rel="stylesheet" href="css/animate.css" type="text/css" /> <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" /> <link rel="stylesheet" href="css/icon.css" type="text/css" /> <link rel="stylesheet" href="css/font.css" type="text/css" /> <link rel="stylesheet" href="css/app.css" type="text/css" />  </head> <body class=""> <section class="hbox stretch">  <aside class="bg-light aside b-r animated fadeInLeftBig"> <section class="vbox"> <header class="header b-b navbar"> <a class="btn btn-link pull-right visible-xs" data-toggle="class:show" data-target=".nav-primary"> <i class="fa fa-bars"></i> </a> <a href="index.html" class="navbar-brand">Documents</a> </header> <section class="scrollable"> <nav class="nav-primary hidden-xs nav-docs"> <ul class="nav"> <li class="dropdown-header b-b b-light"><em>CSS</em></li> <li><a href="#icons">Icons</a></li> <li><a href="#animate">Animate</a></li> <li><a href="#colors">Colors</a></li> <li><a href="#layout">Layout</a></li> <li><a href="#offscreen">Off screen</a></li> <li><a href="#utilities">Utilities</a></li> <li class="dropdown-header b-b b-light"><em>Components</em></li> <li><a href="#toggle-class">Toggle class</a></li> <li><a href="#shift">Shift</a></li> <li><a href="#button-state">Button state</a></li> <li><a href="#dropdown-select">Dropdown select</a></li> <li class="dropdown-header b-b b-light"><em>Plugins</em></li> <li><a href="#plugins">Plugins docs</a></li> </ul> </nav> </section> </section> </aside>  <section id="content"> <section class="vbox"> <section class="scrollable bg-light lter" data-spy="scroll" data-target=".nav-primary"> <section id="docs"> <div class="clearfix padder"> <h3>Overview</h3> <h5 class="m-t-lg">A fully responsive web app / admin dashboard template.</h5> <h4>Features:</h4> <ul> <li>Built with Bootstrap 3</li> <li>Flat ui with clean style</li> <li>Many components</li> <li>Mobile widgets</li> <li>Fully responsive</li> <li>Web app layouts</li> <li>Html5 Markup & CSS3</li> </ul> <h3 class="text-success">CSS <small>Extensible classes</small></h3> <div class="line"></div> <p id="bootstrap">For the bootstrap css and components, please check the <strong><a href="http://getbootstrap.com">Bootstrap 3.0</a></strong></p> <h4 id="icons" class="m-t-lg">LESS</h4> <p>This file's css is generated by LESS files. you can use the less.php to output the css. There are many Variables, Mixins you can use.</p> <h4 id="icons" class="m-t-lg">Icons</h4> <p>Use FontAwesome font icons, over 369 icons with version 4.0 and more will be added in the future, check <strong><a href="http://fortawesome.github.io/Font-Awesome/">FontAwesome</a></strong> for more details to see how to use and examples</p> <h4 id="animate" class="m-t-lg">Animate.css</h4> <p><a href="http://daneden.me/animate/"><strong>animate.css</strong></a> is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. do not use animate css to an element which contains the dropdown-menu, it will cut the edge.</p> <p><strong>animate.css on landing page</strong>: you can add animate css on the dom element when it appear in the viewpoint. <code><div data-ride="animated" data-animation="fadeInUp" data-delay="250"></div></code></p> <h4 id="colors" class="m-t-lg">Colors <small>use less file to build your colors</small></h4> <p>8 default color palettes, build colorful widgets. you can open the less/app.variables.less to config your own colors(<code>@brand-primary, @brand-success, @brand-warning, @brand-danger, @brand-info, @brand-black, @brand-dark, @brand-light</code>). </p> <p>You can use the mixin wariant. use <code>.color-variant</code> and <code>.font-variant</code> to build the color scheme, check more details in the less/app.colors.less.</p> <div class="row"> <div class="col-sm-3"> <p>.bg-light</p> <div class="bg-light"> <h5 class="dker m-n wrapper">.dker</h5> <h5 class="dk m-n wrapper">.dk</h5> <h5 class=" m-n wrapper">.bg-light</h5> <h5 class="lt m-n wrapper">.lt</h5> <h5 class="lter m-n wrapper">.lter</h5> </div> </div> <div class="col-sm-3"> <p>.bg-dark</p> <div class="bg-dark"> <h5 class="dker m-n wrapper">.dker</h5> <h5 class="dk m-n wrapper">.dk</h5> <h5 class=" m-n wrapper">.bg-dark</h5> <h5 class="lt m-n wrapper">.lt</h5> <h5 class="lter m-n wrapper">.lter</h5> </div> </div> <div class="col-sm-3"> <p>.bg-black</p> <div class="bg-black"> <h5 class="dker m-n wrapper">.dker</h5> <h5 class="dk m-n wrapper">.dk</h5> <h5 class=" m-n wrapper">.bg-black</h5> <h5 class="lt m-n wrapper">.lt</h5> <h5 class="lter m-n wrapper">.lter</h5> </div> </div> <div class="col-sm-3"> <p>.bg-primary</p> <div class="bg-primary"> <h5 class="dker m-n wrapper">.dker</h5> <h5 class="dk m-n wrapper">.dk</h5> <h5 class=" m-n wrapper">.bg-primary</h5> <h5 class="lt m-n wrapper">.lt</h5> <h5 class="lter m-n wrapper">.lter</h5> </div> </div> </div> <div class="row m-t-sm"> <div class="col-sm-3"> <p>.bg-success</p> <div class="bg-success"> <h5 class="dker m-n wrapper">.dker</h5> <h5 class="dk m-n wrapper">.dk</h5> <h5 class=" m-n wrapper">.bg-success</h5> <h5 class="lt m-n wrapper">.lt</h5> <h5 class="lter m-n wrapper">.lter</h5> </div> </div> <div class="col-sm-3"> <p>.bg-info</p> <div class="bg-info"> <h5 class="dker m-n wrapper">.dker</h5> <h5 class="dk m-n wrapper">.dk</h5> <h5 class=" m-n wrapper">.bg-info</h5> <h5 class="lt m-n wrapper">.lt</h5> <h5 class="lter m-n wrapper">.lter</h5> </div> </div> <div class="col-sm-3"> <p>.bg-warning</p> <div class="bg-warning"> <h5 class="dker m-n wrapper">.dker</h5> <h5 class="dk m-n wrapper">.dk</h5> <h5 class=" m-n wrapper">.bg-warning</h5> <h5 class="lt m-n wrapper">.lt</h5> <h5 class="lter m-n wrapper">.lter</h5> </div> </div> <div class="col-sm-3"> <p>.bg-danger</p> <div class="bg-danger"> <h5 class="dker m-n wrapper">.dker</h5> <h5 class="dk m-n wrapper">.dk</h5> <h5 class=" m-n wrapper">.bg-danger</h5> <h5 class="lt m-n wrapper">.lt</h5> <h5 class="lter m-n wrapper">.lter</h5> </div> </div> </div> <h4 id="layout" class="m-t-lg">Layout</h4> <p>use .vbox(vertical box) and .hbox(horizontal box) to build the web application layout. you can build the complicated layout as you want.</p> <h5><strong>hbox</strong></h5> <p>hbox is a horizontal wrapper that you can put columns in it. you can put <code><aside></code> and <code><section></code> in it. </p> <pre><code class="html"><section class="hbox"><aside class="aside-lg"></aside><section></section></section></code></pre> <p>you can use <code>.aside, .aside-sm, .aside-md, .aside-lg</code> to set the width of an aside wrapper. also you can use the Bootstrap grid system, like <code>.col-6, .col-7</code>...</p> <p>.stretch box has the 100% height. <code><section class="hbox stretch"></section></code></p> <h5><strong>vbox</strong></h5> <p>vbox is a vertical wrapper that you can put the row in it. </p> <pre><code class="html"><section class="vbox"><header class="header"></header><section class="w-f"></section><footer class="footer"></footer></section></code></pre> <p>.w-f means this vbox have a footer</p> <p>.flex vbox let you put a flex height of the header/footer.</p> <pre><code class="html"><section class="vbox flex"><header></header><section><section><section></section></section></section><footer></footer></section></code></pre> <h5><strong>Example</strong></h5> <div class="row"> <div class="col-sm-6"> <p>.hbox</p> <div style="height:250px"> <div class="app"> <section class="hbox stretch bg-light"> <aside class="lt">aside</aside> <section>section</section> <aside class="dk">aside</aside> </section> </div> </div> </div> <div class="col-sm-6"> <p>.vbox</p> <div style="height:250px"> <div class="app"> <section class="vbox bg-light"> <header class="header lt"><span class="pull-in">header</span></header> <footer class="footer dk"><span class="pull-in">footer</span></footer> <section>section</section> </section> </div> </div> </div> </div> <h5><strong>Application layout</strong></h5> <p>you can use the .app on the html tag to build the app layout <code><html class="app"></html></code></p> <h4 id="offscreen" class="m-t-lg">Off screen nav</h4> <p>Support three nav styles on mobile, "Pull down", "push left", "push right"</p> <h5><strong>Pull down</strong></h5> <p>use <code>data-toggle="class:show" data-target=".nav-primary"</code> to trigger the nav pull down in the header</p> <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:show" data-target=".nav-primary"> <i class="icon-reorder"></i> </a></code></pre> <h5><strong>off screen push left</strong></h5> <p>use <code>data-toggle="class:nav-off-screen" data-target="#nav"</code> to trigger the off screen nav</p> <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav"> <i class="icon-reorder"></i> </a></code></pre> <p>use <code>data-toggle="class:nav-off-screen" data-target="#nav"</code> to toggle back in the body</p> <pre><code class="html"><a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a></code></pre> <h5><strong>off screen push right</strong></h5> <p>use <code>data-toggle="class:nav-off-screen push-right" data-target="body"</code></p> <pre><code class="html"><a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen push-right" data-target="body"> <i class="icon-reorder"></i> </a></code></pre> <h3 id="utilities" class="text-danger">CSS Utilities</h3> <table class="table table-border"> <tbody> <tr class="bg-light"> <td colspan="2">Button size <em>(Specific button size)</em></td> </tr> <tr> <td>.btn-s-xs</td> <td>width:90px</td> </tr> <tr> <td>.btn-s-sm</td> <td>width:100px</td> </tr> <tr> <td>.btn-s-md</td> <td>width:120px</td> </tr> <tr> <td>.btn-s-lg</td> <td>width:150px</td> </tr> <tr> <td>.btn-s-xl</td> <td>width:200px</td> </tr> <tr class="bg-light"> <td colspan="2">Vertical align <em>(When you use the .hbox you can use these classes on the aside)</em></td> </tr> <tr> <td>.v-middle</td> <td>vertical align: middle</td> </tr> <tr> <td>.v-top</td> <td>vertical align: top</td> </tr> <tr> <td>.v-bottom</td> <td>vertical align: bottom</td> </tr> <tr class="bg-light"> <td colspan="2">Margin</td> </tr> <tr> <td>.m</td> <td>margin: 15px</td> </tr> <tr> <td>.m-xs</td> <td>margin: 5px</td> </tr> <tr> <td>.m-sm</td> <td>margin: 10px</td> </tr> <tr> <td>.m-md</td> <td>margin: 20px</td> </tr> <tr> <td>.m-lg</td> <td>margin: 30px</td> </tr> <tr> <td>.m-n</td> <td>margin: 0px</td> </tr> <tr> <td>.m-l</td> <td>margin-left: 15px</td> </tr> <tr> <td>.m-l-xs</td> <td>margin-left: 5px</td> </tr> <tr> <td>.m-l-sm</td> <td>margin-left: 10px</td> </tr> <tr> <td>.m-l-md</td> <td>margin-left: 20px</td> </tr> <tr> <td>.m-l-lg</td> <td>margin-left: 30px</td> </tr> <tr> <td>.m-l-xl</td> <td>margin-left: 40px</td> </tr> <tr> <td>.m-l-none</td> <td>margin-left: 0px</td> </tr> <tr> <td>.m-l-n</td> <td>margin-left: -15px</td> </tr> <tr> <td>.m-l-n-xxs</td> <td>margin-left: -1px</td> </tr> <tr> <td>.m-l-n-xs</td> <td>margin-left: -5px</td> </tr> <tr> <td>.m-l-n-sm</td> <td>margin-left: -10px</td> </tr> <tr> <td>.m-l-n-md</td> <td>margin-left: -20px</td> </tr> <tr> <td>.m-l-n-lg</td> <td>margin-left: -30px</td> </tr> <tr> <td>.m-l-n-xl</td> <td>margin-left: -40px</td> </tr> <tr> <td colspan="2">.m-r <em>(margin right)</em> , m-t <em>(margin top)</em> , m-b <em>(margin bottom)</em> have the same classes as the .m-l.</td> </tr> <tr class="bg-light"> <td colspan="2">Border</td> </tr> <tr> <td>.b-a</td> <td>border:1px solid @border-color(see app.variables.less)</td> </tr> <tr> <td>.b-l</td> <td>border left</td> </tr> <tr> <td>.b-t</td> <td>border top</td> </tr> <tr> <td>.b-r</td> <td>border right</td> </tr> <tr> <td>.b-b</td> <td>border bottom</td> </tr> <tr> <td>.b-light, .b-dark, .b-primary, .b-success, .b-info, .b-warning, .b-danger, .b-black, .b-white</td> <td>border with specific color.</td> </tr> <tr> <td>.b-2x</td> <td>border width with 2px</td> </tr> <tr> <td>.b-3x</td> <td>border width with 3px</td> </tr> <tr class="bg-light"> <td colspan="2">Radius</td> </tr> <tr> <td>.r</td> <td>border-radius: @border-radius-base</td> </tr> <tr> <td>.r-l</td> <td>border-radius: @border-radius-base 0 0 @border-radius-base</td> </tr> <tr> <td>.r-r</td> <td>border-radius: 0 @border-radius-base @border-radius-base 0</td> </tr> <tr> <td>.r-t</td> <td>border-radius: @border-radius-base @border-radius-base 0 0</td> </tr> <tr> <td>.r-b</td> <td>border-radius: 0 0 @border-radius-base @border-radius-base</td> </tr> <tr class="bg-light"> <td colspan="2">Others</td> </tr> <tr> <td>.padder</td> <td>padding-left:15px; padding-right:15px</td> </tr> <tr> <td>.padder-v</td> <td>padding-top:15px; padding-bottom:15px</td> </tr> <tr> <td>.wrapper</td> <td>padding:15px</td> </tr> <tr> <td>.text-uc</td> <td>text uppercase</td> </tr> <tr> <td>.text-lt</td> <td>text line through</td> </tr> <tr> <td>.text-ul</td> <td>text under line</td> </tr> </tbody> </table> <h3 class="text-info">Components <small>Lightweight components to best practice on mobile</small></h3> <div class="line"></div> <h4 id="toggle-class">Toggle class</h4> <p>It's easy to change a dom class by click on another dom element.</p> <h5><strong>Usage</strong></h5> <p> Add <code>data-toggle="class:className"</code> and <code>data-target="#target"</code> to a link or button to toggle a class. </p> <h5><strong>Example</strong></h5> <a href="#" class="btn btn-default m-b" data-toggle="class:btn-* btn-success"> Toggle the background </a> <pre><code class="html"><button class="btn btn-default" data-toggle="class:btn-success" data-target="#btn"> Toggle the background </button></code></pre> <h4 id="shift" class="m-t-lg">Shift</h4> <p>Shift js let you change the dom which have different position from mobile to desktop, it avoid to use duplicate elements.</p> <div id="shift-target"><strong>Usage</strong></div> <p> Add <code>data-toggle="shift:insertBefore"</code> and <code>data-target="#target"</code> to the dom that you want to shift. </p> <div class="panel shift b-light" data-toggle="shift:insertBefore" data-target="#shift-target"><div class="panel-body">Put me before "Usage" on mobile</div></div> <pre><code class="html"><div class="shift" data-toggle="shift:insertBefore" data-target="#shift-target"> Put me before "Usage" on mobile </div></code></pre> <p>it also support <code>data-toggle="shift:appendTo"</code>, <code>data-toggle="shift:prependTo"</code>, <code>data-toggle="shift:insertAfter"</code></p> <h4 id="button-state" class="m-t-lg">Button state</h4> <p>Change the button state when click on it. add <code>.text</code> <code>.text-active</code></p> <h5><strong>Example</strong></h5> <button class="btn btn-default m-b" data-toggle="button"> <span class="text">More</span> <span class="text-active">Less</span> </button> <pre><code class="html"><button class="btn btn-default" data-toggle="button"> <span class="text">More</span> <span class="text-active">Less</span> </button></code></pre> <h5><strong>With icons</strong></h5> <button class="btn btn-default m-b" data-toggle="button"> <span class="text"> <i class="fa fa-thumbs-up text-success"></i> 25 </span> <span class="text-active"> <i class="fa fa-thumbs-down text-danger"></i> 10 </span> </button> <pre><code class="html"><button class="btn btn-default" data-toggle="button"> <span class="text"> <i class="fa fa-thumbs-up text-success"></i> 25 </span> <span class="text-active"> <i class="fa fa-thumbs-down text-danger"></i> 10 </span> </button></code></pre> <h4 id="dropdown-select" class="m-t-lg">Dropdown select</h4> <p>Support radio and checkbox dropdown select</p> <h5><strong>Usage</strong></h5> <p>add <code>.dropdown-menu</code> class on dropdown-menu.</p> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle"> <span class="dropdown-label">Option1</span> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-select"> <li class="active"><a href="#"><input type="radio" name="d-s-r" checked="">Option1</a></li> <li><a href="#"><input type="radio" name="d-s-r">Option2</a></li> <li><a href="#"><input type="radio" name="d-s-r">Option3</a></li> <li class="disabled"><a href="#"><input type="radio" name="d-s-r" disabled="">I'm disabled</a></li> </ul> </div> <pre class="m-t"><code class="html"><div class="btn-group"> <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle"> <span class="dropdown-label">Option1</span> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-select"> <li class="active"><a href="#"><input type="radio" name="d-s-r" checked="">Option1</a></li> <li><a href="#"><input type="radio" name="d-s-r">Option2</a></li> <li><a href="#"><input type="radio" name="d-s-r">Option3</a></li> <li class="disabled"><a href="#"><input type="radio" name="d-s-r" disabled="">I'm disabled</a></li> </ul> </div> </code></pre> <div class="btn-group"> <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle"> <span class="dropdown-label" data-placeholder="Please select">Please select</span> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-select"> <li><a href="#"><input type="checkbox" name="d-s-c-1">Option1</a></li> <li><a href="#"><input type="checkbox" name="d-s-c-2">Option2</a></li> <li><a href="#"><input type="checkbox" name="d-s-c-3">Option3</a></li> <li><a href="#"><input type="checkbox" name="d-s-c-4">Option4</a></li> <li><a href="#"><input type="checkbox" name="d-s-c-5">Option5</a></li> </ul> </div> <pre class="m-t"><code class="html"><div class="btn-group"> <button data-toggle="dropdown" class="btn btn-sm btn-default dropdown-toggle"> <span class="dropdown-label" data-placeholder="Please select">Please select</span> <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-select"> <li><a href="#"><input type="checkbox" name="d-s-c-1">Option1</a></li> <li><a href="#"><input type="checkbox" name="d-s-c-2">Option2</a></li> <li><a href="#"><input type="checkbox" name="d-s-c-3">Option3</a></li> <li><a href="#"><input type="checkbox" name="d-s-c-4">Option4</a></li> <li><a href="#"><input type="checkbox" name="d-s-c-5">Option5</a></li> </ul> </div> </code></pre> <h3 class="text-info" id="plugins">Plugins</h3> <div class="line"></div> <div class="row"> <div class="col-md-6"> <h4 class="m-t-lg">Fullcalendar</h4> <p>Check the online <a href="http://arshaw.com/fullcalendar/"><strong>document</strong></a> <h4 class="m-t-lg">Calendar</h4> <p>Check the online <a href="https://github.com/xero/bootstrap_calendar"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Datatables</h4> <p>Check the online <a href="http://datatables.net/"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Google map</h4> <p>Check the online <a href="http://hpneo.github.com/gmaps/"><strong>document</strong></a>. </p> <h4 class="m-t-lg">JvectorMap</h4> <p>Check the online <a href="http://jvectormap.com/"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Markdown</h4> <p>Check the online <a href="https://github.com/OscarGodson/EpicEditor"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Nestable</h4> <p>Check the online <a href="http://dbushell.github.io/Nestable/"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Slider</h4> <p>Check the online <a href="http://www.eyecon.ro/bootstrap-slider"><strong>document</strong></a>. </p> <h4 class="m-t-lg">WYSISYG</h4> <p>Check the online <a href="http://github.com/mindmup/bootstrap-wysiwyg"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Wizard</h4> <p>Check the online <a href="https://github.com/VinceG/twitter-bootstrap-wizard"><strong>document</strong></a>. </p> </div> <div class="col-md-6"> <h4 class="m-t-lg">Sortable</h4> <p>Check the online <a href="http://farhadi.ir/projects/html5sortable"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Flotchart</h4> <p>Check the online <a href="http://www.flotcharts.org/"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Sparklines</h4> <p>Check the online <a href="http://omnipotent.net/jquery.sparkline"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Easy pie chart</h4> <p>Check the online <a href="http://rendro.github.io/easy-pie-chart"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Parsley</h4> <p>Check the online <a href="http://parsleyjs.org/"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Chosen</h4> <p>Check the online <a href="http://github.com/harvesthq/chosen"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Datepicker</h4> <p>Check the online <a href="http://www.eyecon.ro/bootstrap-datepicker"><strong>document</strong></a>. </p> <h4 class="m-t-lg">File-input</h4> <p>Check the online <a href="http://dev.tudosobreweb.com.br/bootstrap-filestyle/"><strong>document</strong></a>. </p> <h4 class="m-t-lg">Intro</h4> <p>Check the online <a href="https://github.com/usablica/intro.js"><strong>document</strong></a>. </p> </div> </div> <h4 class="m-t-lg">Cross browser compatibility</h4> <p>Use response.js to support IE8 media queries and html5.js to support html5 markups.</p> <pre><code class="html"></code></pre> </div> </section> </section> </section> </section> </section> <script src="js/jquery.min.js"></script>  <script src="js/bootstrap.js"></script>  <script src="js/app.js"></script> <script src="js/slimscroll/jquery.slimscroll.min.js"></script> <script src="js/app.plugin.js"></script> </body> </html>