From b034dd92d3509ecac4e975f1ec42a1067dfdbe1b Mon Sep 17 00:00:00 2001 From: Caroline Amaba Date: Tue, 3 Feb 2015 16:02:56 -0500 Subject: [PATCH] finish docs --- _index.html | 204 +++++++++++++++ customize.html | 126 +++++++++ docs/_footer.htm | 11 + docs/_header.htm | 59 +++++ docs/customize.md | 69 +++++ docs/html/customize.html | 57 +++++ docs/html/index.html | 178 +++++++++++++ docs/html/javascript.html | 125 +++++++++ docs/html/less.html | 79 ++++++ docs/index.md | 220 ++++++++++++++++ docs/javascript.md | 154 +++++++++++ docs/less.md | 100 ++++++++ example/docs.js | 23 ++ example/drawer-docs.css | 422 +++++++++++++++++++++++++++++-- example/github.css | 124 +++++++++ example/highlight.pack.js | 1 + example/prettify/lang-css.js | 2 - example/prettify/prettify.css | 1 - example/prettify/prettify.js | 30 --- example/prettify/run_prettify.js | 34 --- gulp-nunjucks.js | 31 --- gulpfile.js | 39 ++- index.html | 314 +++++++++++++---------- javascript.html | 195 ++++++++++++++ less.html | 149 +++++++++++ less/drawer-docs.less | 86 +++++-- package.json | 2 + 27 files changed, 2561 insertions(+), 274 deletions(-) create mode 100644 _index.html create mode 100644 customize.html create mode 100644 docs/_footer.htm create mode 100644 docs/_header.htm create mode 100644 docs/customize.md create mode 100644 docs/html/customize.html create mode 100644 docs/html/index.html create mode 100644 docs/html/javascript.html create mode 100644 docs/html/less.html create mode 100644 docs/index.md create mode 100644 docs/javascript.md create mode 100644 docs/less.md create mode 100644 example/docs.js create mode 100644 example/github.css create mode 100644 example/highlight.pack.js delete mode 100644 example/prettify/lang-css.js delete mode 100644 example/prettify/prettify.css delete mode 100644 example/prettify/prettify.js delete mode 100644 example/prettify/run_prettify.js delete mode 100644 gulp-nunjucks.js create mode 100644 javascript.html create mode 100644 less.html diff --git a/_index.html b/_index.html new file mode 100644 index 0000000..6032cb6 --- /dev/null +++ b/_index.html @@ -0,0 +1,204 @@ + + + + + + + + + bootstrap-drawer documentation + + + + + + + +
+
+ +
+
+
+

bootstrap-drawer

+
+
+   + +
+
+

Basics

+
+ +
+

Other Links

+
+ +
+ © Caroline Amaba +
+
+
+
+
+
+

bootstrap-drawer

+

bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container!

+
+
+
+

Note: This documentation is still a work in progress. You can check out what's here, but also make sure you read the Readme.md in the repo! Thanks!

+ +
+

What is it?

+
+

bootstrap-drawer 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.*

+

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, Bootstrap.

+

* Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer".

+ +
+

Basic Usage ie, the tl;dr Readme.md

+
+ +

Requirements

+ +

Bootstrap is required for this plugin, since bootstrap-drawer built on top of the framework and, thus, jQuery is also required.

+ +

Download

+

+ bower install bootstrap-drawer or + npm install bootstrap-drawer +

+

You can also find all the releases on the Github page. For your convenience, here are some links to the latest releases.

+

+ Download Version 1.0.0 + Get the bootstrap-drawer-1.0.0.zip +

+ +

Basic Setup

+ +

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

+ +

The accomanying drawer.js requires Bootstrap's core transitions.js at least (which all come after jQuery). Whether you're just including the separate Javascript components or the entire bootstrap.js, drawer.js needs to come after either/both.

+
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="bootstrap-drawer.min.css">
+    <link rel="stylesheet" type="text/css" href="YOUR_OTHER_STYLES.css">
+</head>
+<body class="has-canvas">
+    <!-- Off Canvas & other HTML here -->
+    <script src="jquery.min.js"></script>
+    <script src="bootstrap.min.js"></script>
+    <script src="drawer.min.js"></script>
+    <script src="YOUR_CUSTOM_JS.js"></script>
+</body>
+</html>
+
+ +

Basic Usage

+ +

To get a simple drawer like the one on this page:

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

bootstrap-drawer was built with a bootstrap-minded style, based on the already built .nav or .panel classes.

+ +
    +
  • + .drawer is the main class. It has a similar sizing system, based on the 12-column system of bootstrap, using .dw-SIZE-#COLS. 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). +
    • +
  • + .fold starts the menu closed (.fold.open for an opened drawer). This class, as well as its Javascript component are built similarly to the .collapse components. It had to be named differently because bootstrap-drawer is folding horizontally and not collapsing veritcally. +
    • +
  • + .drawer-controls 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 data-toggle="drawer" or the jQuery API ($('.drawer').drawer();). +
    • +
  • + .drawer-contents holds the innards of your drawer menu: + +
      +
    • + .drawer-heading is the title section of the menu. +
      • +
    • + .drawer-body contains non-menu/nav text that you may want to include in your drawer. +
      • +
    • + .drawer-nav or .drawer-fullnav 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 pills nav. +
      • +
    • + .drawer-footer is a good spot for any small-print type code. Add the .locked class to position it at the bottom of your menu. +
      • +
    +
    • +
+ +
+

Position / Colors and other (advanced) uses.

+ +
+ +

WIP

+ +
+

data-toggle / Javascript

+ +
+ +

WIP

+
+
+ + + + + + + + + diff --git a/customize.html b/customize.html new file mode 100644 index 0000000..768ed10 --- /dev/null +++ b/customize.html @@ -0,0 +1,126 @@ + + + + + + + + + bootstrap-drawer documentation + + + + + + + +
+
+ +
+
+
+

bootstrap-drawer

+
+
+   + +
+
+

Basics

+
+ +
+

Other Links

+
+ +
+ © 2015 Caroline Amaba +
+
+
+
+
+
+

bootstrap-drawer

+

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!

+
+
+
+

Drawer Customization

+

bootstrap-drawer comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components.

+
+

Position

+

Sometimes you might want the drawer to the right. You can do this quickly by adding .drawer-right to the .drawer container.

+
<div id="drawerExample2" class="drawer drawer-right ...">
+    ...
+</div>
+
+
+
+
+ Menu +
+
+
+ right menu example +
+ +
+
+
+

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

+
+
+ +
+

Inverse Color

+

Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add .drawer-inverse to your .drawer container.

+
<div id="drawerExample2" class="drawer drawer-inverse ...">
+    ...
+</div>
+
+
+
+
+ Menu +
+
+
+ inverse menu example +
+ +
+
+
+

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/docs/_footer.htm b/docs/_footer.htm new file mode 100644 index 0000000..ebaefad --- /dev/null +++ b/docs/_footer.htm @@ -0,0 +1,11 @@ + +
+ + + + + + + \ No newline at end of file diff --git a/docs/_header.htm b/docs/_header.htm new file mode 100644 index 0000000..8637efb --- /dev/null +++ b/docs/_header.htm @@ -0,0 +1,59 @@ + + + + + + + + + bootstrap-drawer documentation + + + + + + + +
+
+ +
+
+
+

bootstrap-drawer

+
+
+   + +
+
+

Basics

+
+ +
+

Other Links

+
+ +
+ © 2015 Caroline Amaba +
+
+
+
+
+
+

bootstrap-drawer

+

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!

