Skip to content

Commit

Permalink
finish docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@clineamb
clineamb committed Feb 3, 2015
1 parent 84ea604 commit b034dd9
Show file tree
Hide file tree
Showing 27 changed files with 2,561 additions and 274 deletions.
204 changes: 204 additions & 0 deletions _index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<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/prettify/prettify.css">
<link rel="stylesheet" type="text/css" href="example/drawer-docs.css">
</head>
<body class="has-offcanvas">
<div id="docDrawer" class="drawer dw-xs-10 dw-sm-4 dw-md-3 fold in open" aria-labelledby="docDrawer">
<div class="drawer-controls">
<a href="#docDrawer" data-toggle="drawer" href="#docDrawer" aria-foldedopen="true" 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>&nbsp;
<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#top">Home / Basic Usage</a></li>
<li role="presentation"><a href="index.html#options">Position / Colors</a></li>
<li role="presentation"><a href="index.html#javascript">data-toggle / Javascript</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>&nbsp; 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>&nbsp;npm</a></li>
<li role="presentation"><a href="http://twitter.com/clineamb" target="_blank"><i class="fa fa-twitter"></i>&nbsp;@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>&copy; Caroline Amaba</small>
</div>
</div>
</div>
<div id="drawer-docs" data-page="index.html">
<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!</h4>
</div>
</div>
<div class="container">
<h2><strong>Note: This documentation is still a work in progress. You can check out what's here, but also make sure you read the <a href="http://github.com/clineamb/bootstrap-drawer/blob/master/readme.md" target="_blank">Readme.md</a> in the repo! Thanks!</strong></h2>

<div class="page-header">
<h2>What is it?</h2><a name="top"></a>
</div>
<p><a href="http://clineamb.github.io/bootstrap-drawer#">bootstrap-drawer</a> is a Bootstrap add-on/plugin that, in Bootstrap style, adds an "off-canvas" element to your pages and containers. We call it a "drawer" in these parts.*</p>
<p>I've looked around for fast-and-easy ways of implementing this constantly (and consistently), and I've had to rebuild it a few times. Tired of doing this, I created this! I imagine there's a lot of people like me looking for something like this, especially one that easily works with their front-end framework of choice, <a href="http://getbootstrap.com/" target="_blank">Bootstrap.</a></p>
<p><small>* Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer".</small></p>

<div class="page-header">
<h2>Basic Usage <small>ie, the tl;dr <a href="http://github.com/clineamb/bootstrap-drawer/blob/master/readme.md" target="_blank">Readme.md</a></small></h2>
</div>

<h3>Requirements</h3>

<p><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> is required for this plugin, since bootstrap-drawer built on top of the framework and, thus, <a href="http://jquery.com" target="_blank">jQuery</a> is also required.</p>

<h3>Download</h3>
<p>
<code>bower install bootstrap-drawer</code> or
<code>npm install bootstrap-drawer</code>
</p>
<p>You can also find all the releases on the <a href="https://github.com/clineamb/bootstrap-drawer/releases" target="_blank">Github page.</a> For your convenience, here are some links to the latest releases.</p>
<p>
<a href="http://github.com/clineamb/bootstrap-drawer/releases/tag/1.0.0" target="_blank" class="btn btn-lg btn-primary"><i class="fa fa-github-alt"></i> Download Version 1.0.0</a>
<a href="http://github.com/clineamb/bootstrap-drawer/archive/1.0.0.zip" target="_blank" class="btn btn-lg btn-primary"><i class="fa fa-archive"></i> Get the bootstrap-drawer-1.0.0.zip</a>
</p>

<h3>Basic Setup</h3>

<p>If you simply just want to quickly use bootstrap-drawer with Bootstrap, you just need to include <code>dist/bootstrap-drawer.css</code> after Bootstrap, and then include any other files after that.</p>

<p>The accomanying <code>drawer.js</code> requires Bootstrap's core <code>transitions.js</code> at least (which all come after jQuery). Whether you're just including the separate Javascript components or the entire <code>bootstrap.js</code>, <code>drawer.js</code> needs to come after either/both.</p>
<pre class="prettyprint">
&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="bootstrap.min.css"&gt;
&lt;link rel="stylesheet" type="text/css" href="bootstrap-drawer.min.css"&gt;
&lt;link rel="stylesheet" type="text/css" href="YOUR_OTHER_STYLES.css"&gt;
&lt;/head&gt;
&lt;body class="has-canvas"&gt;
&lt;!-- Off Canvas & other HTML here --&gt;
&lt;script src="jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="drawer.min.js"&gt;&lt;/script&gt;
&lt;script src="YOUR_CUSTOM_JS.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h3>Basic Usage</h3>

<p>To get a simple drawer like the one on this page:</p>
<pre class="prettyprint">
&lt;body class="has-drawer"&gt; &lt;!-- add this class to your body for proper sizing --&gt;
&lt;div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample"&gt;
&lt;div class="drawer-controls"&gt;
&lt;a href="#drawerExample" data-toggle="drawer" href="#drawerExample" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm"&gt;Menu&lt;/a&gt;
&lt;/div&gt;
&lt;div class="drawer-contents"&gt;
&lt;div class="drawer-heading"&gt;
&lt;h2 class="drawer-title"&gt;Menu&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="drawer-body"&gt;
&lt;p&gt;
This is a properly padded container for content in the
drawer that isn't a navigation.
&lt;/p&gt;
&lt;a href="#"&gt;A Regular Link&lt;/a&gt;
&lt;/div&gt;
&lt;ul class="drawer-nav"&gt;
&lt;li role="presentation" class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li role="presentation"&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
&lt;li role="presentation"&gt;&lt;a href="#"&gt;Messages&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="drawer-footer"&gt;
&lt;small&gt;&copy; Caroline Amaba&lt;/small&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
&lt;!-- content as per usual --&gt;
&lt;/div&gt;
&lt;/body&gt;
</pre>

