From 3d99a4c15e0661df630dbaf7dddb5228cf044fe6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 16:40:39 -0700 Subject: move to examples dir --- examples/offcanvas/index.html | 116 +++++++++++++++++++++++++++++++++++++++ examples/offcanvas/offcanvas.css | 48 ++++++++++++++++ examples/offcanvas/offcanvas.js | 5 ++ 3 files changed, 169 insertions(+) create mode 100644 examples/offcanvas/index.html create mode 100644 examples/offcanvas/offcanvas.css create mode 100644 examples/offcanvas/offcanvas.js (limited to 'examples/offcanvas') diff --git a/examples/offcanvas/index.html b/examples/offcanvas/index.html new file mode 100644 index 000000000..1092f2c1a --- /dev/null +++ b/examples/offcanvas/index.html @@ -0,0 +1,116 @@ + + + + + + + + + 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

+
+ +
+ + + + + + + \ No newline at end of file diff --git a/examples/offcanvas/offcanvas.css b/examples/offcanvas/offcanvas.css new file mode 100644 index 000000000..27a075d76 --- /dev/null +++ b/examples/offcanvas/offcanvas.css @@ -0,0 +1,48 @@ +/* + * Style twaks + * -------------------------------------------------- + */ +body { + padding-top: 70px; +} +footer { + padding-left: 15px; + padding-right: 15px; +} + +/* + * Off Canvas + * -------------------------------------------------- + */ +@media screen and (max-width: 768px) { + .row-offcanvas { + position: relative; + overflow: hidden // Needed for Internet Explorer + -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: -58.333333333333336%; // 6 columns + } + + .row-offcanvas-left + .sidebar-offcanvas { + left: -58.333333333333336%; // 6 columns + } + + .row-offcanvas-right.active { + right: 58.333333333333336%; // 6 columns + } + + .row-offcanvas-left.active { + left: 58.333333333333336%; // 6 columns + } + + .sidebar-offcanvas { + position: absolute; + width: 58.333333333333336%; // 6 columns + } +} \ No newline at end of file diff --git a/examples/offcanvas/offcanvas.js b/examples/offcanvas/offcanvas.js new file mode 100644 index 000000000..12f2dff51 --- /dev/null +++ b/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 From 024e320e5c3cf1adce8404f87e7c0c746461b6e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 17:39:37 -0700 Subject: hella examples fixing, mostly navbars and lots of work on grids example --- examples/offcanvas/index.html | 34 +++++++++++++++++----------------- examples/offcanvas/offcanvas.css | 12 ++++++------ 2 files changed, 23 insertions(+), 23 deletions(-) (limited to 'examples/offcanvas') diff --git a/examples/offcanvas/index.html b/examples/offcanvas/index.html index 1092f2c1a..e6c186462 100644 --- a/examples/offcanvas/index.html +++ b/examples/offcanvas/index.html @@ -9,7 +9,7 @@ Off Canvas Template for Bootstrap - + @@ -18,16 +18,15 @@