bootstrap-drawer

<!DOCTYPE html>     <html class="no-js">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>bootstrap-drawer documentation</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="example/drawer-docs.css"> <link rel="stylesheet" type="text/css" href="example/github.css"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-59331212-1', 'auto'); ga('require', 'displayfeatures'); ga('send', 'pageview'); </script> </head> <body class="has-offcanvas"> <div id="docDrawer" class="drawer dw-xs-10 dw-sm-6 dw-md-5 fold in" aria-labelledby="docDrawer"> <div class="drawer-controls"> <a href="#docDrawer" data-toggle="drawer" href="#docDrawer" aria-foldedopen="false" aria-controls="docDrawer" class="btn btn-default"><i class="fa fa-align-justify"></i></a> </div> <div class="drawer-contents"> <div class="drawer-heading"> <h2 class="drawer-title"><strong>bootstrap-drawer</strong></h2> </div> <div class="drawer-body"> <iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20px"></iframe>  <iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="100" height="20px"></iframe> </div> <div class="drawer-heading"> <h3 class="drawer-title">Basics</h2> </div> <ul id="doc-nav" class="drawer-fullnav"> <li role="presentation"><a href="index.html">Home / Basic Usage</a></li> <li role="presentation"><a href="customize.html">Position / Colors</a></li> <li role="presentation"><a href="javascript.html">data-toggle / Javascript</a></li> <li role="presentation"><a href="less.html">Using Less</a></li> </ul> <div class="drawer-heading"> <h3 class="drawer-title">Other Links</h2> </div> <ul class="drawer-fullnav"> <li role="presentation"><a href="http://github.com/clineamb/bootstrap-drawer" target="_blank"><i class="fa fa-github-alt"></i>  GitHub Repo</a></li> <li role="presentation"><a href="http://www.npmjs.com/package/bootstrap-drawer" target="_blank"><i class="fa fa-share-square"></i> npm</a></li> <li role="presentation"><a href="http://twitter.com/clineamb" target="_blank"><i class="fa fa-twitter"></i> @clineamb</a></li> <li><a name=""><iframe src="https://ghbtns.com/github-btn.html?user=clineamb&type=follow&count=true" frameborder="0" scrolling="0" width="100%" height="20px"></iframe></a></li> </ul> <div class="drawer-footer"> <small>© 2015 Caroline Amaba</small> </div> </div> </div> <div id="drawer-docs"> <div class="jumbotron page-topper"> <div class="container"> <h1>bootstrap-drawer</h1> <h4>bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!</h4> </div> </div> <div id="drawer-docs-content" class="container"> <h2 id="less-custom-builds">LESS / Custom Builds</h2> <p>If you're familiar with <a href="http://lesscss.org" target="_blank">LESS</a>, bootstrap-drawer has less files that you can use to either build your own custom bootstrap-drawer or directly incoroprate with other LESS files in your project.</p> <p>bootstrap-drawer currently uses Gulp and LESS, but it'd be great if people can contribute grunt and SASS components! <a href="http://github.com/clineamb/bootstrap-drawer" target="_blank">Check out the repo to contribute</a>!</p> <hr> <h3 id="building-your-own-flavor-of-drawer">Building Your Own Flavor of Drawer</h3> <p>You'll need <a href="http://gulpjs.com" target="_blank">gulp</a> and <a href="http://nodejs.org" target="_blank">Node</a> if you want to build your own version.</p> <p>Run <code>npm install</code> in order to get all the devDependencies from the <code>package.json</code>.</p> <p>Most of the tasks are outlined in <code>gulpfile.js</code>. The <code>gulp build</code> will also update the assets for <code>example/index.html</code> so you can see your changes.</p> <p>To customize bootstrap-drawer, just edit some of the variables in <code>less/drawer-variables.less</code> to the sizes and colors, etc. you want. Then run <code>gulp build</code> and a new <code>dist/css/bootstrap-drawer(.min).css</code> should be made just for you! Include the file right after the Bootstrap core file, and you should be good to go! </p> <p>Things to keep in mind:</p> <ul> <li>bootstrap-drawer uses some variables (<code>@grid-gutter-width</code>, <code>@zindex-navbar-fixed</code>, <code>@link-color</code>, to name most of them), so if you're using a different <code>varibles.less file</code>, be sure to replace it in <code>less/bootstrap-drawer.less</code>.</li> <li>The <code>.dw-SIZE-#</code> columns are built in LESS loops, and can change as you change the <code>@grid-columns</code> variable. If you're using 16-columns instead of 12, <code>less/mixins/drawer-framework.less</code> is built to build more columns (like <code>.dw-md-13</code>, etc.).</li> </ul> <hr> <h3 id="using-less">Using Less</h3> <p>I am assuming for this section you are familiar with using less and the Bootstrap less source. There are files in the <code>less/</code> directory that are parallel to Bootstrap's less source files. <code>drawer.less</code> already includes its custom variable package as well as less loop framework. To include the less in your build files, you can do one of the following:</p> <h4 id="add-to-your-main-less-file-after-bootstrap">Add to your main less file after bootstrap</h4> <pre><code class="lang-less"> @import "bootstrap.less"; @import "path/to/drawer.less"; /* Your styles */ </code></pre> <h4 id="add-to-bootstrap-less">Add to bootstrap.less</h4> <pre><code class="lang-less"> @import "variables.less"; @import "mixins.less"; // Bootstrap Core // ... // ... etc ... // Components w/ JavaScript @import "modals.less"; @import "tooltip.less"; @import "popovers.less"; @import "carousel.less"; @import "path/to/drawer.less"; // Utility Classes // ... etc ... </code></pre> <h4 id="move-contents">Move Contents</h4> <p>The first two lines in <code>less/drawer.less</code> can be removed and moved</p> <p>Feel free to move <code>drawer-variables.less</code> and <code>drawer-framework.less</code> to appropriate folders to maintain bootstrap structure. The component's variables rely on a few variables from the core bootstrap framework, likewise for the mixin framework. Be sure to simply include them after the bootstrap core variables/mixins files:</p> <ul> <li><code>@import "./drawer-variables";</code> can be put after importing <code>variables.less</code></li> <li><code>@import "./mixins/drawer-framework";</code> can be put after importing <code>mixins.less</code></li> </ul> <pre><code class="lang-less"> @import "variables.less"; @import "path/to/drawer-variables.less" @import "mixins.less"; @import "path/to/drawer-framework.less"; // Bootstrap Core // ... // ... etc ... // Components w/ JavaScript @import "modals.less"; @import "tooltip.less"; @import "popovers.less"; @import "carousel.less"; @import "path/to/drawer.less"; // Utility Classes // ... etc ... </code></pre> <div id="drawer-docs-footer"> <a href="#docDrawer" data-toggle="drawer" class="btn btn-lg btn-block btn-primary">Open the Drawer</a> </div> </div> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="example/bootstrap.min.js"></script> <script src="example/highlight.pack.js"></script> <script src="dist/js/drawer.js"></script> <script src="example/docs.js"></script> </body> </html>