+
+
+
diff --git a/docs/customize.md b/docs/customize.md new file mode 100644 index 0000000..bf68345 --- /dev/null +++ b/docs/customize.md @@ -0,0 +1,69 @@ +## Drawer Customization + +**bootstrap-drawer** comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components. + +---------- + +## Position + +Sometimes you might want the drawer to the right. You can do this quickly by adding `.drawer-right` to the `.drawer` container. + +```html +
+ ... +
+``` + +
+
+
+ Menu +
+
+
+ right menu example +
+ +
+
+
+

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

+
+
+ +---------- + +## Inverse Color + +Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add `.drawer-inverse` to your `.drawer` container. + +```html +
+ ... +
+``` + +
+
+
+ Menu +
+
+
+ inverse menu example +
+ +
+
+
+

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

+
+
\ No newline at end of file diff --git a/docs/html/customize.html b/docs/html/customize.html new file mode 100644 index 0000000..9b27dea --- /dev/null +++ b/docs/html/customize.html @@ -0,0 +1,57 @@ +

Drawer Customization

+

bootstrap-drawer comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components.

+
+

Position

+

Sometimes you might want the drawer to the right. You can do this quickly by adding .drawer-right to the .drawer container.

+
<div id="drawerExample2" class="drawer drawer-right ...">
+    ...
+</div>
+
+
+
+
+ Menu +
+
+
+ right menu example +
+ +
+
+
+

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

+
+
+ +
+

Inverse Color

+

Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add .drawer-inverse to your .drawer container.

+
<div id="drawerExample2" class="drawer drawer-inverse ...">
+    ...
+</div>
+
+
+
+
+ Menu +
+
+
+ inverse menu example +
+ +
+
+
+

You can position the drawer to the right by adding the .drawer-right class. This also works on full-page drawers.

+
+
\ No newline at end of file diff --git a/docs/html/index.html b/docs/html/index.html new file mode 100644 index 0000000..1a82752 --- /dev/null +++ b/docs/html/index.html @@ -0,0 +1,178 @@ +

What Is It?

+

bootstrap-drawer 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.*

+

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, Bootstrap.

+

* Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer".

+
+

Requirements

+

Bootstrap is required for this plugin, since bootstrap-drawer is built on top of the framework. (Thus, jQuery is also required.)

+

Download

+

bower install bootstrap-drawer or npm install bootstrap-drawer

+

You can also find all the release on the GitHub repo releases page. For your convenience, here are some links to the latest releases:

+

Download Version 1.0.0 + Get the bootstrap-drawer-1.0.0.zip

+
+

Basic Setup

+

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

+
<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
+        <link rel="stylesheet" type="text/css" href="bootstrap-drawer.min.css">
+        <link rel="stylesheet" type="text/css" href="YOUR_OTHER_STYLES.css">
+    </head>
+    <body class="has-canvas">
+        <!-- Off Canvas & other HTML here -->
+        <script src="jquery.min.js"></script>
+        <script src="bootstrap.min.js"></script>
+        <script src="drawer.min.js"></script>
+        <script src="YOUR_CUSTOM_JS.js"></script>
+    </body>
+</html>
+
+

Basic Usage

+

Full Page Drawer

+

To get a simple, full-page drawer, like the one here in the docs, simply add .has-drawer to your body, and add the .drawer container like so:

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

Container-nested Drawer

+
+
+
+ Menu +
+
+
+

Menu

+
+ +
+
+
+

You can also nest the drawer in a block container by adding the .drawer-inside class to .drawer and adding .has-inner-drawer to your parent container, like so:

+

You can also use panels inside of other elements that have a defined with and height. A z-index will also need to be defined.

+

You'll also have to make sure that you give your controls (however you do them) are visible. In this example, the .panel-body was given padding-left: 10% so that the Menu button isn't running into the content of the panel.

+
+
+ +
<div class="panel panel-default has-inner-drawer">
+    <div id="drawerExample2" class="drawer 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">
+                <h2 class="drawer-title">Menu</h2>
+            </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" style="padding-left: 10%">
+        <p>You can also use panels inside of other elements that have
+        a defined with and height.</p>
+        <p>You'll have to be responsible for making sure your controls accessible.</p>
+    </div>
+</div>
+
+


+

bootstrap-drawer components

+

bootstrap_drawer was built with a Bootstrap-minded style. The classes used are very similar to the .nav and .panel classes in Bootstrap. The Bootstrap data-api for toggling the drawer is, likewise, built like .collapse and its javascript component.

+

bootstrap-drawer does not (yet) have a class that expands to a navbar on bigger screens. For now, the main focus of bootstrap-drawer was to do one thing well. In a later version, there may be an additional ".drawer-navbar" class to remove the drawer on larger screens.

+

Class Breakdown

+

.drawer is the main class. The sizing system is based on the 12-column system of Bootstrap, using .dw-SIZE-#COLS. 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). This size becomes relative when using it inside another container.

+

.fold started the menu closed (.fold.open starts the menu opened). This class, as well as the +javascript component are built similarly to the .collapse components. It had to +be named differently because bootstrap-drawer is folding horizontally and not collapsing vertically.

+
<div class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold">
+    ...
+</div>
+
+

.drawer-controls 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 data-toggle="drawer" or the jQuery API ($('.drawer').drawer();).

+
<div id="drawerExample2" class="drawer 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>
+</div>
+
+


+

Drawer Contents

+

.drawer-contents wraps the main parts of the drawer: .drawer-heading, .drawer-body, .drawer-nav / .drawer-fullnav, .drawer-footer. These classes are very similar to how Bootstrap's .panel inner classes work.

+

.drawer-nav and .drawer-fullnav are already-built nav classes that are based on the .nav.nav-pills.nav-stacked combination of classes. The difference between the two is that .drawer-nav has padding on the left and right, while .drawer-fullnav goes the entire width of the drawer.

+

You can use .drawer-body to wrap you own navigation, as well, or just include content.

+

DEMOS:

+
+
+
+
+
+
+

.drawer-nav example

+
+ +
+
+
+
+
+
+
+
+
+

.drawer-fullnav example

+
+ +
+
+
+
+
+ +

.drawer-heading, like .panel-heading is specially styled to be the top of the drawer. In addition, there is a .drawer-title class that can be put within .drawer-heading for a specially styled <h#> tag.

+

.drawer-footer finishes off the components of the drawer (again, like .panel-footer). Additionally, by giving the .drawer-footer an additional locked class, the footer will then stick to the bottom of the drawer. This is absolutely positioned within the drawer, and you should be careful that your content does not overlap the .drawer-footer.

diff --git a/docs/html/javascript.html b/docs/html/javascript.html new file mode 100644 index 0000000..c2b4532 --- /dev/null +++ b/docs/html/javascript.html @@ -0,0 +1,125 @@ +

Component jQuery API

+

Bootstrap drawer comes with drawer.js to be added to the bootstrap.js component suite. If you're including separate components, drawer.js does depend on transition.js plugin.

+

drawer.js is built similarly to collapse.js.

+
+

Example

+

Click the buttons below to fold/open another element with the class changes:

+
    +
  • .fold hides content
    • +
  • .folding is applied during transitions.
    • +
  • .fold.open shows content.
    • +
+

You can use a link with the href attribute, or a button with the data-target attribute. Both require the data-toggle="drawer" attribute.

+
+
+
+
+ Button/Link Toggle Example +
+ +
+
+
+
+
+ Try the buttons over there to toggle the menu that pops out on the left! +
+
+

+ Link with href +

+

+ +

+
+
+
+
+ + +

Usage

+

The drawer plugin utilizes a few classes to do all the work:

+
    +
  • .fold hides content
    • +
  • .fold.open shows content.
    • +
  • .folding is applied during transitions, and removed when it finishes.
    • +
+

These classes can be found in less/mixins/drawer-framework.less. They are built in loops with the .dw-SIZE-# classes because they utilize margins based on the column width.

+

Via data attributes

+

Just add data-toggle="drawer" and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class .fold to the collapsible element. If you'd like it to default open, add the additional class .open.

+

Via JavaScript

+

Enable manually with:

+
$('.drawer').drawer()
+
+

Options

+

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

+ + + + + + + + + + + + + + + + + + + +
Nameselectordefaultdescription
parentselectorfalseIf a selector is provided, then all collapsible elements under the specified parent will be closed when this drawer is open.
togglebooleantrueToggle the drawer element on invocation.
+ +

Methods

+
.collapse(options)
+

Activates your content as a drawer element. Accepts an optional options object.

+
$('#myDrawer').drawer({
+    toggle: false
+});
+
+
.collapse('toggle')
+

Toggles a drawer element as folded or open.

+
.collapse('show')
+

Shows drawer element as opened.

+
.collapse('hide')
+

Hide a drawer element.

+

Events

+

drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking +into the drawer functionality.

+ + + + + + + + + + + + + + + + + + + + + +
Event TypeDescription
show.bs.drawerThis event fires immediately when the show instance method is called.
shown.bs.drawerThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.drawerThis event is fired immediately when the hide method has been called.
hidden.bs.drawerThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
+ +
$('#myDrawer').on('hidden.bs.drawer', function() {
+    // do something here...
+});
+
diff --git a/docs/html/less.html b/docs/html/less.html new file mode 100644 index 0000000..c6a4487 --- /dev/null +++ b/docs/html/less.html @@ -0,0 +1,79 @@ +

LESS / Custom Builds

+

If you're familiar with LESS, 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.

+

bootstrap-drawer currently uses Gulp and LESS, but it'd be great if people can contribute grunt and SASS components! Check out the repo to contribute!

+
+

Building Your Own Flavor of Drawer

+

You'll need gulp and Node (or io.js if you want to build your own version.

+

Run npm install in order to get all the devDependencies from the package.json.

+

Most of the tasks are outlined in gulpfile.js. The gulp build will also update +the assets for example/index.html so you can see your changes.

+

To customize bootstrap-drawer, just edit some of the variables in less/drawer-variables.less to +the sizes and colors, etc. you want. Then run gulp build and a new dist/css/bootstrap-drawer(.min).css +should be made just for you! Include the file right after the Bootstrap core file, and you should be +good to go!

+

Things to keep in mind:

+
    +
  • bootstrap-drawer uses some variables (@grid-gutter-width, @zindex-navbar-fixed, @link-color, to +name most of them), so if you're using a different varibles.less file, be sure to replace it in +less/bootstrap-drawer.less.
    • +
  • The .dw-SIZE-# columns are built in LESS loops, and can change as you change the @grid-columns variable. If you're using 16-columns instead of 12, less/mixins/drawer-framework.less is built to build more columns (like.dw-md-13`, etc.).
    • +
+
+

Using Less

+

I am assuming for this section you are familiar with using less and the Bootstrap less source. +There are files in the less/ directory that are parallel to Bootstrap's less source files. +drawer.less 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:

+

Add to your main less file after bootstrap

+
    @import "bootstrap.less";
+    @import "path/to/drawer.less";
+
+    /* Your styles */
+
+

Add to bootstrap.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 ...
+
+

Move Contents

+

The first two lines in less/drawer.less can be removed and moved

+

Feel free to move drawer-variables.less and drawer-framework.less 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:

+
    +
  • @import "./drawer-variables"; can be put after importing variables.less
    • +
  • @import "./mixins/drawer-framework"; can be put after importing mixins.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 ...
+
diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 0000000..61bebe0 --- /dev/null +++ b/docs/index.md @@ -0,0 +1,220 @@ +## What Is It? + +[bootstrap-drawer](http://github.com/clineamb/bootstrap-drawer) 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.* + +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, Bootstrap. + +* Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer". + +---------- + +## Requirements + +Bootstrap is required for this plugin, since bootstrap-drawer is built on top of the framework. (Thus, jQuery is also required.) + +### Download + +`bower install bootstrap-drawer` or `npm install bootstrap-drawer` + +You can also find all the release on the GitHub repo releases page. For your convenience, here are some links to the latest releases: + + Download Version 1.0.0 + Get the bootstrap-drawer-1.0.0.zip + +---------- + +## Basic Setup + +If you simply just want to quickly use bootstrap-drawer with Bootstrap, you just need to include `dist/bootstrap-drawer.css` after Bootstrap, and then include any other files after that. + +```html + + + + + + + + + + + + + + +``` + +## Basic Usage + +### Full Page Drawer + +To get a simple, full-page drawer, like the one here in the docs, simply add `.has-drawer` to your body, and add the `.drawer` container like so: + +```html + +
+
+ Menu +
+
+
+

