--- /dev/null
+<section id="layout">
+ <h2 class="page-header"><a href="#layout">Layout</a></h2>
+ <p class="lead">The layout consists of four major parts:</p>
+ <ul>
+ <li>Wrapper <code>.wrapper</code>. A div that wraps the whole site.</li>
+ <li>Main Header <code>.main-header</code>. Contains the logo and navbar.</li>
+ <li>Sidebar <code>.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li>
+ <li>Content <code>.content-wrapper</code>. Contains the page header and content.</li>
+ </ul>
+ <div class="callout callout-danger lead">
+ <h4>Tip!</h4>
+ <p>The <a href="../starter.html">starter page</a> is a good place to start building your app if you'd like to start from scratch.</p>
+ </div>
+
+ <h3>Layout Options</h3>
+ <p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added
+ to the body tag to get the desired goal.</p>
+ <ul>
+ <li><b>Fixed:</b> use the class <code>.fixed</code> to get a fixed header and sidebar.</li>
+ <li><b>Collapsed Sidebar:</b> use the class <code>.sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
+ <li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to 1250px.</li>
+ <li><b>Top Navigation</b> use the class <code>.layout-top-nav</code> to remove the sidebar and have your links at the top navbar.</li>
+ </ul>
+ <p><b>Note:</b> you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.</p>
+
+ <h3>Skins</h3>
+ <p class="lead">Skins can be found in the dist/css/skins folder.
+ Choose and the skin file that you want then add the appropriate
+ class to the body tag to change the template's appearance. Here is the list of available skins:</p>
+ <div class="box box-solid" style="max-width: 300px;">
+ <div class="box-body no-padding">
+ <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
+ <thead>
+ <tr>
+ <th style="width: 210px;">Skin Class</th>
+ <th>Preview</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>skin-blue</code></td>
+ <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-blue-light</code></td>
+ <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-yellow</code></td>
+ <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-yellow-light</code></td>
+ <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-green</code></td>
+ <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-green-light</code></td>
+ <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-purple</code></td>
+ <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-purple-light</code></td>
+ <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-red</code></td>
+ <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-red-light</code></td>
+ <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-black</code></td>
+ <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ <tr>
+ <td><code>skin-black-light</code></td>
+ <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- /.box-body -->
+ </div><!-- /.box -->
+</section>