From 8e50e7a8f264c65b453a9b7133c7532c439730f5 Mon Sep 17 00:00:00 2001 From: Nicole Date: Sun, 23 Jun 2013 17:17:08 -0700 Subject: Update remaining templates to match starter template --- offcanvas/example.css | 100 +++++++++++++++++++++++++++++++++++++++++++ offcanvas/example.js | 5 +++ offcanvas/index.html | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 219 insertions(+) create mode 100644 offcanvas/example.css create mode 100644 offcanvas/example.js create mode 100644 offcanvas/index.html (limited to 'offcanvas') diff --git a/offcanvas/example.css b/offcanvas/example.css new file mode 100644 index 000000000..6dcd5ece1 --- /dev/null +++ b/offcanvas/example.css @@ -0,0 +1,100 @@ +body { + padding-top: 80px; +} +footer { + padding-left: 15px; + padding-right: 15px; +} + +/* + * Off canvas + * -------------------------------------------------- */ + +.row-offcanvas { + position: relative; + overflow: hidden; + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.row-offcanvas.active { + overflow: visible; +} +.row-offcanvas-right .sidebar-offcanvas { + right: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-left .sidebar-offcanvas { + left: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-right.active { + right: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-left.active { + left: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.sidebar-offcanvas { + position: absolute; + top: 0; +} + +@media screen and (max-width: 319px) { + /* This is here instead of being outside the media queries because when + * we exit "mobile land", the sidebar needs to be able to restore its + * originally authored ".col-lg-X" width. */ + .sidebar-offcanvas { + width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ + } +} + +@media screen and (min-width: 320px) and (max-width: 480px) { + .row-offcanvas-right .sidebar-offcanvas { + right: -270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-left .sidebar-offcanvas { + left: -270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-right.active { + right: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-left.active { + left: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .sidebar-offcanvas { + width: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } +} + +/* Landscape phone to tablets + * -------------------------- */ +@media screen and (min-width: 481px) and (max-width: 767px) { + .row-offcanvas-right .sidebar-offcanvas { + right: -480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-left .sidebar-offcanvas { + left: -480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-right.active { + right: 480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-left.active { + left: 480px; /* 60px * 8 = Tablets and wider */ + } + .sidebar-offcanvas { + width: 480px; /* 60px * 8 = Tablets and wider */ + } +} + +/* Tablets & above + * ---------------- */ +@media screen and (min-width: 768px) { + .row-offcanvas { + position: static; + overflow: visible; + } + .sidebar-offcanvas { + position: static; + } + .btn-offcanvas { + display: none; + } +} \ No newline at end of file diff --git a/offcanvas/example.js b/offcanvas/example.js new file mode 100644 index 000000000..12f2dff51 --- /dev/null +++ b/offcanvas/example.js @@ -0,0 +1,5 @@ +$(document).ready(function() { + $('[data-toggle=offcanvas]').click(function() { + $('.row-offcanvas').toggleClass('active'); + }); +}); \ No newline at end of file diff --git a/offcanvas/index.html b/offcanvas/index.html new file mode 100644 index 000000000..319fcac70 --- /dev/null +++ b/offcanvas/index.html @@ -0,0 +1,114 @@ + + + + + + + + + Off canvas template for Bootstrap + + + + + + + + + + +
+
+ + Project name +
+ +
+
+
+ +
+ +
+
+ +
+

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 2012

+
+ +
+ + + + + + + \ No newline at end of file -- cgit v1.2.3 From bf51e24700627b17df5041f3a369f6f6b4a4bfbb Mon Sep 17 00:00:00 2001 From: Nicole Date: Sat, 20 Jul 2013 23:17:01 -0700 Subject: change file names to example names --- offcanvas/example.css | 100 ------------------------------------------------ offcanvas/example.js | 5 --- offcanvas/index.html | 2 +- offcanvas/offcanvas.css | 100 ++++++++++++++++++++++++++++++++++++++++++++++++ offcanvas/offcanvas.js | 5 +++ 5 files changed, 106 insertions(+), 106 deletions(-) delete mode 100644 offcanvas/example.css delete mode 100644 offcanvas/example.js create mode 100644 offcanvas/offcanvas.css create mode 100644 offcanvas/offcanvas.js (limited to 'offcanvas') diff --git a/offcanvas/example.css b/offcanvas/example.css deleted file mode 100644 index 6dcd5ece1..000000000 --- a/offcanvas/example.css +++ /dev/null @@ -1,100 +0,0 @@ -body { - padding-top: 80px; -} -footer { - padding-left: 15px; - padding-right: 15px; -} - -/* - * Off canvas - * -------------------------------------------------- */ - -.row-offcanvas { - position: relative; - overflow: hidden; - -webkit-transition: all 0.25s ease-out; - -moz-transition: all 0.25s ease-out; - transition: all 0.25s ease-out; -} -.row-offcanvas.active { - overflow: visible; -} -.row-offcanvas-right .sidebar-offcanvas { - right: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-left .sidebar-offcanvas { - left: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-right.active { - right: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.row-offcanvas-left.active { - left: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ -} -.sidebar-offcanvas { - position: absolute; - top: 0; -} - -@media screen and (max-width: 319px) { - /* This is here instead of being outside the media queries because when - * we exit "mobile land", the sidebar needs to be able to restore its - * originally authored ".col-lg-X" width. */ - .sidebar-offcanvas { - width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ - } -} - -@media screen and (min-width: 320px) and (max-width: 480px) { - .row-offcanvas-right .sidebar-offcanvas { - right: -270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-left .sidebar-offcanvas { - left: -270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-right.active { - right: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .row-offcanvas-left.active { - left: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } - .sidebar-offcanvas { - width: 270px; /* 60px * 4.5 = average iPhones and Android phones */ - } -} - -/* Landscape phone to tablets - * -------------------------- */ -@media screen and (min-width: 481px) and (max-width: 767px) { - .row-offcanvas-right .sidebar-offcanvas { - right: -480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-left .sidebar-offcanvas { - left: -480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-right.active { - right: 480px; /* 60px * 8 = Tablets and wider */ - } - .row-offcanvas-left.active { - left: 480px; /* 60px * 8 = Tablets and wider */ - } - .sidebar-offcanvas { - width: 480px; /* 60px * 8 = Tablets and wider */ - } -} - -/* Tablets & above - * ---------------- */ -@media screen and (min-width: 768px) { - .row-offcanvas { - position: static; - overflow: visible; - } - .sidebar-offcanvas { - position: static; - } - .btn-offcanvas { - display: none; - } -} \ No newline at end of file diff --git a/offcanvas/example.js b/offcanvas/example.js deleted file mode 100644 index 12f2dff51..000000000 --- a/offcanvas/example.js +++ /dev/null @@ -1,5 +0,0 @@ -$(document).ready(function() { - $('[data-toggle=offcanvas]').click(function() { - $('.row-offcanvas').toggleClass('active'); - }); -}); \ No newline at end of file diff --git a/offcanvas/index.html b/offcanvas/index.html index 319fcac70..350e83931 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -6,7 +6,7 @@ - Off canvas template for Bootstrap + Off Canvas Template for Bootstrap diff --git a/offcanvas/offcanvas.css b/offcanvas/offcanvas.css new file mode 100644 index 000000000..6dcd5ece1 --- /dev/null +++ b/offcanvas/offcanvas.css @@ -0,0 +1,100 @@ +body { + padding-top: 80px; +} +footer { + padding-left: 15px; + padding-right: 15px; +} + +/* + * Off canvas + * -------------------------------------------------- */ + +.row-offcanvas { + position: relative; + overflow: hidden; + -webkit-transition: all 0.25s ease-out; + -moz-transition: all 0.25s ease-out; + transition: all 0.25s ease-out; +} +.row-offcanvas.active { + overflow: visible; +} +.row-offcanvas-right .sidebar-offcanvas { + right: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-left .sidebar-offcanvas { + left: -210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-right.active { + right: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.row-offcanvas-left.active { + left: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ +} +.sidebar-offcanvas { + position: absolute; + top: 0; +} + +@media screen and (max-width: 319px) { + /* This is here instead of being outside the media queries because when + * we exit "mobile land", the sidebar needs to be able to restore its + * originally authored ".col-lg-X" width. */ + .sidebar-offcanvas { + width: 210px; /* 60px * 3.5 = very small phones like 240x320 HTC Wildfire */ + } +} + +@media screen and (min-width: 320px) and (max-width: 480px) { + .row-offcanvas-right .sidebar-offcanvas { + right: -270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-left .sidebar-offcanvas { + left: -270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-right.active { + right: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .row-offcanvas-left.active { + left: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } + .sidebar-offcanvas { + width: 270px; /* 60px * 4.5 = average iPhones and Android phones */ + } +} + +/* Landscape phone to tablets + * -------------------------- */ +@media screen and (min-width: 481px) and (max-width: 767px) { + .row-offcanvas-right .sidebar-offcanvas { + right: -480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-left .sidebar-offcanvas { + left: -480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-right.active { + right: 480px; /* 60px * 8 = Tablets and wider */ + } + .row-offcanvas-left.active { + left: 480px; /* 60px * 8 = Tablets and wider */ + } + .sidebar-offcanvas { + width: 480px; /* 60px * 8 = Tablets and wider */ + } +} + +/* Tablets & above + * ---------------- */ +@media screen and (min-width: 768px) { + .row-offcanvas { + position: static; + overflow: visible; + } + .sidebar-offcanvas { + position: static; + } + .btn-offcanvas { + display: none; + } +} \ No newline at end of file diff --git a/offcanvas/offcanvas.js b/offcanvas/offcanvas.js new file mode 100644 index 000000000..12f2dff51 --- /dev/null +++ b/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 6d269c2ed7e035101bac75eecd1551df5004ed1f Mon Sep 17 00:00:00 2001 From: Nicole Date: Sat, 20 Jul 2013 23:30:08 -0700 Subject: add git ignore --- offcanvas/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'offcanvas') diff --git a/offcanvas/index.html b/offcanvas/index.html index 350e83931..1f774c1da 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -12,7 +12,7 @@ - + @@ -109,6 +109,6 @@ - + \ No newline at end of file -- cgit v1.2.3 From 9c13af8cb10f6e16322c50dfc82ae9263d99b82a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 26 Jul 2013 20:42:47 -0700 Subject: massive update, including new index page --- offcanvas/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'offcanvas') diff --git a/offcanvas/index.html b/offcanvas/index.html index 1f774c1da..982b8f7b6 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -9,7 +9,7 @@ Off Canvas Template for Bootstrap - + -- cgit v1.2.3 From c2b7e2ca278ba7ae2940690fc1a8e9c049ce9a95 Mon Sep 17 00:00:00 2001 From: Peter Wilmott Date: Mon, 29 Jul 2013 21:23:19 +0100 Subject: use the local copy of jquery --- offcanvas/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'offcanvas') diff --git a/offcanvas/index.html b/offcanvas/index.html index 982b8f7b6..1adc480fd 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -108,7 +108,7 @@ - + - \ No newline at end of file + -- cgit v1.2.3 From 6e8ace4b2bfa7927ee19504fdbeb31de6b419c04 Mon Sep 17 00:00:00 2001 From: ggam Date: Sat, 10 Aug 2013 13:36:05 +0200 Subject: Simplified Off Canvas example: - Removed unneeded media queries to be more consistent with the rest of Bootstrap. - Fixed unworking grid on latest 3.0 builds (BS version on this repo is outdated) - Inluded needed bootstrap.js --- offcanvas/index.html | 52 ++++++++++++------------ offcanvas/offcanvas.css | 102 ++++++++++++------------------------------------ 2 files changed, 52 insertions(+), 102 deletions(-) (limited to 'offcanvas') diff --git a/offcanvas/index.html b/offcanvas/index.html index 1adc480fd..1092f2c1a 100644 --- a/offcanvas/index.html +++ b/offcanvas/index.html @@ -9,88 +9,90 @@ 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 »

-