Menu

+
+
+

+ This is a properly padded container for content in the + drawer that isn't a navigation. +

+ A Regular Link +
+ +
+ © Caroline Amaba +
+
+
+
+ +
+ +``` + +### Container-nested Drawer + +
+
+
+ Menu +
+
+
+

Menu

+
+ +
+
+
+

You can also nest the drawer in a block container by adding the .drawer-inside class to .drawer and adding .has-inner-drawer to your parent container, like so:

+

You can also use panels inside of other elements that have a defined with and height. A z-index will also need to be defined.

+

You'll also have to make sure that you give your controls (however you do them) are visible. In this example, the `.panel-body` was given `padding-left: 10%` so that the Menu button isn't running into the content of the panel.

+
+
+ +```html +
+
+
+ Menu +
+
+
+

Menu

+
+ +
+
+
+

You can also use panels inside of other elements that have + a defined with and height.

+

You'll have to be responsible for making sure your controls accessible.

+
+
+``` +
+ +## bootstrap-drawer components + +**bootstrap_drawer** was built with a Bootstrap-minded style. The classes used are very similar to the `.nav` and `.panel` classes in Bootstrap. The Bootstrap `data-api` for toggling the drawer is, likewise, built like `.collapse` and its javascript component. + +bootstrap-drawer does **not** (yet) have a class that expands to a navbar on bigger screens. For now, the main focus of bootstrap-drawer was to do one thing well. In a later version, there may be an additional ".drawer-navbar" class to remove the drawer on larger screens. + + +### Class Breakdown + +`.drawer` is the main class. The sizing system is based on the 12-column system of Bootstrap, using `.dw-SIZE-#COLS`. 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). This size becomes relative when using it inside another container. + +`.fold` started the menu closed (`.fold.open` starts the menu opened). This class, as well as the +[javascript component](javascript.html) are built similarly to the `.collapse` components. It had to +be named differently because bootstrap-drawer is folding horizontally and not collapsing vertically. + +```html +
+ ... +
+``` + +`.drawer-controls` 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 `data-toggle="drawer"` or the jQuery API (`$('.drawer').drawer();`). + +```html +
+
+ Menu +
+
+ ... +
+
+``` +
+ +#### Drawer Contents + +`.drawer-contents` wraps the main parts of the drawer: `.drawer-heading`, `.drawer-body`, `.drawer-nav` / `.drawer-fullnav`, `.drawer-footer`. These classes are very similar to how Bootstrap's `.panel` inner classes work. + +`.drawer-nav` and `.drawer-fullnav` are already-built nav classes that are based on the `.nav.nav-pills.nav-stacked` combination of classes. The difference between the two is that `.drawer-nav` has padding on the left and right, while `.drawer-fullnav` goes the entire width of the drawer. + +You can use `.drawer-body` to wrap you own navigation, as well, or just include content. + +**DEMOS:** + +
+
+
+
+
+
+

.drawer-nav example

+
+ +
+
+
+
+
+
+
+
+
+

.drawer-fullnav example

+
+ +
+
+
+
+
+ +`.drawer-heading`, like `.panel-heading` is specially styled to be the top of the drawer. In addition, there is a `.drawer-title` class that can be put within `.drawer-heading` for a specially styled `` tag. + +`.drawer-footer` finishes off the components of the drawer (again, like `.panel-footer`). Additionally, by giving the `.drawer-footer` an additional `locked` class, the footer will then stick to the bottom of the drawer. This is absolutely positioned within the drawer, and you should be careful that your content does not overlap the `.drawer-footer`. \ No newline at end of file diff --git a/docs/javascript.md b/docs/javascript.md new file mode 100644 index 0000000..86422af --- /dev/null +++ b/docs/javascript.md @@ -0,0 +1,154 @@ +## Component jQuery API + +Bootstrap drawer comes with `drawer.js` to be added to the `bootstrap.js` component suite. If you're including separate components, `drawer.js` does depend on `transition.js` plugin. + +`drawer.js` is built similarly to `collapse.js`. + +---------- + +### Example + +Click the buttons below to fold/open another element with the class changes: +* `.fold` hides content +* `.folding` is applied during transitions. +* `.fold.open` shows content. + +You can use a link with the `href` attribute, or a button with the `data-target` attribute. Both require the `data-toggle="drawer"` attribute. + +
+
+
+
+ Button/Link Toggle Example +
+ +
+
+
+
+
+ Try the buttons over there to toggle the menu that pops out on the left! +
+
+

+ Link with href +

+

+ +

+
+
+
+
+ + +### Usage + +The drawer plugin utilizes a few classes to do all the work: + +* `.fold` hides content +* `.fold.open` shows content. +* `.folding` is applied during transitions, and removed when it finishes. + +These classes can be found in `less/mixins/drawer-framework.less`. They are built in loops with the `.dw-SIZE-#` classes because they utilize margins based on the column width. + +#### Via data attributes + +Just add `data-toggle="drawer"` and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class `.fold` to the collapsible element. If you'd like it to default open, add the additional class `.open`. + +#### Via JavaScript + +Enable manually with: + +```js +$('.drawer').drawer() +``` + +#### Options + +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. + + + + + + + + + + + + + + + + + + + + +
Nameselectordefaultdescription
parentselectorfalseIf a selector is provided, then all collapsible elements under the specified parent will be closed when this drawer is open.
togglebooleantrueToggle the drawer element on invocation.
+ +#### Methods + +##### .collapse(options) + +Activates your content as a drawer element. Accepts an optional options `object`. + +```js +$('#myDrawer').drawer({ + toggle: false +}); +``` + +##### .collapse('toggle') + +Toggles a drawer element as folded or open. + +##### .collapse('show') + +Shows drawer element as opened. + +##### .collapse('hide') + +Hide a drawer element. + +#### Events + +drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking +into the drawer functionality. + + + + + + + + + + + + + + + + + + + + + + +
Event TypeDescription
show.bs.drawerThis event fires immediately when the `show` instance method is called.
shown.bs.drawerThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.drawerThis event is fired immediately when the `hide` method has been called.
hidden.bs.drawerThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
+ +```js +$('#myDrawer').on('hidden.bs.drawer', function() { + // do something here... +}); +``` \ No newline at end of file diff --git a/docs/less.md b/docs/less.md new file mode 100644 index 0000000..6b2e2e5 --- /dev/null +++ b/docs/less.md @@ -0,0 +1,100 @@ +## LESS / Custom Builds + +If you're familiar with LESS, 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. + +bootstrap-drawer currently uses Gulp and LESS, but it'd be great if people can contribute grunt and SASS components! Check out the repo to contribute! + +-------- + +### Building Your Own Flavor of Drawer + +You'll need gulp and Node (or io.js if you want to build your own version. + +Run `npm install` in order to get all the devDependencies from the `package.json`. + +Most of the tasks are outlined in `gulpfile.js`. The `gulp build` will also update +the assets for `example/index.html` so you can see your changes. + +To customize bootstrap-drawer, just edit some of the variables in `less/drawer-variables.less` to +the sizes and colors, etc. you want. Then run `gulp build` and a new `dist/css/bootstrap-drawer(.min).css` +should be made just for you! Include the file right after the Bootstrap core file, and you should be +good to go! + +Things to keep in mind: +* bootstrap-drawer uses some variables (`@grid-gutter-width`, `@zindex-navbar-fixed`, `@link-color`, to +name most of them), so if you're using a different `varibles.less file`, be sure to replace it in +`less/bootstrap-drawer.less`. +* The `.dw-SIZE-#` columns are built in LESS loops, and can change as you change the `@grid-columns` variable. If you're using 16-columns instead of 12, `less/mixins/drawer-framework.less is built to build more columns (like `.dw-md-13`, etc.). + + +--------- + +### Using Less + +I am assuming for this section you are familiar with using less and the Bootstrap less source. +There are files in the `less/` directory that are parallel to Bootstrap's less source files. +`drawer.less` 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: + +#### Add to your main less file after bootstrap + +```less + @import "bootstrap.less"; + @import "path/to/drawer.less"; + + /* Your styles */ +``` + +#### Add to bootstrap.less + +```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 ... +``` + +#### Move Contents + +The first two lines in `less/drawer.less` can be removed and moved + +Feel free to move `drawer-variables.less` and `drawer-framework.less` 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: + +* `@import "./drawer-variables";` can be put after importing `variables.less` +* `@import "./mixins/drawer-framework";` can be put after importing `mixins.less` + +```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 ... +``` \ No newline at end of file diff --git a/example/docs.js b/example/docs.js new file mode 100644 index 0000000..f48f367 --- /dev/null +++ b/example/docs.js @@ -0,0 +1,23 @@ +(function($, hljs) { + var page = window.location.pathname.split("/").pop(); + + hljs.initHighlightingOnLoad(); + + $('#doc-nav li').each(function() { + var href = $(this).find('a').attr('href'); + + if((page === href) || (page.length <= 0 && href === 'index.html')) { + $(this).addClass('active'); + } + }); + + $('#doc-nav a').click(function() { + var href = $(this).attr('href'); + + if((page === href) || (page.length <= 0 && href === 'index.html')) { + $('#docDrawer').drawer('hide'); + return false; + } + }); + +})(jQuery || {}, hljs); \ No newline at end of file diff --git a/example/drawer-docs.css b/example/drawer-docs.css index 4f021d7..356134e 100644 --- a/example/drawer-docs.css +++ b/example/drawer-docs.css @@ -1,4 +1,5 @@ -@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700); +@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700); +/*** variable overrides ***/ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html { font-family: sans-serif; @@ -372,27 +373,27 @@ h6 .small, } h1, .h1 { - font-size: 36px; + font-size: 225%; } h2, .h2 { - font-size: 30px; + font-size: 200%; } h3, .h3 { - font-size: 24px; + font-size: 150%; } h4, .h4 { - font-size: 18px; + font-size: 110%; } h5, .h5 { - font-size: 14px; + font-size: 100%; } h6, .h6 { - font-size: 12px; + font-size: 95%; } p { margin: 0 0 10px; @@ -2500,6 +2501,345 @@ tbody.collapse.in { -webkit-transition-timing-function: ease; transition-timing-function: ease; } +.panel { + margin-bottom: 20px; + background-color: #ffffff; + border: 1px solid transparent; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); +} +.panel-body { + padding: 15px; +} +.panel-heading { + padding: 10px 15px; + border-bottom: 1px solid transparent; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel-heading > .dropdown .dropdown-toggle { + color: inherit; +} +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: 16px; + color: inherit; +} +.panel-title > a, +.panel-title > small, +.panel-title > .small, +.panel-title > small > a, +.panel-title > .small > a { + color: inherit; +} +.panel-footer { + padding: 10px 15px; + background-color: #f5f5f5; + border-top: 1px solid #dddddd; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .list-group, +.panel > .panel-collapse > .list-group { + margin-bottom: 0; +} +.panel > .list-group .list-group-item, +.panel > .panel-collapse > .list-group .list-group-item { + border-width: 1px 0; + border-radius: 0; +} +.panel > .list-group:first-child .list-group-item:first-child, +.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child { + border-top: 0; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel > .list-group:last-child .list-group-item:last-child, +.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child { + border-bottom: 0; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel-heading + .list-group .list-group-item:first-child { + border-top-width: 0; +} +.list-group + .panel-footer { + border-top-width: 0; +} +.panel > .table, +.panel > .table-responsive > .table, +.panel > .panel-collapse > .table { + margin-bottom: 0; +} +.panel > .table caption, +.panel > .table-responsive > .table caption, +.panel > .panel-collapse > .table caption { + padding-left: 15px; + padding-right: 15px; +} +.panel > .table:first-child, +.panel > .table-responsive:first-child > .table:first-child { + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { + border-top-left-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { + border-top-right-radius: 3px; +} +.panel > .table:last-child, +.panel > .table-responsive:last-child > .table:last-child { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { + border-bottom-right-radius: 3px; +} +.panel > .panel-body + .table, +.panel > .panel-body + .table-responsive, +.panel > .table + .panel-body, +.panel > .table-responsive + .panel-body { + border-top: 1px solid #dddddd; +} +.panel > .table > tbody:first-child > tr:first-child th, +.panel > .table > tbody:first-child > tr:first-child td { + border-top: 0; +} +.panel > .table-bordered, +.panel > .table-responsive > .table-bordered { + border: 0; +} +.panel > .table-bordered > thead > tr > th:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:first-child, +.panel > .table-bordered > tbody > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, +.panel > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-bordered > thead > tr > td:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:first-child, +.panel > .table-bordered > tbody > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, +.panel > .table-bordered > tfoot > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; +} +.panel > .table-bordered > thead > tr > th:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:last-child, +.panel > .table-bordered > tbody > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, +.panel > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-bordered > thead > tr > td:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:last-child, +.panel > .table-bordered > tbody > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, +.panel > .table-bordered > tfoot > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; +} +.panel > .table-bordered > thead > tr:first-child > td, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > td, +.panel > .table-bordered > tbody > tr:first-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, +.panel > .table-bordered > thead > tr:first-child > th, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > th, +.panel > .table-bordered > tbody > tr:first-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { + border-bottom: 0; +} +.panel > .table-bordered > tbody > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, +.panel > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-bordered > tbody > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, +.panel > .table-bordered > tfoot > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { + border-bottom: 0; +} +.panel > .table-responsive { + border: 0; + margin-bottom: 0; +} +.panel-group { + margin-bottom: 20px; +} +.panel-group .panel { + margin-bottom: 0; + border-radius: 4px; +} +.panel-group .panel + .panel { + margin-top: 5px; +} +.panel-group .panel-heading { + border-bottom: 0; +} +.panel-group .panel-heading + .panel-collapse > .panel-body, +.panel-group .panel-heading + .panel-collapse > .list-group { + border-top: 1px solid #dddddd; +} +.panel-group .panel-footer { + border-top: 0; +} +.panel-group .panel-footer + .panel-collapse .panel-body { + border-bottom: 1px solid #dddddd; +} +.panel-default { + border-color: #dddddd; +} +.panel-default > .panel-heading { + color: #333333; + background-color: #f5f5f5; + border-color: #dddddd; +} +.panel-default > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #dddddd; +} +.panel-default > .panel-heading .badge { + color: #f5f5f5; + background-color: #333333; +} +.panel-default > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #dddddd; +} +.panel-primary { + border-color: #4c8d9f; +} +.panel-primary > .panel-heading { + color: #ffffff; + background-color: #4c8d9f; + border-color: #4c8d9f; +} +.panel-primary > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #4c8d9f; +} +.panel-primary > .panel-heading .badge { + color: #4c8d9f; + background-color: #ffffff; +} +.panel-primary > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #4c8d9f; +} +.panel-success { + border-color: #d6e9c6; +} +.panel-success > .panel-heading { + color: #3c763d; + background-color: #dff0d8; + border-color: #d6e9c6; +} +.panel-success > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #d6e9c6; +} +.panel-success > .panel-heading .badge { + color: #dff0d8; + background-color: #3c763d; +} +.panel-success > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #d6e9c6; +} +.panel-info { + border-color: #bce8f1; +} +.panel-info > .panel-heading { + color: #31708f; + background-color: #d9edf7; + border-color: #bce8f1; +} +.panel-info > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #bce8f1; +} +.panel-info > .panel-heading .badge { + color: #d9edf7; + background-color: #31708f; +} +.panel-info > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #bce8f1; +} +.panel-warning { + border-color: #faebcc; +} +.panel-warning > .panel-heading { + color: #8a6d3b; + background-color: #fcf8e3; + border-color: #faebcc; +} +.panel-warning > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #faebcc; +} +.panel-warning > .panel-heading .badge { + color: #fcf8e3; + background-color: #8a6d3b; +} +.panel-warning > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #faebcc; +} +.panel-danger { + border-color: #ebccd1; +} +.panel-danger > .panel-heading { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; +} +.panel-danger > .panel-heading + .panel-collapse > .panel-body { + border-top-color: #ebccd1; +} +.panel-danger > .panel-heading .badge { + color: #f2dede; + background-color: #a94442; +} +.panel-danger > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: #ebccd1; +} html { min-height: 100%; height: 100%; @@ -4085,6 +4425,8 @@ body.has-drawer { .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, +.panel-body:before, +.panel-body:after, .drawer-nav:before, .drawer-nav:after, .drawer-fullnav:before, @@ -4098,6 +4440,7 @@ body.has-drawer { .container-fluid:after, .row:after, .form-horizontal .form-group:after, +.panel-body:after, .drawer-nav:after, .drawer-fullnav:after { clear: both; @@ -4348,10 +4691,14 @@ body.has-drawer { } body { font-family: 'Open Sans', Arial, sans-serif; - font-size: 12pt; - line-height: 18pt; + font-size: 14pt; + line-height: 24pt; } -p { +.container { + max-width: 1000px; +} +#drawer-docs p, +#drawer-docs-content p { padding-bottom: 15px; } #drawer-docs { @@ -4371,19 +4718,50 @@ p { color: #fff; margin-bottom: 15px; } -#drawer-docs pre.prettyprint, -#drawer-docs pre.prettyprinted { - border: 0; - padding: 10px; - margin-bottom: 15px; +#drawer-docs .jumbotron.page-topper h4 { + line-height: 150%; + font-weight: 400; } -#drawer-docs ul { - padding-top: 8px; - padding-bottom: 8px; +#drawer-docs h1, +#drawer-docs h2, +#drawer-docs h3, +#drawer-docs h4, +#drawer-docs h5, +#drawer-docs h6 { + font-weight: 600; } -#drawer-docs ul li { - padding-bottom: 8px; +#drawer-docs-content hr { + margin-bottom: 30px; } -#drawer-docs .container { - max-width: 1000px; +#drawer-docs-content h1, +#drawer-docs-content h2 { + border-bottom: 2px solid #4c8d9f; + padding-bottom: 15px; + color: #555555; + font-weight: 700; +} +#drawer-docs-content pre { + background: #f8f8f8; +} +#drawer-docs-footer { + margin: 30px auto 0 auto; + display: block; + padding: 30px 0; + border-top: 1px solid #777777; +} +.example-container, +.example-container-right { + font-size: 12pt; + line-height: 16pt; + height: 400px; + z-index: 500; +} +.example-container .panel-body { + padding-left: 10%; +} +.example-container-right .panel-body { + padding-right: 10%; +} +.give-height { + height: 350px; } diff --git a/example/github.css b/example/github.css new file mode 100644 index 0000000..9b4f3aa --- /dev/null +++ b/example/github.css @@ -0,0 +1,124 @@ +/* + +github.com style (c) Vasily Polovnyov + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #333; + background: #f8f8f8; + -webkit-text-size-adjust: none; +} + +.hljs-comment, +.diff .hljs-header, +.hljs-javadoc { + color: #998; + font-style: italic; +} + +.hljs-keyword, +.css .rule .hljs-keyword, +.hljs-winutils, +.nginx .hljs-title, +.hljs-subst, +.hljs-request, +.hljs-status { + color: #333; + font-weight: bold; +} + +.hljs-number, +.hljs-hexcolor, +.ruby .hljs-constant { + color: #008080; +} + +.hljs-string, +.hljs-tag .hljs-value, +.hljs-phpdoc, +.hljs-dartdoc, +.tex .hljs-formula { + color: #d14; +} + +.hljs-title, +.hljs-id, +.scss .hljs-preprocessor { + color: #900; + font-weight: bold; +} + +.hljs-list .hljs-keyword, +.hljs-subst { + font-weight: normal; +} + +.hljs-class .hljs-title, +.hljs-type, +.vhdl .hljs-literal, +.tex .hljs-command { + color: #458; + font-weight: bold; +} + +.hljs-tag, +.hljs-tag .hljs-title, +.hljs-rules .hljs-property, +.django .hljs-tag .hljs-keyword { + color: #000080; + font-weight: normal; +} + +.hljs-attribute, +.hljs-variable, +.lisp .hljs-body { + color: #008080; +} + +.hljs-regexp { + color: #009926; +} + +.hljs-symbol, +.ruby .hljs-symbol .hljs-string, +.lisp .hljs-keyword, +.clojure .hljs-keyword, +.scheme .hljs-keyword, +.tex .hljs-special, +.hljs-prompt { + color: #990073; +} + +.hljs-built_in { + color: #0086b3; +} + +.hljs-preprocessor, +.hljs-pragma, +.hljs-pi, +.hljs-doctype, +.hljs-shebang, +.hljs-cdata { + color: #999; + font-weight: bold; +} + +.hljs-deletion { + background: #fdd; +} + +.hljs-addition { + background: #dfd; +} + +.diff .hljs-change { + background: #0086b3; +} + +.hljs-chunk { + color: #aaa; +} diff --git a/example/highlight.pack.js b/example/highlight.pack.js new file mode 100644 index 0000000..073a2b1 --- /dev/null +++ b/example/highlight.pack.js @@ -0,0 +1 @@ +!function(e){"undefined"!=typeof exports?e(exports):(window.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return window.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){var n=(e.className+" "+(e.parentNode?e.parentNode.className:"")).split(/\s+/);return n=n.map(function(e){return e.replace(/^lang(uage)?-/,"")}),n.filter(function(e){return N(e)||/no(-?)highlight/.test(e)})[0]}function o(e,n){var t={};for(var r in e)t[r]=e[r];if(n)for(var r in n)t[r]=n[r];return t}function i(e){var n=[];return function r(e,a){for(var o=e.firstChild;o;o=o.nextSibling)3==o.nodeType?a+=o.nodeValue.length:1==o.nodeType&&(n.push({event:"start",offset:a,node:o}),a=r(o,a),t(o).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:o}));return a}(e,0),n}function c(e,r,a){function o(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function c(e){l+=""}function u(e){("start"==e.event?i:c)(e.node)}for(var s=0,l="",f=[];e.length||r.length;){var g=o();if(l+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){f.reverse().forEach(c);do u(g.splice(0,1)[0]),g=o();while(g==e&&g.length&&g[0].offset==s);f.reverse().forEach(i)}else"start"==g[0].event?f.push(g[0].node):f.pop(),u(g.splice(0,1)[0])}return l+n(a.substr(s))}function u(e){function n(e){return e&&e.source||e}function t(t,r){return RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var c={},u=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");c[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?u("keyword",a.k):Object.keys(a.k).forEach(function(e){u(e,a.k[e])}),a.k=c}a.lR=t(a.l||/\b[A-Za-z0-9_]+\b/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var l=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=l.length?t(l.join("|"),!0):{exec:function(){return null}}}}r(e)}function s(e,t,a,o){function i(e,n){for(var t=0;t";return o+=e+'">',o+n+i}function d(){if(!w.k)return n(y);var e="",t=0;w.lR.lastIndex=0;for(var r=w.lR.exec(y);r;){e+=n(y.substr(t,r.index-t));var a=g(w,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=w.lR.lastIndex,r=w.lR.exec(y)}return e+n(y.substr(t))}function h(){if(w.sL&&!R[w.sL])return n(y);var e=w.sL?s(w.sL,y,!0,L[w.sL]):l(y);return w.r>0&&(B+=e.r),"continuous"==w.subLanguageMode&&(L[w.sL]=e.top),p(e.language,e.value,!1,!0)}function v(){return void 0!==w.sL?h():d()}function b(e,t){var r=e.cN?p(e.cN,"",!0):"";e.rB?(M+=r,y=""):e.eB?(M+=n(t)+r,y=""):(M+=r,y=t),w=Object.create(e,{parent:{value:w}})}function m(e,t){if(y+=e,void 0===t)return M+=v(),0;var r=i(t,w);if(r)return M+=v(),b(r,t),r.rB?0:t.length;var a=c(w,t);if(a){var o=w;o.rE||o.eE||(y+=t),M+=v();do w.cN&&(M+=""),B+=w.r,w=w.parent;while(w!=a.parent);return o.eE&&(M+=n(t)),y="",a.starts&&b(a.starts,""),o.rE?0:t.length}if(f(t,w))throw new Error('Illegal lexeme "'+t+'" for mode "'+(w.cN||"")+'"');return y+=t,t.length||1}var x=N(e);if(!x)throw new Error('Unknown language: "'+e+'"');u(x);for(var w=o||x,L={},M="",k=w;k!=x;k=k.parent)k.cN&&(M=p(k.cN,"",!0)+M);var y="",B=0;try{for(var C,j,I=0;;){if(w.t.lastIndex=I,C=w.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}m(t.substr(I));for(var k=w;k.parent;k=k.parent)k.cN&&(M+="");return{r:B,value:M,language:e,top:w}}catch(A){if(-1!=A.message.indexOf("Illegal"))return{r:0,value:n(t)};throw A}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.forEach(function(n){if(N(n)){var t=s(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}}),a.language&&(r.second_best=a),r}function f(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function g(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/(\s|^)hljs(\s|$)/)||a.push("hljs"),r&&a.push(r),a.join(" ").trim()}function p(e){var n=a(e);if(!/no(-?)highlight/.test(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?s(n,r,!0):l(r),u=i(t);if(u.length){var p=document.createElementNS("http://www.w3.org/1999/xhtml","div");p.innerHTML=o.value,o.value=c(u,i(p),r)}o.value=f(o.value),e.innerHTML=o.value,e.className=g(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function h(){if(!h.called){h.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,p)}}function v(){addEventListener("DOMContentLoaded",h,!1),addEventListener("load",h,!1)}function b(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function m(){return Object.keys(R)}function N(e){return R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=s,e.highlightAuto=l,e.fixMarkup=f,e.highlightBlock=p,e.configure=d,e.initHighlighting=h,e.initHighlightingOnLoad=v,e.registerLanguage=b,e.listLanguages=m,e.getLanguage=N,e.inherit=o,e.IR="[a-zA-Z][a-zA-Z0-9_]*",e.UIR="[a-zA-Z_][a-zA-Z0-9_]*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such)\b/},e.CLCM={cN:"comment",b:"//",e:"$",c:[e.PWM]},e.CBCM={cN:"comment",b:"/\\*",e:"\\*/",c:[e.PWM]},e.HCM={cN:"comment",b:"#",e:"$",c:[e.PWM]},e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e});hljs.registerLanguage("xml",function(){var t="[A-Za-z0-9\\._:-]+",e={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"},c={eW:!0,i:/]+/}]}]}]};return{aliases:["html","xhtml","rss","atom","xsl","plist"],cI:!0,c:[{cN:"doctype",b:"",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"|$)",e:">",k:{title:"style"},c:[c],starts:{e:"",rE:!0,sL:"css"}},{cN:"tag",b:"|$)",e:">",k:{title:"script"},c:[c],starts:{e:"",rE:!0,sL:"javascript"}},e,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"",c:[{cN:"title",b:/[^ \/><\n\t]+/,r:0},c]}]}});hljs.registerLanguage("css",function(e){var c="[a-zA-Z-][a-zA-Z0-9_-]*",a={cN:"function",b:c+"\\(",rB:!0,eE:!0,e:"\\("};return{cI:!0,i:"[=/|']",c:[e.CBCM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:!0,eE:!0,r:0,c:[a,e.ASM,e.QSM,e.CSSNM]}]},{cN:"tag",b:c,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[e.CBCM,{cN:"rule",b:"[^\\s]",rB:!0,e:";",eW:!0,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:!0,i:"[^\\s]",starts:{cN:"value",eW:!0,eE:!0,c:[a,e.CSSNM,e.QSM,e.ASM,e.CBCM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("javascript",function(r){return{aliases:["js"],k:{keyword:"in if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const class",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document"},c:[{cN:"pi",r:10,v:[{b:/^\s*('|")use strict('|")/},{b:/^\s*('|")use asm('|")/}]},r.ASM,r.QSM,r.CLCM,r.CBCM,r.CNM,{b:"("+r.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[r.CLCM,r.CBCM,r.RM,{b:/;/,r:0,sL:"xml"}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[r.inherit(r.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,c:[r.CLCM,r.CBCM],i:/["'\(]/}],i:/\[|%/},{b:/\$[(.]/},{b:"\\."+r.IR,r:0}]}}); \ No newline at end of file diff --git a/example/prettify/lang-css.js b/example/prettify/lang-css.js deleted file mode 100644 index d7a4640..0000000 --- a/example/prettify/lang-css.js +++ /dev/null @@ -1,2 +0,0 @@ -PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n\u000c"]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]+)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//], -["com",/^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}\b/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); diff --git a/example/prettify/prettify.css b/example/prettify/prettify.css deleted file mode 100644 index 9527374..0000000 --- a/example/prettify/prettify.css +++ /dev/null @@ -1 +0,0 @@ -.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} \ No newline at end of file diff --git a/example/prettify/prettify.js b/example/prettify/prettify.js deleted file mode 100644 index 7b99049..0000000 --- a/example/prettify/prettify.js +++ /dev/null @@ -1,30 +0,0 @@ -!function(){var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; -(function(){function S(a){function d(e){var b=e.charCodeAt(0);if(b!==92)return b;var a=e.charAt(1);return(b=r[a])?b:"0"<=a&&a<="7"?parseInt(e.substring(1),8):a==="u"||a==="x"?parseInt(e.substring(2),16):e.charCodeAt(1)}function g(e){if(e<32)return(e<16?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return e==="\\"||e==="-"||e==="]"||e==="^"?"\\"+e:e}function b(e){var b=e.substring(1,e.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),e=[],a= -b[0]==="^",c=["["];a&&c.push("^");for(var a=a?1:0,f=b.length;a122||(l<65||h>90||e.push([Math.max(65,h)|32,Math.min(l,90)|32]),l<97||h>122||e.push([Math.max(97,h)&-33,Math.min(l,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});b=[];f=[];for(a=0;ah[0]&&(h[1]+1>h[0]&&c.push("-"),c.push(g(h[1])));c.push("]");return c.join("")}function s(e){for(var a=e.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),c=a.length,d=[],f=0,h=0;f=2&&e==="["?a[f]=b(l):e!=="\\"&&(a[f]=l.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var x=0,m=!1,j=!1,k=0,c=a.length;k=5&&"lang-"===w.substring(0,5))&&!(t&&typeof t[1]==="string"))f=!1,w="src";f||(r[z]=w)}h=c;c+=z.length;if(f){f=t[1];var l=z.indexOf(f),B=l+f.length;t[2]&&(B=z.length-t[2].length,l=B-f.length);w=w.substring(5);H(j+h,z.substring(0,l),g,k);H(j+h+l,f,I(w,f),k);H(j+h+B,z.substring(B),g,k)}else k.push(j+h,w)}a.g=k}var b={},s;(function(){for(var g=a.concat(d),j=[],k={},c=0,i=g.length;c=0;)b[n.charAt(e)]=r;r=r[1];n=""+r;k.hasOwnProperty(n)||(j.push(r),k[n]=q)}j.push(/[\S\s]/);s=S(j)})();var x=d.length;return g}function v(a){var d=[],g=[];a.tripleQuotedStrings?d.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?d.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, -q,"'\"`"]):d.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&g.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var b=a.hashComments;b&&(a.cStyleComments?(b>1?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),g.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,q])):d.push(["com", -/^#[^\n\r]*/,q,"#"]));a.cStyleComments&&(g.push(["com",/^\/\/[^\n\r]*/,q]),g.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));if(b=a.regexLiterals){var s=(b=b>1?"":"\n\r")?".":"[\\S\\s]";g.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+s+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+ -s+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&g.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&g.push(["kwd",RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),q]);d.push(["pln",/^\s+/,q," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");g.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/, -q],["pun",RegExp(b),q]);return C(d,g)}function J(a,d,g){function b(a){var c=a.nodeType;if(c==1&&!x.test(a.className))if("br"===a.nodeName)s(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((c==3||c==4)&&g){var d=a.nodeValue,i=d.match(m);if(i)c=d.substring(0,i.index),a.nodeValue=c,(d=d.substring(i.index+i[0].length))&&a.parentNode.insertBefore(j.createTextNode(d),a.nextSibling),s(a),c||a.parentNode.removeChild(a)}}function s(a){function b(a,c){var d= -c?a.cloneNode(!1):a,e=a.parentNode;if(e){var e=b(e,1),g=a.nextSibling;e.appendChild(d);for(var i=g;i;i=g)g=i.nextSibling,e.appendChild(i)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),d;(d=a.parentNode)&&d.nodeType===1;)a=d;c.push(a)}for(var x=/(?:^|\s)nocode(?:\s|$)/,m=/\r\n?|\n/,j=a.ownerDocument,k=j.createElement("li");a.firstChild;)k.appendChild(a.firstChild);for(var c=[k],i=0;i=0;){var b=d[g];F.hasOwnProperty(b)?D.console&&console.warn("cannot override language handler %s",b):F[b]=a}}function I(a,d){if(!a||!F.hasOwnProperty(a))a=/^\s*=l&&(b+=2);g>=B&&(r+=2)}}finally{if(f)f.style.display=h}}catch(u){D.console&&console.log(u&&u.stack||u)}}var D=window,y=["break,continue,do,else,for,if,return,while"],E=[[y,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], -"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],M=[E,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],N=[E,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"], -O=[N,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],E=[E,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],P=[y,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], -Q=[y,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],W=[y,"as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"],y=[y,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],R=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/, -V=/\S/,X=v({keywords:[M,O,E,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",P,Q,y],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),F={};p(X,["default-code"]);p(C([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-", -/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);p(C([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/], -["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);p(C([],[["atv",/^[\S\s]+/]]),["uq.val"]);p(v({keywords:M,hashComments:!0,cStyleComments:!0,types:R}),["c","cc","cpp","cxx","cyc","m"]);p(v({keywords:"null,true,false"}),["json"]);p(v({keywords:O,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:R}), -["cs"]);p(v({keywords:N,cStyleComments:!0}),["java"]);p(v({keywords:y,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);p(v({keywords:P,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);p(v({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);p(v({keywords:Q, -hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);p(v({keywords:E,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);p(v({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);p(v({keywords:W,cStyleComments:!0,multilineStrings:!0}),["rc","rs","rust"]); -p(C([],[["str",/^[\S\s]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:C,registerLangHandler:p,sourceDecorator:v,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,g){var b=document.createElement("div");b.innerHTML="
"+a+"
";b=b.firstChild;g&&J(b,g,!0);K({h:d,j:g,c:b,i:1}); -return b.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function g(){for(var b=D.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;i=0;){var M=A[m],T=M.src.match(/^[^#?]*\/run_prettify\.js(\?[^#]*)?(?:#.*)?$/);if(T){z=T[1]||"";M.parentNode.removeChild(M);break}}var S=!0,D= -[],N=[],K=[];z.replace(/[&?]([^&=]+)=([^&]+)/g,function(e,j,w){w=decodeURIComponent(w);j=decodeURIComponent(j);j=="autorun"?S=!/^[0fn]/i.test(w):j=="lang"?D.push(w):j=="skin"?N.push(w):j=="callback"&&K.push(w)});m=0;for(z=D.length;m122||(o<65||k>90||f.push([Math.max(65,k)|32,Math.min(o,90)|32]),o<97||k>122||f.push([Math.max(97,k)&-33,Math.min(o,122)&-33]))}}f.sort(function(f,a){return f[0]- -a[0]||a[1]-f[1]});b=[];g=[];for(a=0;ak[0]&&(k[1]+1>k[0]&&c.push("-"),c.push(h(k[1])));c.push("]");return c.join("")}function e(f){for(var a=f.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),c=a.length,d=[],g=0,k=0;g=2&&f==="["?a[g]=b(o):f!=="\\"&&(a[g]=o.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var j=0,F=!1,l=!1,I=0,c=a.length;I=5&&"lang-"===y.substring(0,5))&&!(u&&typeof u[1]==="string"))g=!1,y="src";g||(m[B]=y)}k=c;c+=B.length;if(g){g=u[1];var o=B.indexOf(g),H=o+g.length;u[2]&&(H=B.length-u[2].length,o=H-g.length);y=y.substring(5);n(l+k,B.substring(0,o),h,j);n(l+k+o,g,A(y, -g),j);n(l+k+H,B.substring(H),h,j)}else j.push(l+k,y)}a.g=j}var b={},e;(function(){for(var h=a.concat(d),l=[],i={},c=0,p=h.length;c=0;)b[q.charAt(f)]=m;m=m[1];q=""+m;i.hasOwnProperty(q)||(l.push(m),i[q]=r)}l.push(/[\S\s]/);e=j(l)})();var i=d.length;return h}function t(a){var d=[],h=[];a.tripleQuotedStrings?d.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/, -r,"'\""]):a.multiLineStrings?d.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,r,"'\"`"]):d.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,r,"\"'"]);a.verbatimStrings&&h.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,r]);var b=a.hashComments;b&&(a.cStyleComments?(b>1?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,r,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/, -r,"#"]),h.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,r])):d.push(["com",/^#[^\n\r]*/,r,"#"]));a.cStyleComments&&(h.push(["com",/^\/\/[^\n\r]*/,r]),h.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,r]));if(b=a.regexLiterals){var e=(b=b>1?"":"\n\r")?".":"[\\S\\s]";h.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+ -("/(?=[^/*"+b+"])(?:[^/\\x5B\\x5C"+b+"]|\\x5C"+e+"|\\x5B(?:[^\\x5C\\x5D"+b+"]|\\x5C"+e+")*(?:\\x5D|$))+/")+")")])}(b=a.types)&&h.push(["typ",b]);b=(""+a.keywords).replace(/^ | $/g,"");b.length&&h.push(["kwd",RegExp("^(?:"+b.replace(/[\s,]+/g,"|")+")\\b"),r]);d.push(["pln",/^\s+/,r," \r\n\t\u00a0"]);b="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(b+="(?!s*/)");h.push(["lit",/^@[$_a-z][\w$@]*/i,r],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,r],["pln",/^[$_a-z][\w$@]*/i,r],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i, -r,"0123456789"],["pln",/^\\[\S\s]?/,r],["pun",RegExp(b),r]);return C(d,h)}function z(a,d,h){function b(a){var c=a.nodeType;if(c==1&&!j.test(a.className))if("br"===a.nodeName)e(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)b(a);else if((c==3||c==4)&&h){var d=a.nodeValue,i=d.match(m);if(i)c=d.substring(0,i.index),a.nodeValue=c,(d=d.substring(i.index+i[0].length))&&a.parentNode.insertBefore(l.createTextNode(d),a.nextSibling),e(a),c||a.parentNode.removeChild(a)}} -function e(a){function b(a,c){var d=c?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),h=a.nextSibling;f.appendChild(d);for(var e=h;e;e=h)h=e.nextSibling,f.appendChild(e)}return d}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),d;(d=a.parentNode)&&d.nodeType===1;)a=d;c.push(a)}for(var j=/(?:^|\s)nocode(?:\s|$)/,m=/\r\n?|\n/,l=a.ownerDocument,i=l.createElement("li");a.firstChild;)i.appendChild(a.firstChild);for(var c=[i],p=0;p=0;){var b=d[h];U.hasOwnProperty(b)?V.console&&console.warn("cannot override language handler %s",b):U[b]=a}}function A(a,d){if(!a||!U.hasOwnProperty(a))a=/^\s*=o&&(b+=2);h>=H&&(t+=2)}}finally{if(g)g.style.display=k}}catch(v){V.console&&console.log(v&&v.stack||v)}}var V=window,G=["break,continue,do,else,for,if,return,while"],O=[[G,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], -"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],J=[O,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],K=[O,"abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"], -L=[K,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"],O=[O,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],M=[G,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], -N=[G,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],R=[G,"as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"],G=[G,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],Q=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/, -S=/\S/,T=t({keywords:[J,L,O,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",M,N,G],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),U={};i(T,["default-code"]);i(C([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-", -/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup","htm","html","mxml","xhtml","xml","xsl"]);i(C([["pln",/^\s+/,r," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,r,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/], -["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);i(C([],[["atv",/^[\S\s]+/]]),["uq.val"]);i(t({keywords:J,hashComments:!0,cStyleComments:!0,types:Q}),["c","cc","cpp","cxx","cyc","m"]);i(t({keywords:"null,true,false"}),["json"]);i(t({keywords:L,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:Q}), -["cs"]);i(t({keywords:K,cStyleComments:!0}),["java"]);i(t({keywords:G,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);i(t({keywords:M,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);i(t({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);i(t({keywords:N, -hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);i(t({keywords:O,cStyleComments:!0,regexLiterals:!0}),["javascript","js"]);i(t({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);i(t({keywords:R,cStyleComments:!0,multilineStrings:!0}),["rc","rs","rust"]); -i(C([],[["str",/^[\S\s]+/]]),["regex"]);var X=V.PR={createSimpleLexer:C,registerLangHandler:i,sourceDecorator:t,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:function(a,d,e){var b=document.createElement("div");b.innerHTML="
"+a+"
";b=b.firstChild;e&&z(b,e,!0);D({h:d,j:e,c:b,i:1});return b.innerHTML}, -prettyPrint:e=e=function(a,d){function e(){for(var b=V.PR_SHOULD_USE_CONTINUATION?c.now()+250:Infinity;p - + -
+
- +
@@ -30,9 +30,10 @@

bootstrap-drawer

Basics

Other Links

@@ -44,161 +45,204 @@

Other Links

    • - © Caroline Amaba + © 2015 Caroline Amaba
    -
    -
    -
    -

    bootstrap-drawer

    -

    bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container!

    -
    -
    +
    +
    -

    Note: This documentation is still a work in progress. You can check out what's here, but also make sure you read the Readme.md in the repo! Thanks!

    - -
    -

    What is it?

    -
    -

    bootstrap-drawer 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.*

    -

    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, Bootstrap.

    -

    * Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer".

    - -
    -

    Basic Usage ie, the tl;dr Readme.md

    -
    - -

    Requirements

    - -

    Bootstrap is required for this plugin, since bootstrap-drawer built on top of the framework and, thus, jQuery is also required.

    - -

    Download

    -

    - bower install bootstrap-drawer or - npm install bootstrap-drawer -

    -

    You can also find all the releases on the Github page. For your convenience, here are some links to the latest releases.

    -

    - Download Version 1.0.0 - Get the bootstrap-drawer-1.0.0.zip -

    - -

    Basic Setup

    - -

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

    - -

    The accomanying drawer.js requires Bootstrap's core transitions.js at least (which all come after jQuery). Whether you're just including the separate Javascript components or the entire bootstrap.js, drawer.js needs to come after either/both.

    -
    -<html>
-<head>
-    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
-    <link rel="stylesheet" type="text/css" href="bootstrap-drawer.min.css">
-    <link rel="stylesheet" type="text/css" href="YOUR_OTHER_STYLES.css">
-</head>
-<body class="has-canvas">
-    <!-- Off Canvas & other HTML here -->
-    <script src="jquery.min.js"></script>
-    <script src="bootstrap.min.js"></script>
-    <script src="drawer.min.js"></script>
-    <script src="YOUR_CUSTOM_JS.js"></script>
-</body>
+            
    bootstrap-drawer
    
+            
    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!
    
+
    +
    +
    +

    What Is It?

    +

    bootstrap-drawer 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.*

    +

    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, Bootstrap.

    +

    * Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer".

    +
    +

    Requirements

    +

    Bootstrap is required for this plugin, since bootstrap-drawer is built on top of the framework. (Thus, jQuery is also required.)

    +

    Download

    +

    bower install bootstrap-drawer or npm install bootstrap-drawer

    +

    You can also find all the release on the GitHub repo releases page. For your convenience, here are some links to the latest releases:

    +

    Download Version 1.0.0 + Get the bootstrap-drawer-1.0.0.zip

    +
    +

    Basic Setup

    +

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

    +
    <html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
+        <link rel="stylesheet" type="text/css" href="bootstrap-drawer.min.css">
+        <link rel="stylesheet" type="text/css" href="YOUR_OTHER_STYLES.css">
+    </head>
+    <body class="has-canvas">
+        <!-- Off Canvas & other HTML here -->
+        <script src="jquery.min.js"></script>
+        <script src="bootstrap.min.js"></script>
+        <script src="drawer.min.js"></script>
+        <script src="YOUR_CUSTOM_JS.js"></script>
+    </body>
 </html>
-
    - -

    Basic Usage

    - -

    To get a simple drawer like the one on this page:

    -
    -<body class="has-drawer"> <!-- add this class to your body for proper sizing -->
-    <div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample">
-        <div class="drawer-controls">
-            <a href="#drawerExample" data-toggle="drawer" href="#drawerExample" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a>
+
    +

    Basic Usage

    +

    Full Page Drawer

    +

    To get a simple, full-page drawer, like the one here in the docs, simply add .has-drawer to your body, and add the .drawer container like so:

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

    bootstrap-drawer was built with a bootstrap-minded style, based on the already built .nav or .panel classes.

    - -
      -
    • - .drawer is the main class. It has a similar sizing system, based on the 12-column system of bootstrap, using .dw-SIZE-#COLS. 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). -
      • -
    • - .fold starts the menu closed (.fold.open for an opened drawer). This class, as well as its Javascript component are built similarly to the .collapse components. It had to be named differently because bootstrap-drawer is folding horizontally and not collapsing veritcally. -
      • -
    • - .drawer-controls 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 data-toggle="drawer" or the jQuery API ($('.drawer').drawer();). -
      • -
    • - .drawer-contents holds the innards of your drawer menu: - -
        -
      • - .drawer-heading is the title section of the menu. -
        • -
      • - .drawer-body contains non-menu/nav text that you may want to include in your drawer. -
        • -
      • - .drawer-nav or .drawer-fullnav 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 pills nav. -
        • -
      • - .drawer-footer is a good spot for any small-print type code. Add the .locked class to position it at the bottom of your menu. -
        • -
      -
      • +       +

      Container-nested Drawer

      +
      +
      +
      + Menu +
      +
      +
      +

      Menu

      +
      + +
      +
      +
      +

      You can also nest the drawer in a block container by adding the .drawer-inside class to .drawer and adding .has-inner-drawer to your parent container, like so:

      +

      You can also use panels inside of other elements that have a defined with and height. A z-index will also need to be defined.

      +

      You'll also have to make sure that you give your controls (however you do them) are visible. In this example, the .panel-body was given padding-left: 10% so that the Menu button isn't running into the content of the panel.

      +
      +
      -
      -

      Position / Colors and other (advanced) uses.

      - +
      <div class="panel panel-default has-inner-drawer">
+    <div id="drawerExample2" class="drawer 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">
+                <h2 class="drawer-title">Menu</h2>
+            </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" style="padding-left: 10%">
+        <p>You can also use panels inside of other elements that have
+        a defined with and height.</p>
+        <p>You'll have to be responsible for making sure your controls accessible.</p>
+    </div>
+</div>
+
      +


      +

      bootstrap-drawer components

      +

      bootstrap_drawer was built with a Bootstrap-minded style. The classes used are very similar to the .nav and .panel classes in Bootstrap. The Bootstrap data-api for toggling the drawer is, likewise, built like .collapse and its javascript component.

      +

      bootstrap-drawer does not (yet) have a class that expands to a navbar on bigger screens. For now, the main focus of bootstrap-drawer was to do one thing well. In a later version, there may be an additional ".drawer-navbar" class to remove the drawer on larger screens.

      +

      Class Breakdown

      +

      .drawer is the main class. The sizing system is based on the 12-column system of Bootstrap, using .dw-SIZE-#COLS. 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). This size becomes relative when using it inside another container.

      +

      .fold started the menu closed (.fold.open starts the menu opened). This class, as well as the +javascript component are built similarly to the .collapse components. It had to +be named differently because bootstrap-drawer is folding horizontally and not collapsing vertically.

      +
      <div class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold">
+    ...
+</div>
+
      +

      .drawer-controls 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 data-toggle="drawer" or the jQuery API ($('.drawer').drawer();).

      +
      <div id="drawerExample2" class="drawer 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>
+</div>
+
      +


      +

      Drawer Contents

      +

      .drawer-contents wraps the main parts of the drawer: .drawer-heading, .drawer-body, .drawer-nav / .drawer-fullnav, .drawer-footer. These classes are very similar to how Bootstrap's .panel inner classes work.

      +

      .drawer-nav and .drawer-fullnav are already-built nav classes that are based on the .nav.nav-pills.nav-stacked combination of classes. The difference between the two is that .drawer-nav has padding on the left and right, while .drawer-fullnav goes the entire width of the drawer.

      +

      You can use .drawer-body to wrap you own navigation, as well, or just include content.

      +

      DEMOS:

      +
      +
      +
      +
      +
      +
      +

      .drawer-nav example

      +
      + +
      - -

      WIP

      - -
      -

      data-toggle / Javascript

      - +
      +
      +
      +
      +
      +
      +
      +

      .drawer-fullnav example

      +
      + +
      - -

      WIP

      +
      +

      .drawer-heading, like .panel-heading is specially styled to be the top of the drawer. In addition, there is a .drawer-title class that can be put within .drawer-heading for a specially styled <h#> tag.

      +

      .drawer-footer finishes off the components of the drawer (again, like .panel-footer). Additionally, by giving the .drawer-footer an additional locked class, the footer will then stick to the bottom of the drawer. This is absolutely positioned within the drawer, and you should be careful that your content does not overlap the .drawer-footer.

      + +
      - - + - + - + \ No newline at end of file diff --git a/javascript.html b/javascript.html new file mode 100644 index 0000000..f620594 --- /dev/null +++ b/javascript.html @@ -0,0 +1,195 @@ + + + + + + + + + bootstrap-drawer documentation + + + + + + + +
      +
      + +
      +
      +
      +

      bootstrap-drawer

      +
      +
      +   + +
      +
      +

      Basics

      +
      + +
      +

      Other Links

      +
      + +
      + © 2015 Caroline Amaba +
      +
      +
      +
      +
      +
      +

      bootstrap-drawer

      +

      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!

      +
      +
      +
      +

      Component jQuery API

      +

      Bootstrap drawer comes with drawer.js to be added to the bootstrap.js component suite. If you're including separate components, drawer.js does depend on transition.js plugin.

      +

      drawer.js is built similarly to collapse.js.

      +
      +

      Example

      +

      Click the buttons below to fold/open another element with the class changes:

      +
        +
      • .fold hides content
        • +
      • .folding is applied during transitions.
        • +
      • .fold.open shows content.
        • +
      +

      You can use a link with the href attribute, or a button with the data-target attribute. Both require the data-toggle="drawer" attribute.

      +
      +
      +
      +
      + Button/Link Toggle Example +
      + +
      +
      +
      +
      +
      + Try the buttons over there to toggle the menu that pops out on the left! +
      +
      +

      + Link with href +

      +

      + +

      +
      +
      +
      +
      + + +

      Usage

      +

      The drawer plugin utilizes a few classes to do all the work:

      +
        +
      • .fold hides content
        • +
      • .fold.open shows content.
        • +
      • .folding is applied during transitions, and removed when it finishes.
        • +
      +

      These classes can be found in less/mixins/drawer-framework.less. They are built in loops with the .dw-SIZE-# classes because they utilize margins based on the column width.

      +

      Via data attributes

      +

      Just add data-toggle="drawer" and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class .fold to the collapsible element. If you'd like it to default open, add the additional class .open.

      +

      Via JavaScript

      +

      Enable manually with:

      +
      $('.drawer').drawer()
+
      +

      Options

      +

      Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".

      + + + + + + + + + + + + + + + + + + + +
      Nameselectordefaultdescription
      parentselectorfalseIf a selector is provided, then all collapsible elements under the specified parent will be closed when this drawer is open.
      togglebooleantrueToggle the drawer element on invocation.
      + +

      Methods

      +
      .collapse(options)
      +

      Activates your content as a drawer element. Accepts an optional options object.

      +
      $('#myDrawer').drawer({
+    toggle: false
+});
+
      +
      .collapse('toggle')
      +

      Toggles a drawer element as folded or open.

      +
      .collapse('show')
      +

      Shows drawer element as opened.

      +
      .collapse('hide')
      +

      Hide a drawer element.

      +

      Events

      +

      drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking +into the drawer functionality.

      + + + + + + + + + + + + + + + + + + + + + +
      Event TypeDescription
      show.bs.drawerThis event fires immediately when the show instance method is called.
      shown.bs.drawerThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
      hide.bs.drawerThis event is fired immediately when the hide method has been called.
      hidden.bs.drawerThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
      + +
      $('#myDrawer').on('hidden.bs.drawer', function() {
+    // do something here...
+});
+
      + +
      + + + + + + + \ No newline at end of file diff --git a/less.html b/less.html new file mode 100644 index 0000000..89de7f2 --- /dev/null +++ b/less.html @@ -0,0 +1,149 @@ + + + + + + + + + bootstrap-drawer documentation + + + + + + + +
      +
      + +
      +
      +
      +

      bootstrap-drawer

      +
      +
      +   + +
      +
      +

      Basics

      +
      + +
      +

      Other Links

      +
      + +
      + © 2015 Caroline Amaba +
      +
      +
      +
      +
      +
      +

      bootstrap-drawer

      +

      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!

      +
      +
      +
      +

      LESS / Custom Builds

      +

      If you're familiar with LESS, 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.

      +

      bootstrap-drawer currently uses Gulp and LESS, but it'd be great if people can contribute grunt and SASS components! Check out the repo to contribute!

      +
      +

      Building Your Own Flavor of Drawer

      +

      You'll need gulp and Node (or io.js if you want to build your own version.

      +

      Run npm install in order to get all the devDependencies from the package.json.

      +

      Most of the tasks are outlined in gulpfile.js. The gulp build will also update +the assets for example/index.html so you can see your changes.

      +

      To customize bootstrap-drawer, just edit some of the variables in less/drawer-variables.less to +the sizes and colors, etc. you want. Then run gulp build and a new dist/css/bootstrap-drawer(.min).css +should be made just for you! Include the file right after the Bootstrap core file, and you should be +good to go!

      +

      Things to keep in mind:

      +
        +
      • bootstrap-drawer uses some variables (@grid-gutter-width, @zindex-navbar-fixed, @link-color, to +name most of them), so if you're using a different varibles.less file, be sure to replace it in +less/bootstrap-drawer.less.
        • +
      • The .dw-SIZE-# columns are built in LESS loops, and can change as you change the @grid-columns variable. If you're using 16-columns instead of 12, less/mixins/drawer-framework.less is built to build more columns (like.dw-md-13`, etc.).
        • +
      +
      +

      Using Less

      +

      I am assuming for this section you are familiar with using less and the Bootstrap less source. +There are files in the less/ directory that are parallel to Bootstrap's less source files. +drawer.less 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:

      +

      Add to your main less file after bootstrap

      +
          @import "bootstrap.less";
+    @import "path/to/drawer.less";
+
+    /* Your styles */
+
      +

      Add to bootstrap.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 ...
+
      +

      Move Contents

      +

      The first two lines in less/drawer.less can be removed and moved

      +

      Feel free to move drawer-variables.less and drawer-framework.less 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:

      +
        +
      • @import "./drawer-variables"; can be put after importing variables.less
        • +
      • @import "./mixins/drawer-framework"; can be put after importing mixins.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 ...
+
      + +
      + + + + + + + \ No newline at end of file diff --git a/less/drawer-docs.less b/less/drawer-docs.less index 1e36f42..f390ced 100644 --- a/less/drawer-docs.less +++ b/less/drawer-docs.less @@ -1,6 +1,6 @@ // FOR DOCS -@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700); +@import url(//fonts.googleapis.com/css?family=Open+Sans:400,600,700); @bsdir: "../bower_components/bootstrap/less/"; @teal: lighten(#447e8e, 5%); @@ -9,7 +9,15 @@ // Core variables and mixins @import "@{bsdir}variables.less"; +/*** variable overrides ***/ @brand-primary: @teal; +@font-size-h1: 225%; +@font-size-h2: 200%; +@font-size-h3: 150%; +@font-size-h4: 110%; +@font-size-h5: 100%; +@font-size-h6: 95%; + @import "./drawer-variables.less"; @import "@{bsdir}mixins.less"; @import "./mixins/drawer-framework.less"; @@ -28,6 +36,8 @@ // Components @import "@{bsdir}component-animations.less"; +@import "@{bsdir}tables.less"; +@import "@{bsdir}panels.less"; // Components w/ JavaScript @import "./drawer.less"; @@ -38,12 +48,18 @@ body { font-family: 'Open Sans', Arial, sans-serif; - font-size: 12pt; - line-height: 18pt; + font-size: 14pt; + line-height: 24pt; } -p { - padding-bottom: @grid-gutter-width/2; +.container { + max-width: 1000px; +} + +#drawer-docs, #drawer-docs-content { + p { + padding-bottom: @grid-gutter-width/2; + } } #drawer-docs { @@ -58,25 +74,61 @@ p { #gradient > .vertical(@teal, @teal-light); color: #fff; margin-bottom: @grid-gutter-width/2; + + h4 { + line-height: 150%; + font-weight: 400; + } + } + + h1, h2, h3, h4, h5, h6 { + font-weight: 600; + } +} + +#drawer-docs-content { + + hr { + margin-bottom: @grid-gutter-width; } + h1, h2 { + border-bottom: 2px solid @brand-primary; + padding-bottom: @grid-gutter-width/2; + color: @gray; + font-weight: 700; + } - pre.prettyprint, pre.prettyprinted { - border: 0; - padding: 10px; - margin-bottom: 15px; + pre { + background: #f8f8f8; } +} - ul { - padding-top: 8px; - padding-bottom: 8px; +#drawer-docs-footer { + margin: @grid-gutter-width auto 0 auto; + display: block; + padding: @grid-gutter-width 0; + border-top: 1px solid @gray-light; +} - li { - padding-bottom: 8px; - } +.example-container, .example-container-right { + font-size: 12pt; + line-height: 16pt; + height: 400px; + z-index: 500; +} + +.example-container { + + .panel-body { + padding-left: 10%; } - .container { - max-width: 1000px; + &-right .panel-body { + padding-right: 10%; } +} + +.give-height { + height: 350px; } \ No newline at end of file diff --git a/package.json b/package.json index c34cba4..00ba485 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,9 @@ "homepage": "https://github.com/clineamb/bootstrap-drawer-menu", "devDependencies": { "gulp": "^3.8.10", + "gulp-concat": "^2.4.3", "gulp-less": "^2.0.1", + "gulp-markdown": "^1.0.0", "gulp-rename": "^1.2.0", "gulp-uglify": "^1.1.0", "gulp-util": "^3.0.2",