<p>bootstrap-drawer was built with a bootstrap-minded style, based on the already built <code>.nav</code> or <code>.panel</code> classes.</p>

<ul>
<li>
<code>.drawer</code> is the main class. It has a similar sizing system, based on the 12-column system of bootstrap, using <code>.dw-SIZE-#COLS</code>. The drawer is built mobile-first, like the rest of Bootstrap, and the size in width is based on the document's fluid width (a percentage of it, based on the columns).
</li>
<li>
<code>.fold</code> starts the menu closed (<code>.fold.open</code> for an opened drawer). This class, as well as its <a href="#javascript">Javascript component</a> are built similarly to the <code>.collapse</code> components. It had to be named differently because bootstrap-drawer is folding horizontally and not collapsing veritcally.
</li>
<li>
<code>.drawer-controls</code> is a special drawer column made to house a toggle button for the drawer that moves with the component. It's an optional piece, since the menu can be toggled by other buttons either using the built-in <code>data-toggle="drawer"</code> or the jQuery API (<code>$('.drawer').drawer();</code>).
</li>
<li>
<code>.drawer-contents</code> holds the innards of your drawer menu:

<ul>
<li>
<code>.drawer-heading</code> is the title section of the menu.
</li>
<li>
<code>.drawer-body</code> contains non-menu/nav text that you may want to include in your drawer.
</li>
<li>
<code>.drawer-nav</code> or <code>.drawer-fullnav</code> are built-in stacked-pill/full-width style navigations that are made to play nice with the menu. The list-styles are based on the stacked <a href="http://getbootstrap.com/components/#nav-pills" target="_blank">pills</a> nav.
</li>
<li>
<code>.drawer-footer</code> is a good spot for any small-print type code. Add the <code>.locked</code> class to position it at the bottom of your menu.
</li>
</ul>
</li>
</ul>

<div class="page-header">
<h2>Position / Colors <small>and other (advanced) uses.</a></small></h2>
<a name="options"></a>
</div>

<p>WIP</p>

<div class="page-header">
<h2>data-toggle / Javascript</h2>
<a name="javascript"></a>
</div>

<p>WIP</p>
</div>
</div>

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="example/prettify/prettify.js"></script>
<script src="example/prettify/run_prettify.js"></script>
<script src="example/bootstrap.min.js"></script>
<script src="dist/js/drawer.js"></script>
<script>
(function($) {

})(jQuery || {});
</script>
</body>
</html>
126 changes: 126 additions & 0 deletions customize.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<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">
</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>&nbsp;
<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>&nbsp; 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>&nbsp;npm</a></li>
<li role="presentation"><a href="http://twitter.com/clineamb" target="_blank"><i class="fa fa-twitter"></i>&nbsp;@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>&copy; 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="drawer-customization">Drawer Customization</h2>
<p><strong>bootstrap-drawer</strong> comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap&#39;s Navbar components.</p>
<hr>
<h2 id="position">Position</h2>
<p>Sometimes you might want the drawer to the right. You can do this quickly by adding <code>.drawer-right</code> to the <code>.drawer</code> container.</p>
<pre><code class="lang-html">&lt;div id=&quot;drawerExample2&quot; class=&quot;drawer drawer-right ...&quot;&gt;
...
&lt;/div&gt;
</code></pre>
<div class="panel panel-default has-inner-drawer example-container-right">
<div id="drawerExample2" class="drawer drawer-right drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2">
<div class="drawer-controls">
<a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen"false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<strong>right menu example</strong>
</div>
<ul class="drawer-nav">
<li role="presentation" class="active"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
</ul>
</div>
</div>
<div class="panel-body">
<p>You can position the drawer to the right by adding the <code>.drawer-right</code> class. This also works on full-page drawers.</p>
</div>
</div>

<hr>
<h2 id="inverse-color">Inverse Color</h2>
<p>Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add <code>.drawer-inverse</code> to your <code>.drawer</code> container.</p>
<pre><code class="lang-html">&lt;div id=&quot;drawerExample2&quot; class=&quot;drawer drawer-inverse ...&quot;&gt;
...
&lt;/div&gt;
</code></pre>
<div class="panel panel-default has-inner-drawer example-container">
<div id="drawerExample3" class="drawer drawer-inverse drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample3">
<div class="drawer-controls">
<a href="#drawerExample3" data-toggle="drawer" href="#drawerExample3" aria-foldedopen"false" aria-controls="drawerExample3" class="btn btn-primary btn-sm">Menu</a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<strong>inverse menu example</strong>
</div>
<ul class="drawer-fullnav">
<li role="presentation" class="active"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
</ul>
</div>
</div>
<div class="panel-body">
<p>You can position the drawer to the right by adding the <code>.drawer-right</code> class. This also works on full-page drawers.</p>
</div>
</div> <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>
Loading

0 comments on commit b034dd9

Please sign in to comment.