From a9c829bc0c75dd7723e6c74e1defaab5dbb4c00b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Dec 2013 22:47:03 -0800 Subject: Rearrange repository contents because muahahahahahaha --- docs/examples/offcanvas/index.html | 130 ++++++++++++++++++++++++++++++++++ docs/examples/offcanvas/offcanvas.css | 51 +++++++++++++ docs/examples/offcanvas/offcanvas.js | 5 ++ 3 files changed, 186 insertions(+) create mode 100644 docs/examples/offcanvas/index.html create mode 100644 docs/examples/offcanvas/offcanvas.css create mode 100644 docs/examples/offcanvas/offcanvas.js (limited to 'docs/examples/offcanvas') diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html new file mode 100644 index 000000000..f1a447485 --- /dev/null +++ b/docs/examples/offcanvas/index.html @@ -0,0 +1,130 @@ + + + + + + + + + + + Off Canvas Template for Bootstrap + + + + + + + + + + + + + + + + + +
+ +
+ +
+

+ +

+
+

Hello, world!

+

This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

+
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+
+ + +
+ +
+ +
+

© Company 2013

+
+ +
+ + + + + + + + + + diff --git a/docs/examples/offcanvas/offcanvas.css b/docs/examples/offcanvas/offcanvas.css new file mode 100644 index 000000000..ef632dc00 --- /dev/null +++ b/docs/examples/offcanvas/offcanvas.css @@ -0,0 +1,51 @@ +/* + * Style tweaks + * -------------------------------------------------- + */ +html, +body { + overflow-x: hidden; /* Prevent scroll on narrow devices */ +} +body { + padding-top: 70px; +} +footer { + padding: 30px 0; +} + +/* + * Off Canvas + * -------------------------------------------------- + */ +@media screen and (max-width: 767px) { + .row-offcanvas { + position: relative; + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; + } + + .row-offcanvas-right + .sidebar-offcanvas { + right: -50%; /* 6 columns */ + } + + .row-offcanvas-left + .sidebar-offcanvas { + left: -50%; /* 6 columns */ + } + + .row-offcanvas-right.active { + right: 50%; /* 6 columns */ + } + + .row-offcanvas-left.active { + left: 50%; /* 6 columns */ + } + + .sidebar-offcanvas { + position: absolute; + top: 0; + width: 50%; /* 6 columns */ + } +} diff --git a/docs/examples/offcanvas/offcanvas.js b/docs/examples/offcanvas/offcanvas.js new file mode 100644 index 000000000..12f2dff51 --- /dev/null +++ b/docs/examples/offcanvas/offcanvas.js @@ -0,0 +1,5 @@ +$(document).ready(function() { + $('[data-toggle=offcanvas]').click(function() { + $('.row-offcanvas').toggleClass('active'); + }); +}); \ No newline at end of file -- cgit v1.2.3