forked from clineamb/bootstrap-drawer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
less.html
150 lines (140 loc) · 9.06 KB
/
less.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!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">
<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>